CursorやVS Codeで、インデントのガイドラインをアクティブなガイドラインだけ表示させる方法

CursorやVS Codeのエディタで、インデントのガイドラインをアクティブなガイドラインだけハイライト表示させる方法を紹介します。

通常（左）はその箇所を含むすべてのインデントのガイドラインが表示されますが、右のようにアクティブなガイドラインだけを表示できるようになります。

参考: VS Code – highlight just the active indent guide

• インデントのガイドラインを表示させる方法
• アクティブなガイドラインだけ表示させる方法

インデントのガイドラインを表示させる方法

まずは、インデントのガイドラインを表示させる方法から。
CursorもVS Codeもデフォルトではガイドラインをホバーで表示するになっていますが、一応。

設定を変更する方法はCursorとVS Codeは同じ。歯車アイコンをクリックして「設定」を開く、または右上のアイコンをクリックして「setting.json」を開きます。

• 「設定」から「ワークベンチ > 外観 > Tree」の「Render Indent Guides」を「onHover」または「Always」にします。規定値は「onHover」です。
• 「setting.json」に「"workbench.tree.renderIndentGuides": "onhover",」を記述します。

これで、インデントのガイドラインが表示されました。
通常は下記のようにアクティブなインデントを含むすべてのインデントのガイドラインが表示されます。

インデントのガイドラインを表示

アクティブなガイドラインだけ表示させる方法

アクティブなガイドラインだけハイライト表示させる方法です。
アイデアは、非アクティブな線を透明にすることでアクティブな線だけが表示されるようにします。

しかし、上記だとガイドラインがすべて透明になってしまいます。
そこで不透明度をすこし加えると、うまくいきます。

これで下記のようにアクティブなガイドラインだけがハイライト表示されます。

アクティブなガイドラインだけがハイライト表示

もちろん、アクティブな箇所を変更すると、ガイドラインのハイライトも移動します。

アクティブなガイドラインだけがハイライト表示

これまでのキャプチャはVS Codeでしたが、Cursorでも同様にアクティブなガイドラインだけをハイライト表示にできます。まずは、デフォルトのインデントのガイドラインを表示。

インデントのガイドラインを表示（Cursor）

setting.jsonに前述の設定を加えると、アクティブなガイドラインだけをハイライト表示します。

アクティブなガイドラインだけがハイライト表示（Cursor）