VS Codeのindent-rainbowは不要になりました！

こんにちは、GxPの土田です。
この記事はグロースエクスパートナーズ Advent Calendar 2023の5日目です。
あっさりめの記事なので前置きはほどほどに早速本題です。対戦よろしくお願いします。

indent-rainbow

VS Codeでインデントをわかりやすく色分けしてくれる拡張機能の indent-rainbow 、
使っている方も多いのではないでしょうか。

長年感じていた不満なのですが、この拡張機能はインデント（空白文字）を判定して色を付けているだけなので、↓のように「同じブロック内だが、空改行を入れた行」でハイライトが途切れてしまいます。

空白を残せばハイライトされますが、大体のフォーマッタは空行に空白を入れると勝手に消してしまいます。

そこで、indent-rainbowを使わなくても色を付けて見やすくできる、かつ↑の問題点も解消できる機能があるので紹介します！

前提

かなり最近追加されたオプションなので、July 2023 (version 1.81) 以上が前提となります。

やり方

settings.jsonを開く（参考：VS Codeのsettings.jsonの開き方）。

↓を追記する。

settings.json

"workbench.colorCustomizations": {
    "editorIndentGuide.background1": "#b22222",
    "editorIndentGuide.background2": "#ff4500",
    "editorIndentGuide.background3": "#ffd700",
    "editorIndentGuide.background4": "#228b22",
    "editorIndentGuide.background5": "#000080",
    "editorIndentGuide.background6": "#8b008b",
    "editorIndentGuide.activeBackground1": "#fff",
    "editorIndentGuide.activeBackground2": "#fff",
    "editorIndentGuide.activeBackground3": "#fff",
    "editorIndentGuide.activeBackground4": "#fff",
    "editorIndentGuide.activeBackground5": "#fff",
    "editorIndentGuide.activeBackground6": "#fff"
}

↑の色は私が使っている虹色のパターンです。

これを指定すると↓のような感じでブロックごとにハイライトされるようになります。

ちゃんと空改行でも途切れてない、、！

ちょっと詳しく

6色まで設定できます。指定した個数以上のインデントレベルは指定した色がループします。

editorIndentGuide.background がラインの色、
editorIndentGuide.activeBackground がカーソルがあるブロックのラインの色です。

editorIndentGuide.background と editorIndentGuide.activeBackground はセットで指定する必要があります。

v1.81より前のバージョンの場合、

settings.json

"workbench.colorCustomizations": {
    "editorIndentGuide.background": "#f00",
    "editorIndentGuide.activeBackground": "#fff"
}

のように一色しか指定できません。

他にも、、

今回指定した workbench.colorCustomizations ですが、他にもたくさんの色を指定できます。
↓ Ctrl + Space で候補表示。

おそらくVS Code上でデフォルトで配色されているものであればなんでも色を変えられます。
（拡張機能での配色は workbench.colorCustomizations では設定できません）

最後に

この機能、本当に読みやすくなるのでぜひ使ってみてください。
色んな配色をいじって自分好みのVS Codeにするのも楽しいので、カスタマイズしたいものを探してみてはいかがでしょう。