【VSCode】拡張機能を使わずにインデントを色分けする方法

VSCodeの拡張機能「Indent-Rainbow」を使わずにインデントを色分けする方法を解説します。

VSCode標準機能でインデントの色分け
設定方法
関連ページ

VSCode標準機能でインデントの色分け

VSCodeには、インデントの深さに応じて色分けしてくれる「Indent-Rainbow」という拡張機能があります。PythonやYAMLなど、インデントが構造に直結する言語で重宝します（詳細は以下ページ参照）。

VSCodeの拡張機能「Indent-Rainbow」で、PythonやYAMLなどのコードをインデントの深さに応じて色分けする方法を解説します。

VSCode v1.81以降では、標準機能「workbench.colorCustomizations」だけで、インデントの深さに応じた色分けが可能になり、拡張機能「Indent-Rainbow」と似た表示ができるようになりました。

今回は、標準機能だけでインデントを色分けする方法を解説します。

設定方法

① ショートカット「Ctrl + Shift + P」でコマンドパレットを表示し、以下を入力してEnterを押します。
※Macは「Cmd + Shift + P」

Preferences: Open User Settings (JSON)

② 以下をsettings.jsonに追加します。

    "workbench.colorCustomizations": {
        "editorIndentGuide.background1": "#b51616",
        "editorIndentGuide.background2": "#ff4400",
        "editorIndentGuide.background3": "#ffd900",
        "editorIndentGuide.background4": "#0da50d",
        "editorIndentGuide.background5": "#0b0bb2",
        "editorIndentGuide.background6": "#9a0e9a",
        "editorIndentGuide.activeBackground1": "#fff",
        "editorIndentGuide.activeBackground2": "#fff",
        "editorIndentGuide.activeBackground3": "#fff",
        "editorIndentGuide.activeBackground4": "#fff",
        "editorIndentGuide.activeBackground5": "#fff",
        "editorIndentGuide.activeBackground6": "#fff"
    }

【上記コードの説明】

キー名	カラーコード	表示色	説明
`editorIndentGuide.background1`	`#b51616`	深紅色	最初のインデントガイドの背景色
`editorIndentGuide.background2`	`#ff4400`	オレンジレッド	2番目のインデントガイドの背景色
`editorIndentGuide.background3`	`#ffd900`	ゴールド	3番目のインデントガイドの背景色
`editorIndentGuide.background4`	`#228b22`	フォレストグリーン	4番目のインデントガイドの背景色
`editorIndentGuide.background5`	`#0da50d`	ネイビーブルー	5番目のインデントガイドの背景色
`editorIndentGuide.background6`	`#9a0e9a`	ダークマゼンタ	6番目のインデントガイドの背景色

③ Pythonプログラムを開き、インデントの深さに応じて色分け表示されていたら成功です。
なお、上記のように6色まで設定でき、指定した個数以上のインデントの深さがある場合、指定した色がループします。

その他、使い方の詳細は以下ページで解説しています。

VSCode標準機能でインデントの色分け

設定方法

関連ページ

コメント