🌈

私が考えた最強のVS Code虹色設定 〜もう迷わない！インデントと括弧のカラーリング完全版〜

に公開
VS Code
VS Code 拡張機能
extension
Cursor
tech

はじめに

VS CodeやCursorでコーディング中、「今どの階層にいるんだっけ？」「この括弧どこまで続いてるの？」「このスコープの範囲はどこまで？」と迷った経験はありませんか？
そんな悩みを一瞬で解決する、インデントと括弧を虹色に彩り、コードのスコープを視覚化する最強の設定を公開します！（今更？いや、今だからこそ！）

この記事では、拡張機能「indent-rainbow」と、VS Code組み込みの括弧ペアカラーリング機能を組み合わせた、ライト系テーマ/ダーク系テーマ両対応の、視認性抜群のカラー設定を紹介します。

チームのオンボーディングやプロジェクトセットアップ時に活用していただけたら嬉しいです。☺️

🎨 完成イメージ！

設定適用後のイメージ
インデントと括弧が美しく色分けされ、コードの構造が一目瞭然に！

設定ファイル

プロジェクトルートの .vscode/settings.json に設定を記述します。

カスタマイズのポイント

デフォルトの色設定だと、使用しているテーマによっては背景色と同化して見づらかったり、逆に目立ちすぎたりすることがあります。
特に、ライトテーマでは黄色が見えにくく、純粋な赤はエラー表示と混同しやすいという問題があります。

この設定では、以下の点に配慮した最強のカラーパレットを採用しています：

  • ✅ インデントと括弧の色を完全同期：視覚的な統一感
  • ✅ エラーと混同しない色：純粋な赤は使用しない
  • ✅ 背景に合わせた視認性：ライトテーマは濃いめ、ダークテーマは明るめ
  • ✅ 6色の虹色グラデーション：深いネストも一目瞭然

表示スタイルの調整（帯状から線へ）

デフォルトの設定では、インデントの空白部分全体が帯状に色付けされます。
これだと色が主張しすぎてしまい、コードが見づらくなる（目障りに感じる）ことがあります。

帯状の表示例
デフォルトの帯状表示は色が主張しすぎてしまう

そこで、以下の設定を行うことで、帯状の塗りつぶしではなく、細い線（インジケーター）として表示させ、すっきりとした見た目に変更しています。

"indentRainbow.indicatorStyle": "light", // 帯状ではなく線にする
"indentRainbow.lightIndicatorStyleLineWidth": 1, // 線の太さを1pxにする
"editor.guides.indentation": false, // VS Code標準のガイドを無効化

テーマ別カラー設定

ライトテーマ（ベージュ系・白系）向け 🌞

淡いベージュや白い背景に対して、やや濃いめで鮮やかな色を設定することで視認性を確保します。
黄色は避け、橙・ピンク・深緑・青・紫・マゼンタの6色で虹色を表現しています。

インデントの色設定：

// Light Theme Colors
"indentRainbow.colors": [
    "rgba(255, 127, 0, 0.6)",   // 橙
    "rgba(255, 0, 127, 0.6)",   // ピンク
    "rgba(0, 150, 100, 0.6)",   // 深緑
    "rgba(0, 127, 255, 0.6)",   // 青
    "rgba(127, 0, 255, 0.6)",   // 紫
    "rgba(200, 0, 200, 0.6)"    // マゼンタ
]

対応する括弧の色：

"workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#FF7F00", // 橙
    "editorBracketHighlight.foreground2": "#FF007F", // ピンク
    "editorBracketHighlight.foreground3": "#009664", // 深緑
    "editorBracketHighlight.foreground4": "#007FFF", // 青
    "editorBracketHighlight.foreground5": "#7F00FF", // 紫
    "editorBracketHighlight.foreground6": "#C800C8"  // マゼンタ
}

実際の表示例：
ライトテーマの表示
ライトテーマでは濃いめの色で視認性を確保

