コードエディタは、インデントを使用せずに、コードのネストレベルを効果的に示唆できますか？[閉まっている]

同じXMLテキストに2つの表示オプションを提供するXMLテキストエディターを作成しました。1つはインデント（仮想）、もう1つは左揃えです。左寄せビューの動機は、XMLコンテキストの自動化された副作用であるインデントの干渉なしに、ユーザーがプレーンテキストまたはXPathコードのインデントに使用している空白文字を「見る」のを支援することです。

私は、ユーザーを支援する左寄せモードの視覚的な手がかりを（エディターの編集不可部分で）提供したいと思いますが、あまり複雑になりません。

接続線だけを使用してみましたが、それは忙しすぎるようでした。私がこれまでに思いついた最高のものは、下のエディターのモックアップされたスクリーンショットに示されていますが、私はより良い/より簡単な代替手段を探しています（コードをあまり必要としません）。

[編集]

ヒートマップのアイデア（@jimpから）を取得すると、これと3つの選択肢が得られます-a、b、cというラベルが付けられています。

次のセクションでは、受け入れられた回答を提案として説明し、他の多くの回答やコメントからアイデアを集めます。この質問は現在コミュニティwikiであるため、お気軽に更新してください。

NestView

インデントを使用せずにネストされたコードの可読性を向上させる視覚的な方法を提供するこのアイデアの名前。

等高線

NestView内の異なる影付きの線の名前

上の画像は、XMLスニペットを視覚化するために使用されるNestViewを示しています。この図ではXMLを使用していますが、この図ではネストを使用する他のコード構文も使用できます。

概要：

1. 等高線は、ネストレベルを伝えるために（ヒートマップのように）シェーディングされています

2. 等高線は、ネストレベルが開いているか閉じているかを示すために角度が付けられています。

3. 等高線は、ネストレベルの開始点を対応する終了点にリンクします。

4. 等高線の幅を組み合わせることで、ヒートマップに加えて、ネストレベルの視覚的な印象が得られます。

5. NestViewの幅は手動でサイズ変更できますが、コードが変更されても変更しないでください。これを維持するために、輪郭線を圧縮または切り捨てることができます。

6. 空白行は、テキストをより消化しやすい塊に分割するためにコードを使用する場合があります。このような行は、NestViewで特別な動作をトリガーする可能性があります。たとえば、ヒートマップをリセットしたり、背景色の等高線を使用したり、あるいはその両方を行うことができます。

7. 現在選択されているコードに関連付けられている1つ以上の等高線を強調表示できます。選択したコードレベルに関連付けられた等高線が最も強調されますが、ネストされたグループを強調表示するのに役立つ他の等高線も「点灯」できます。

8. さまざまな動作（コードの折り畳みやコードの選択など）を、等高線のクリック/ダブルクリックに関連付けることができます。

9. 等高線の異なる部分（リーディングエッジ、ミドルエッジ、またはトレーリングエッジ）には、異なる動的な動作が関連付けられている場合があります。

10. 等高線上のマウスホバーイベントでツールチップを表示できます。

11. NestViewは、コードが編集されると継続的に更新されます。ネスティングのバランスが取れていない場合、ネスティングレベルが終了する場所を想定できますが、関連する一時的な等高線は警告として何らかの方法で強調表示する必要があります。

12. 等高線のドラッグアンドドロップ動作をサポートできます。動作は、ドラッグされる等高線の部分によって異なる場合があります。

13. エラーや状態の変更のための行番号付けや色の強調表示など、一般的に左マージンにある機能は、NestViewにオーバーレイする可能性があります。

追加機能

この提案はさまざまな追加の問題に対処します。多くは元の質問の範囲外ですが、有用な副作用です。

ネストされた領域の開始と終了を視覚的にリンクする

等高線は、ネストされた各レベルの開始点と終了点を接続します

現在選択されている行のコンテキストを強調表示する

コードが選択されると、NestViewの関連するネストレベルを強調表示できます。

同じネストレベルでコード領域を区別する

XMLの場合、異なる名前空間に異なる色相を使用できます。プログラミング言語（c＃など）は、同様の方法で使用できる名前付き領域をサポートします。

