VSCode（Visual Studio Code）とはMicrosoft社が提供するコードエディターです。
無料で、様々な拡張機能があることで使い勝手が良く、業務でもよく使用しています。
特別設定をしなくても、使いやすいエディターではありますが、
配色を変えると自分好みの配色に変えることができます。
配色の変え方①
初めに紹介するのは、テーマを変更することで簡単に配色を変える方法です。
「Code」メニューの中にある「基本設定」にカーソルを当てて、表示されたサブメニューの中から「テーマ」にカーソルを持っていき、「配色テーマ」をクリックしてください。
「配色テーマの選択」画面が表示されます。その中から好きなテーマを選んでクリックしてください。今回は、試しにライト モダンにしてみました。
色を変えることができました！
配色の変え方②
次は、完全に自分好みの色にカスタマイズする方法です。
ワークスペース設定の settings.json を変えることで、色を変更することが可能です。
settings.json の場所
Code ＞ 基本設定 ＞ 設定 をクリックします。
設定の中からフォントを見ると、settings.jsonで編集をクリックすることができます。
下記のファイルが開けたら、中に書き込んでいきます。
settings.json
詳しくみたい方は、下記をご覧ください。
Theme Color
Theme Color reference that lists all themable colors in Visual Studio Code.
code.visualstudio.com
説明を見るのも大変だと思いますので、いくつか下記にまとめてみました。
自分好みに変更してみてください。
エディタの特定要素の配色変更
細かく配色を変更したい場合、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" } // 文字列の囲み記号
}
]
}
Visual Studio Code - Code Editing. Redefined
Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud appli...
code.visualstudio.com
まとめ
普段使うものが少しでも自分好みになると、勉強も仕事も楽しくなりますよね！
皆さんも自分好みのエディターにしてみてください。
