【サンプルコードあり】Visual Studio Codeでコードに色をつけるには（MacBook）

VSCode（Visual Studio Code）とはMicrosoft社が提供するコードエディターです。
無料で、様々な拡張機能があることで使い勝手が良く、業務でもよく使用しています。

特別設定をしなくても、使いやすいエディターではありますが、
配色を変えると自分好みの配色に変えることができます。

配色の変え方①
配色の変え方②
- settings.json の場所
- settings.json
  - エディタの特定要素の配色変更
  - シンタックス（構文）の色設定
まとめ

配色の変え方①

初めに紹介するのは、テーマを変更することで簡単に配色を変える方法です。

「Code」メニューの中にある「基本設定」にカーソルを当てて、表示されたサブメニューの中から「テーマ」にカーソルを持っていき、「配色テーマ」をクリックしてください。

「配色テーマの選択」画面が表示されます。その中から好きなテーマを選んでクリックしてください。今回は、試しにライトモダンにしてみました。

色を変えることができました！

配色の変え方②

次は、完全に自分好みの色にカスタマイズする方法です。
ワークスペース設定の settings.json を変えることで、色を変更することが可能です。

settings.json の場所

Code ＞基本設定＞設定をクリックします。

設定の中からフォントを見ると、settings.jsonで編集をクリックすることができます。

下記のファイルが開けたら、中に書き込んでいきます。

settings.json

詳しくみたい方は、下記をご覧ください。

Theme Color

Theme Color reference that lists all themable colors in Visual Studio Code.

説明を見るのも大変だと思いますので、いくつか下記にまとめてみました。
自分好みに変更してみてください。

エディタの特定要素の配色変更

細かく配色を変更したい場合、workbench.colorCustomizations を使います。

"workbench.colorCustomizations": {
    // **エディタ背景・前景**
    "editor.background": "#1e1e1e", // エディタの背景色（ダークグレー）
    "editor.foreground": "#ffffff", // エディタの文字色（白）

    // **カーソル**
    "editorCursor.foreground": "#ffcc00", // カーソルの色（黄色）
    
    // **行の強調表示**
    "editor.lineHighlightBackground": "#333333", // 現在の行の背景色
    "editor.lineHighlightBorder": "#ff0000", // 強調行の枠線（赤）

    // **選択範囲**
    "editor.selectionBackground": "#264f78", // 選択範囲の背景色（青）
    "editor.selectionHighlightBackground": "#5588ff88", // 選択した単語と一致する部分の背景色

    // **検索結果のハイライト**
    "editor.findMatchBackground": "#ffcc00aa", // 検索結果の背景色
    "editor.findMatchBorder": "#ffcc00", // 検索結果の枠線
    "editor.findMatchHighlightBackground": "#ff880088", // 他の一致する単語の背景色

    // **行番号**
    "editor.lineNumber.foreground": "#858585", // 行番号の色
    "editorGutter.background": "#252526", // 行番号エリアの背景色
    "editorLineNumber.activeForeground": "#ffffff", // 現在の行の行番号の色

    // **スクロールバー**
    "scrollbar.shadow": "#000000", // スクロールバーの影
    "scrollbarSlider.background": "#88888855", // スクロールバーの色
    "scrollbarSlider.hoverBackground": "#88888888", // ホバー時のスクロールバーの色
    "scrollbarSlider.activeBackground": "#888888aa", // クリック時のスクロールバーの色

    // **タブの色**
    "tab.activeBackground": "#3c3c3c", // アクティブなタブの背景色
    "tab.inactiveBackground": "#252526", // 非アクティブなタブの背景色
    "tab.activeForeground": "#ffffff", // アクティブなタブの文字色
    "tab.inactiveForeground": "#888888", // 非アクティブなタブの文字色

    // **ステータスバー**
    "statusBar.background": "#007acc", // ステータスバーの背景色（青）
    "statusBar.foreground": "#ffffff", // ステータスバーの文字色
    "statusBar.debuggingBackground": "#cc0000", // デバッグ中の背景色
    "statusBar.noFolderBackground": "#333333" // フォルダを開いていない時の背景色
}

シンタックス（構文）の色設定

editor.tokenColorCustomizations を使うと、特定の構文要素の色を変更できます。

"editor.tokenColorCustomizations": {
    "comments": "#6a9955",  // コメント（緑）
    "strings": "#ce9178",  // 文字列（オレンジ）
    "keywords": "#569cd6",  // キーワード（青）
    "functions": "#dcdcaa",  // 関数名（黄色）
    "variables": "#9cdcfe",  // 変数（ライトブルー）
    "numbers": "#b5cea8",  // 数値（薄緑）
    "types": "#4ec9b0",  // 型（ターコイズ）
    "operators": "#d4d4d4",  // 演算子（白）
    "propertyNames": "#9cdcfe", // オブジェクトのプロパティ名（ライトブルー）
    "interfaces": "#c586c0",  // インターフェース（紫）
    "enumMembers": "#4ec9b0",  // Enum メンバー（ターコイズ）
    "namespace": "#b267e6",  // 名前空間（紫）
    "class": "#f4a261",  // クラス（オレンジ）
    "module": "#e6db74",  // モジュール（黄色）

    // **特定の言語のカスタマイズ**
    "textMateRules": [
        {
            "scope": "entity.name.function",
            "settings": { "foreground": "#ffcc66" } // 関数名
        },
        {
            "scope": "entity.name.type",
            "settings": { "foreground": "#4ec9b0" } // 型
        },
        {
            "scope": "keyword.operator",
            "settings": { "foreground": "#d4d4d4" } // 演算子
        },
        {
            "scope": "variable.language",
            "settings": { "foreground": "#9cdcfe" } // 言語固有の変数（this, selfなど）
        },
        {
            "scope": "storage.type",
            "settings": { "foreground": "#569cd6" } // ストレージ型
        },
        {
            "scope": "constant.numeric",
            "settings": { "foreground": "#b5cea8" } // 数値
        },
        {
            "scope": "string.quoted",
            "settings": { "foreground": "#ce9178" } // 文字列
        },
        {
            "scope": "comment",
            "settings": { "foreground": "#6a9955", "fontStyle": "italic" } // コメント
        },
        {
            "scope": "punctuation.definition.string",
            "settings": { "foreground": "#ffcc00" } // 文字列の囲み記号
        }
    ]
}