ネスト領域内の領域を異なる視覚ブロックに分割する

読みやすくするために、コードに余分な行が挿入されることがよくあります。このような空のラインは、NestViewの等高線の彩度レベルをリセットするために使用できます。

複数列のコードビュー

インデントなしのコードは、ワードラップまたは水平スクロールが必要になる可能性が低いため、複数列ビューの使用をより効果的にします。このビューでは、コードが1つの列の下部に到達すると、次の列に流れます。

視覚的な補助を提供するだけではありません

概要で提案されているように、NestView は、TreeViewコントロールに期待されるものとほぼ一致する幅広い編集および選択機能を提供できます。主な違いは、一般的なTreeViewノードには、エキスパンダーとノードアイコンの2つの部分があることです。NestViewの輪郭線には、オープナー（傾斜）、コネクタ（垂直）、およびクローズ（傾斜）の3つの部分があります。

インデントについて

NestViewは、インデントされていないコードを補完しますが、従来のインデントされたコードビューを置き換えることはほとんどありません。

NestViewを採用するソリューションは、空白文字を含むコードテキスト自体に影響を与えることなく、インデントされたコードビューとインデントされていないコードビューをシームレスに切り替える方法を提供する可能性があります。インデントビューのテクニックの1つは「仮想フォーマット」です。タブまたはスペース文字の代わりに動的な左マージンが使用されます。NestViewを動的にレンダリングするために使用される同じネストレベルのデータは、より従来型のインデントビューにも使用できます。

印刷

インデントは、印刷されたコードを読みやすくするために重要です。ここでは、タブ/スペース文字と動的な左マージンがないため、テキストは右マージンで折り返されても、インデントされたビューの整合性が維持されます。行番号は、コードがワードラップされる場所とインデントの正確な位置を示す視覚的なマーカーとして使用できます。

画面の不動産：フラット対インデント

NestViewが貴重な画面の不動産を使用するかどうかの質問に対処します。

等高線は、コードエディターの文字幅と同じ幅でうまく機能します。したがって、12文字幅のNestView幅は、等高線が切り捨て/圧縮される前に12レベルのネストに対応できます。

インデントビューが各ネストレベルに3文字幅を使用する場合、ネストが4レベルのネストに達するまでスペースが節約されます。このネストレベルの後、フラットビューには、各ネストレベルで増加するスペース節約の利点があります。

注：コードには4文字幅以上のインデントが推奨されることがよくありますが、XMLは多くの場合それよりも少なく管理されます。また、仮想フォーマットでは、配置の問題のリスクがないため、使用するインデントを少なくすることができます

2つのビューの比較を以下に示します。

上記に基づいて、ビュースタイルの選択は、画面の不動産以外の要因に基づいていると結論付けるのがおそらく公平です。1つの例外は、たとえばNetbook / Tabletや複数のコードウィンドウが開いているときなど、画面スペースが限られている場合です。これらの場合、サイズ変更可能なNestViewが明確な勝者のようです。

ユースケース

NestViewが便利なオプションである可能性のある実際の例の例：

1. 画面の不動産が重要な場合

   a。タブレット、メモ帳、スマートフォンなどのデバイス

   b。Webサイトでコードを表示する場合

   c。複数のコードウィンドウをデスクトップに同時に表示する必要がある場合

2. コード内のテキストの一貫した空白インデントが優先される場合

3. 深くネストされたコードのレビュー用。たとえば、サブ言語（たとえば、C＃のLinqまたはXSLTのXPath）が高レベルのネストを引き起こす場合があります。

アクセシビリティ

視覚障害のある人を支援し、環境条件や個人の好みに合わせてサイズ変更と色のオプションを提供する必要があります。

編集したコードと他のシステムとの互換性

NestViewオプションを組み込むソリューションは、理想的には、インポートされたコードから先頭のタブ文字とスペース文字（書式設定の役割のみがあると識別される）を除去できる必要があります。その後、コードを削除すると、左揃えのビューとインデントされたビューの両方でコードをきれいにレンダリングできます。ホワイトスペースを認識しないマージツールや差分ツールなどのシステムに依存している多くのユーザーにとって、これは大きな懸念事項です（完全なショーストッパーではない場合）。