ダークテーマ向け 🌙

黒や暗めのブルー・パープル・グレーの背景に対して、明るく目に優しい色を設定します。
蛍光色に近い明るさで、長時間のコーディングでも疲れにくい配色にしています。

// Dark Theme Colors
"indentRainbow.colors": [
    "rgba(255, 179, 64, 0.7)",   // 明るい橙
    "rgba(64, 224, 208, 0.7)",   // シアン
    "rgba(127, 255, 0, 0.7)",    // ライム
    "rgba(135, 206, 250, 0.7)",  // スカイブルー
    "rgba(200, 162, 255, 0.7)",  // ラベンダー
    "rgba(255, 105, 180, 0.7)"   // ピンク
]

対応する括弧の色：

"workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#FFB340", // 明るい橙
    "editorBracketHighlight.foreground2": "#40E0D0", // シアン
    "editorBracketHighlight.foreground3": "#7FFF00", // ライム
    "editorBracketHighlight.foreground4": "#87CEFA", // スカイブルー
    "editorBracketHighlight.foreground5": "#C8A2FF", // ラベンダー
    "editorBracketHighlight.foreground6": "#FF69B4"  // ピンク
}

実際の表示例：
ダークテーマの表示
ダークテーマでは明るめの色で見やすく、目に優しい？かもです。

🎨 完全版設定（コピペ用）

以下は、ライトテーマをデフォルトとし、ダークテーマ用の設定をコメントアウトして残しておく設定例です。
テーマ変更時にコメントアウトを切り替えるだけで、最適な配色に即座に変更できます！

インデントの色設定：

{
    // Indent Rainbow設定
    "indentRainbow.indicatorStyle": "light",
    "indentRainbow.lightIndicatorStyleLineWidth": 1,
    "editor.guides.indentation": false,

    // Light Theme Colors (Active) 🌞
    "indentRainbow.colors": [
        "rgba(255, 127, 0, 0.6)",   // 橙
        "rgba(255, 0, 127, 0.6)",   // ピンク
        "rgba(0, 150, 100, 0.6)",   // 深緑
        "rgba(0, 127, 255, 0.6)",   // 青
        "rgba(127, 0, 255, 0.6)",   // 紫
        "rgba(200, 0, 200, 0.6)"    // マゼンタ
    ],

    // Dark Theme Colors (Uncomment to use) 🌙
    // "indentRainbow.colors": [
    //     "rgba(255, 179, 64, 0.7)",   // 明るい橙
    //     "rgba(64, 224, 208, 0.7)",   // シアン
    //     "rgba(127, 255, 0, 0.7)",    // ライム
    //     "rgba(135, 206, 250, 0.7)",  // スカイブルー
    //     "rgba(200, 162, 255, 0.7)",  // ラベンダー
    //     "rgba(255, 105, 180, 0.7)"   // ピンク
    // ],

    // Bracket Pair Colorization
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",

    // Light Theme Bracket Colors (Active) 🌞
    "workbench.colorCustomizations": {
        "editorBracketHighlight.foreground1": "#FF7F00", // 橙
        "editorBracketHighlight.foreground2": "#FF007F", // ピンク
        "editorBracketHighlight.foreground3": "#009664", // 深緑
        "editorBracketHighlight.foreground4": "#007FFF", // 青
        "editorBracketHighlight.foreground5": "#7F00FF", // 紫
        "editorBracketHighlight.foreground6": "#C800C8"  // マゼンタ
    }

    // Dark Theme Bracket Colors (Uncomment to use) 🌙
    // "workbench.colorCustomizations": {
    //     "editorBracketHighlight.foreground1": "#FFB340", // 明るい橙
    //     "editorBracketHighlight.foreground2": "#40E0D0", // シアン
    //     "editorBracketHighlight.foreground3": "#7FFF00", // ライム
    //     "editorBracketHighlight.foreground4": "#87CEFA", // スカイブルー
    //     "editorBracketHighlight.foreground5": "#C8A2FF", // ラベンダー
    //     "editorBracketHighlight.foreground6": "#FF69B4"  // ピンク
    // }
}

