14
コードエディタは、インデントを使用せずに、コードのネストレベルを効果的に示唆できますか？[閉まっている]
同じXMLテキストに2つの表示オプションを提供するXMLテキストエディターを作成しました。1つはインデント（仮想）、もう1つは左揃えです。左寄せビューの動機は、XMLコンテキストの自動化された副作用であるインデントの干渉なしに、ユーザーがプレーンテキストまたはXPathコードのインデントに使用している空白文字を「見る」のを支援することです。 私は、ユーザーを支援する左寄せモードの視覚的な手がかりを（エディターの編集不可部分で）提供したいと思いますが、あまり複雑になりません。 接続線だけを使用してみましたが、それは忙しすぎるようでした。私がこれまでに思いついた最高のものは、下のエディターのモックアップされたスクリーンショットに示されていますが、私はより良い/より簡単な代替手段を探しています（コードをあまり必要としません）。 [編集] ヒートマップのアイデア（@jimpから）を取得すると、これと3つの選択肢が得られます-a、b、cというラベルが付けられています。 次のセクションでは、受け入れられた回答を提案として説明し、他の多くの回答やコメントからアイデアを集めます。この質問は現在コミュニティwikiであるため、お気軽に更新してください。 NestView インデントを使用せずにネストされたコードの可読性を向上させる視覚的な方法を提供するこのアイデアの名前。 等高線 NestView内の異なる影付きの線の名前 上の画像は、XMLスニペットを視覚化するために使用されるNestViewを示しています。この図ではXMLを使用していますが、この図ではネストを使用する他のコード構文も使用できます。 概要： 等高線は、ネストレベルを伝えるために（ヒートマップのように）シェーディングされています 等高線は、ネストレベルが開いているか閉じているかを示すために角度が付けられています。 等高線は、ネストレベルの開始点を対応する終了点にリンクします。 等高線の幅を組み合わせることで、ヒートマップに加えて、ネストレベルの視覚的な印象が得られます。 NestViewの幅は手動でサイズ変更できますが、コードが変更されても変更しないでください。これを維持するために、輪郭線を圧縮または切り捨てることができます。 空白行は、テキストをより消化しやすい塊に分割するためにコードを使用する場合があります。このような行は、NestViewで特別な動作をトリガーする可能性があります。たとえば、ヒートマップをリセットしたり、背景色の等高線を使用したり、あるいはその両方を行うことができます。 現在選択されているコードに関連付けられている1つ以上の等高線を強調表示できます。選択したコードレベルに関連付けられた等高線が最も強調されますが、ネストされたグループを強調表示するのに役立つ他の等高線も「点灯」できます。 さまざまな動作（コードの折り畳みやコードの選択など）を、等高線のクリック/ダブルクリックに関連付けることができます。 等高線の異なる部分（リーディングエッジ、ミドルエッジ、またはトレーリングエッジ）には、異なる動的な動作が関連付けられている場合があります。 等高線上のマウスホバーイベントでツールチップを表示できます。 NestViewは、コードが編集されると継続的に更新されます。ネスティングのバランスが取れていない場合、ネスティングレベルが終了する場所を想定できますが、関連する一時的な等高線は警告として何らかの方法で強調表示する必要があります。 等高線のドラッグアンドドロップ動作をサポートできます。動作は、ドラッグされる等高線の部分によって異なる場合があります。 エラーや状態の変更のための行番号付けや色の強調表示など、一般的に左マージンにある機能は、NestViewにオーバーレイする可能性があります。 追加機能 この提案はさまざまな追加の問題に対処します。多くは元の質問の範囲外ですが、有用な副作用です。 ネストされた領域の開始と終了を視覚的にリンクする 等高線は、ネストされた各レベルの開始点と終了点を接続します 現在選択されている行のコンテキストを強調表示する コードが選択されると、NestViewの関連するネストレベルを強調表示できます。 同じネストレベルでコード領域を区別する XMLの場合、異なる名前空間に異なる色相を使用できます。プログラミング言語（c＃など）は、同様の方法で使用できる名前付き領域をサポートします。 ネスト領域内の領域を異なる視覚ブロックに分割する 読みやすくするために、コードに余分な行が挿入されることがよくあります。このような空のラインは、NestViewの等高線の彩度レベルをリセットするために使用できます。 複数列のコードビュー インデントなしのコードは、ワードラップまたは水平スクロールが必要になる可能性が低いため、複数列ビューの使用をより効果的にします。このビューでは、コードが1つの列の下部に到達すると、次の列に流れます。 視覚的な補助を提供するだけではありません 概要で提案されているように、NestView は、TreeViewコントロールに期待されるものとほぼ一致する幅広い編集および選択機能を提供できます。主な違いは、一般的なTreeViewノードには、エキスパンダーとノードアイコンの2つの部分があることです。NestViewの輪郭線には、オープナー（傾斜）、コネクタ（垂直）、およびクローズ（傾斜）の3つの部分があります。 インデントについて NestViewは、インデントされていないコードを補完しますが、従来のインデントされたコードビューを置き換えることはほとんどありません。 NestViewを採用するソリューションは、空白文字を含むコードテキスト自体に影響を与えることなく、インデントされたコードビューとインデントされていないコードビューをシームレスに切り替える方法を提供する可能性があります。インデントビューのテクニックの1つは「仮想フォーマット」です。タブまたはスペース文字の代わりに動的な左マージンが使用されます。NestViewを動的にレンダリングするために使用される同じネストレベルのデータは、より従来型のインデントビューにも使用できます。 印刷 インデントは、印刷されたコードを読みやすくするために重要です。ここでは、タブ/スペース文字と動的な左マージンがないため、テキストは右マージンで折り返されても、インデントされたビューの整合性が維持されます。行番号は、コードがワードラップされる場所とインデントの正確な位置を示す視覚的なマーカーとして使用できます。 画面の不動産：フラット対インデント NestViewが貴重な画面の不動産を使用するかどうかの質問に対処します。 等高線は、コードエディターの文字幅と同じ幅でうまく機能します。したがって、12文字幅のNestView幅は、等高線が切り捨て/圧縮される前に12レベルのネストに対応できます。 インデントビューが各ネストレベルに3文字幅を使用する場合、ネストが4レベルのネストに達するまでスペースが節約されます。このネストレベルの後、フラットビューには、各ネストレベルで増加するスペース節約の利点があります。 注：コードには4文字幅以上のインデントが推奨されることがよくありますが、XMLは多くの場合それよりも少なく管理されます。また、仮想フォーマットでは、配置の問題のリスクがないため、使用するインデントを少なくすることができます …