VSCodeの拡張機能「Indent-Rainbow」で、PythonやYAMLなどのコードをインデントの深さに応じて色分けする方法を解説します。
拡張機能「Indent-Rainbow」とは？
VSCodeの拡張機能「Indent-Rainbow」は、インデントの深さに応じて色分けしてくれるツールです。PythonやYAMLなど、インデントが構造に直結する言語で重宝します。
今回は、「Indent-Rainbow」の導入方法と基本的な使い方を解説します。
導入方法
① Visual Studio Code を起動します。
② 左側の 拡張機能アイコン（四角が4つ） をクリックします。
③ 検索バーに「Indent-Rainbow」と入力します。
④ 「Indent-Rainbow」を選んで [インストール] をクリックします。
※作者が「oderwat」のもの
基本的な使い方
インストール後は自動で色分けが有効になります。インデントの深さに応じて、虹色のガイドラインが表示されます。
カスタマイズ方法
色や表示スタイルは設定ファイルで（settings.json）で自由に変更できます。
① ショートカット「Ctrl + Shift + P」でコマンドパレットを表示し、以下を入力してEnterを押します。
※Macは「Cmd + Shift + P」
Preferences: Open User Settings (JSON)
② 以下をsettings.jsonに追加します。
"indentRainbow.colors": [
"rgba(255,255,64,0.07)",
"rgba(127,255,127,0.07)",
"rgba(255,127,255,0.07)",
"rgba(79,236,236,0.07)"
],
"indentRainbow.indicatorStyle": "light",
"indentRainbow.lightIndicatorStyleLineWidth": 1
colors: インデントごとの色（RGBAで透明度も調整可能）indicatorStyle:"light"にするとライン表示にlightIndicatorStyleLineWidth: ラインの太さを指定
【補足】最新のVSCodeでは、標準機能でもインデントの色分けが可能
VSCode v1.81以降では、標準機能でインデントガイドの色分けが可能になり、拡張機能なしでも似た表示ができます。workbench.colorCustomizations を使えば、より細かく色を設定できます。
① ショートカット「Ctrl + Shift + P」でコマンドパレットを表示し、以下を入力してEnterを押します。
※Macは「Cmd + Shift + P」
Preferences: Open User Settings (JSON)
② 以下をsettings.jsonに追加します。
"workbench.colorCustomizations": {
"editorIndentGuide.background1": "#b22222",
"editorIndentGuide.background2": "#ff4500",
"editorIndentGuide.background3": "#ffd700",
"editorIndentGuide.background4": "#228b22",
"editorIndentGuide.background5": "#000080",
"editorIndentGuide.background6": "#8b008b"
}
関連ページ
コメント