🌈 括弧のペアカラーリング（最強の組み合わせ）

VS Code 1.60以降、組み込みの括弧ペアカラーリング機能が追加されました。indent-rainbowと組み合わせることで、インデントと括弧の両方が同じ色で色分けされ、コードの構造とスコープが驚くほど把握しやすくなります。

重要なポイント： インデントの色と括弧の色を完全に同期させることで、視覚的な統一感が生まれ、各スコープの範囲やネストの深さを瞬時に理解できるようになります！

📸 スコープ可視化の実例

🔲 カーソルがスコープ外にある時：
スコープ外
通常時は、インデントと括弧がそれぞれの階層に応じた色で表示されます。

✨ カーソルがスコープ内にある時：
スコープ内
カーソルがスコープ内に入ると、対応する括弧とインデントがハイライトされ、現在どのスコープにいるかが一目で分かります！

基本設定

括弧に色をつけるには、editor.bracketPairColorization.enabled を true に設定します。

"editor.bracketPairColorization.enabled": true

カーソル位置のガイド表示

editor.guides.bracketPairs を "active" に設定すると、カーソルがどの括弧の中にいるか、つまり現在どのスコープにいるかが視覚的に表示されます。これにより、深くネストされたコードでも現在の位置を見失いません。

"editor.guides.bracketPairs": "active"

カスタムカラー設定（インデントと同期）

重要： 括弧の色は、インデントの色と完全に同期させます。これにより、視覚的な統一感が生まれ、コードの階層構造が一目で分かるようになります。

上記のテーマ別カラー設定の項目で、インデントと括弧の色が対応していることを確認してください。
カラーコードの変換式：rgba(R, G, B, A) → #RRGGBB

注意: VS Codeの仕様上、括弧のカラーは最大6色までです。

⚙️ テーマ切り替え方法

ライトテーマとダークテーマを切り替えるには、.vscode/settings.json内のコメントを切り替えるだけです。

ライトテーマ → ダークテーマに変更する手順

  1. ライトテーマのインデント設定をコメントアウト：
// "indentRainbow.colors": [
//     "rgba(255, 127, 0, 0.6)",   // 橙
//     ...（省略）
// ],
  1. ダークテーマのインデント設定のコメントを外す：
"indentRainbow.colors": [
    "rgba(255, 179, 64, 0.7)",   // 明るい橙
    ...（省略）
],
  1. 括弧の色も同様に切り替え：
    ライトテーマのworkbench.colorCustomizationsをコメントアウトし、ダークテーマの設定を有効化します。

注意： workbench.colorCustomizationsは1つしか有効にできないため、必ず片方をコメントアウトしてください。

✨ まとめ

この設定により、以下のメリットが得られます：

✅ 視認性抜群： 背景色に最適化された配色で、どんなテーマでも見やすい
✅ エラーと混同しない： 純粋な赤を避け、誤認を防止
✅ 統一感： インデントと括弧が同じ色で同期、美しい視覚体験
✅ スコープが一目瞭然： 6色の虹色で各スコープの範囲と階層を瞬時に把握
✅ 深いネストも怖くない： 複雑な構造でも現在地を見失わない

この設定で、あなたのコーディング体験が劇的に向上すること間違いなし！ 🚀

ぜひ試してみて、快適なコーディングライフを楽しんでください！

💬 あなたが考える最強の設定も教えてください！

この記事では私が考えた最強の設定を紹介しましたが、カラーリングの好みは人それぞれ。
「自分はこんな配色が見やすい！」「こういう工夫をしてる！」という設定があれば、ぜひコメントで共有してください！

みんなで最高のVS Code環境を作り上げていきましょう！ 🌈✨

Discussion