その他の作品：

重複するマークアップの視覚化

2004年以降のWendell Piezによる公開された研究は、重複するマークアップ、特にLMNLの視覚化の問題に取り組んでいます。これには、NestViewの提案と非常によく似たSVGグラフィックスが含まれます。そのため、ここでは承認されています。

視覚的な違いは画像で明確です（下）。重要な機能上の違いは、NestViewはネストされたXMLまたはコードのみを対象としているのに対し、Wendell Piezのグラフィックは重複したネストを表すように設計されていることです。

上記のグラフィックは、 http：//www.piez.org から-親切な許可を得て-複製されました

ソース：

1. Hermenuticマークアップに向けて
2. LMNLへの半分のステップ

ここで自分の質問に答えようとしましたが、これは@jimpのヒートマップのアイデアと、@ Andreaの「XMLに近づける」アイデアを取り入れています。

ヒートマップの色と角度のある線が開始タグと終了タグの間に目を引くのに役立つことを願っています。水平線セパレータを削除すると、開始から終了までの「フロー」が改善されます。ユーザーが要素を使用して選択すると、ヒートマップ内の一致する部分が何らかの方法で強調表示されます。

編集これ を使用することにしました。おそらく、色のユーザーオプションが必要になります。「プロダクション対応」スクリーンショット：

そして、比較のために...代替のインデントされたビュー：

より深くネストされたケースの場合、今すぐ編集 -描画スキルをテストします...

1つのアイデアは、テキストに3Dを追加してみることです。レベルに応じて、フォントサイズを増減します。

たとえば、次のコード：

このようになります：

さまざまなレベルで固定されたテキストサイズの配置が失われるため、使用するのが面倒な場合があります。別のアイデア; 各レベルの彩度を変更します。

それは本当に深いものにどれだけ耐えられるでしょうか？わからない...

私は実際にあなたの側溝の視覚化のアイデアが大好きです。簡単にグループ化できます。これらのアイデアの1つと組み合わせると、見た目がさらに良くなります。;）

少し前に、Cでスコープを示すヒートマップを作成しました。ブレーンストーミングを見るのは楽しいかもしれません。

左揃え：

オリジナルのアイデアを微調整して、正方形からカプセルに切り替えてください。これらのバージョン（元のバージョンを含む）は、表示要素の入れ子から入れ子までを示すものよりも複雑ではないため、読みやすいと思います。ツリー要素は、よりシンプルで直感的な方法で情報を伝えると思います。

左はインデントを直接表示するのに最適ですが、右はネストされた関係を伝えるのに適していると思います。

私のアイデア：

ネストは、ネストに似ています。各レイヤーの横幅はそれほど広くする必要はありません。

アイデアが大好きです。「忙しい」状態を抑えるための私の提案は、正方形ではなくグラデーションを使用することです。行を削減します。極端なインデントのためのおそらく異なる色。

私が持っているものはすべて素晴らしいと思いますが、私の好みには少しむらがあります。

私のコメント：Visual Studio IDEがインデントを行う方法に常に苦労しています。このようなものまたはバリエーションを使用したいと思います。

そのため、行のないリンクと、現在のxml /コードとのインラインを想像してください。

ビジュアライゼーションは編集不可能な（左？）マージンに存在する必要があると述べたので、ビジュアライゼーションをコードの背後に混在させたり、ビハインドしたりすることはできないと思います。

おそらく左の列のヒートマップは、明るい色が深いインデントを示していますか？DOMの深さによって決定される最大インデントに従って、与えられたすべてのスペースを動的に使用する視覚化（インデントのように左から右に移動することを期待）で、マージンを固定サイズにします。

エディター領域に分岐する場合は、ドキュメントの背景として、非常に似たものをお勧めします。影付きの領域は、インデントが有効になっている場合に空白が存在する場所です。この場合、テキストの強調表示とは対照的な、単色の明るい色を使用します。

jGRASPは、マージンに視覚マーカーを使用してこれを行います。

ループを使用していることを認識し、異なるタイプのラインを使用してその内部ループを表します。

既存の編集者がそれをどのように行うかを指摘すると思いました。

悪い考えではありませんが、私のブロックをはっきりと見るために左マージンを参照しなければならないことは、少し面倒になるかもしれません。それは、画面の不動産や、構造が非常に深くなった場合に物事がどのように見えるようになるかについても考えていません。

動機は、ユーザーがインデントに使用している空白文字を「見る」のを支援することなので、空白文字だけを表示できます。

私は、段落マーカーのような特別な視覚的なキャラクターではなく、ハイライトだけを話します。黄色のスペース、緑色のタブ（またはその他）

マージン/ネストの問題については、各ブロックのマージンを移動するだけで済みます。マージンが直線でなければならないということは何もありません。

これは新しいアイデアではないと確信しています。

このようなもの：

括弧を開いて閉じないのはなぜですか？

1. インデントは封じ込めを意味します：（と）はプログラマにとってまさにそれを意味します。
2. （および）はそれぞれ単一の文字です。左のバーは非常に細いままです。
3. 空の要素は簡単に見つけられます。同じ行で（）を使用します。
4. 要素のコンテンツには視覚的な手がかりは必要ありません。空白がはるかに優れています。
5. 右側のカーソル位置は、左側の包含ブロックと一致させることができます：（および）を使用して、列の文字に動的に色を追加します
6. <と>を使用して、よりXML風にすることができます。

Vimは既に似たようなことをすることができますが、それほどきれいではありません。

Vimで「コードの折りたたみ」を行うにはさまざまな方法があります。それらの1つは、構文の折りたたみ規則に基づいています。これが完了すると、ネストされたアウトライン構造を使用してコードを折りたたむことができ、「FoldColumn」を使用して、「foldlevel」のグラフィカルな（実際には「|」および「-」文字を持つ）文字表現を提供できます。

foldcolumnは、foldmethodに関係なくネスト表現を提供できますが、構文ベースの方法は、おそらくあなたが望むものに適しているでしょう。どこかにxmlの構文ベースの折りたたみ規則が事前に作成されているかどうかはわかりませんが、おそらくあると思います。

私はあなたがオプションBとCで正しい軌道に乗っていると思う：幅とヒートマップの色付けの両方を含める。現時点ではオプションBがCよりも好きです。それは、Cの中央にある非常に重いブロックではなく、邪魔にならないためです（Cの中央にある非常に重いブロックではなく、幅が狭く希釈されるか、狭くて強い）どこかにレベルを挿入した場合、グラフ全体を再構築します。ブロックをもっと小さくすることができると思います。おそらく1または2ピクセルで十分でしょう。それほど大きくなくてもかまいません。区別できるだけです。特に、人々が何度もエディターを使用することが予想される場合、控えめで微妙なエフェクトは、あまり注意をそらさないため、扱いやすくなります。

ある種のエディターを使用する場合に重要なことの1つは、現在のスコープを強調表示することです。エディターで行を選択するとき、含まれている要素と停止する場所を正確に確認する必要があります。ツリーを強調表示することもできます（どの要素の子ですか）。これは別の問題であり、対処と検討が必要であり、ユーザーがエディターでの体験をどのように評価するかにより大きな影響を与えると思います。

私が言及していないことの1つは、あなたが落ち着いたように見える彩度効果の上に色相で何ができるかです。私の提案は、ポインターが置かれている巣の色を変更することです。これにより、ユーザーは、どの行がネストの一部であるかを区別しやすくなります。

色相ベースのものを実装するときは、色覚異常を意識し、普遍的に区別できる色を選択するか、人々が選択できるいくつかのオプションを提供してください。

これまでの他の提案と組み合わせて使用​​できる1つのオプションは、XPath表記を使用して行へのパスを示す左マージンにツールチップを使用することです。ブラウザの「要素を検査する」ツール（Chromeに組み込まれているFirebugなど）は、多くの場合、ステータスバーで同様の処理を行います。

おそらく、元の投稿のヒートマップを1列の色と深さの数値で折りたたんだビューにすることができます。これにより、ユーザーは自分がどのくらいの深さであるかを知ることができ、xmlの画面領域を増やすことができます。私にとっては勝利のようです。

物を深く入れ子にするのに十分な色の違いがあるかどうか心配です。