はじめに。
今回はVSCordの「setting.json」でできる視覚的な部分での設定と、ちょっとした便利設定をご紹介。
拡張機能のテーマを探せばある程度好きなカラーは見つかると思いますが、その上で部分的に変えたい時などに使えるかなと思います。
editor.tokenColorCustomizations
ここは名の通り、エディターの色設定です。
まずは基本の色設定7項目からご紹介。
setting.json
{
"editor.tokenColorCustomizations": {
"numbers": "#77de96", //数字の文字色（10pxとかの数字の部分）
"keywords": "#77de96", //定数・変数宣言
"functions": "#ad7aff", //関数
"strings": "#00aeff", //文字列（"〜"の中の文字色）
"variables": "#3efff5", //変数の色（$〜〜）
"types": "#ff893a", //型の色とスタイル（文字や文章の装飾）
"comments": "#fffb0061", //コメントの色
"textMateRules": [
]
}
一旦ここまでの7項目が基本設定だと思ってもらっていいかなと思います。
ここから下は「textMateRules」を使って、特定の条件に対して色を変更できます。
（以下も"editor.tokenColorCustomizations"の中に入れていきます。）
※上記の基本設定よりも"textMateRules"が優先されます。
setting.json
"textMateRules": [
{
"scope": "entity.other.attribute-name", //HTML属性
"settings": {
"foreground": "#cea5fb",
}
},
{ //タグ「< />」の色
"scope": "punctuation.definition.tag.begin, punctuation.definition.tag.end",
"settings": {
"foreground": "#bcbcbc"
},
}
{
"scope": [
"punctuation.section.embedded.begin.php", //php開始タグ
"punctuation.section.embedded.end.php" //php終了タグ
],
"settings": {
"foreground": "#ff7a7a",
}
},
]
例として3つ入れました。
1番目のHTML属性のように1つの条件に対してだけでなく、2番目以降は複数の条件に対し、scopeに複数の項目をまとめて入れて色を変えることも可能です。
（2と3番目のように、複数項目の記入の仕方は2通りあるので好みでOKです）
ちなみに、"setting"項目は色だけでなく、"fontStyle"を使ってフォントに下線を引かせたり太字にしたりなど、細かい設定が行えます。
ちなみに僕が入れてる"textMateRules"の色設定はこれくらいです。
setting.json
scope
"entity.other.attribute-name" //HTML属性(下の画像でいう紫部分）
"entity.name.tag" //タグの中の文字(< aaa >）のaaaの部分
"punctuation.definition.tag.begin" //前半タグ（ < . </ . <! ）
"punctuation.definition.tag.end" //後半タグ（ > ）
"punctuation.section.embedded.begin.php" //php開始タグ（ <?php ）
"punctuation.section.embedded.end.php" //php終了タグ（ ?> ）
scope内の調べ方ですが、
1、vsCord真ん中上部の虫眼鏡を押し「>inspect」と打ち「開発者:エディタートークンとスコープの検査」を選択
2、エディター内で調べたい項目をクリック。
3、「textmate scopes」と書いてある項目の一番上をコピーし「setting.json」のscopeに貼り付け。
下記画像でいうところの「entity.other.attribute-name.html」が紫の部分にあたります。
workbench.colorCustomizations
ではお次、「workbench.colorCustomizations」を使ってエディターの文字以外の場所の文字やアイコンだったりのカラー設定になります。
ここからは僕自身が設定してるのをそのまま貼り付けますが、お好きなように使ってください。
setting.json
"workbench.colorCustomizations": {
//--------------- サイドバー（左）--------------------
"activityBarBadge.background": "#de7777", //左の通知バッジの背景色
"activityBarBadge.foreground": "#000", //左の通知バッジの文字色
"activityBar.foreground": "#ffffff", //アクティビティバーの選択中の色（マークアイコン）
"activityBar.activeBorder": "#00ff6e", //アクティビティバーの選択中の左の線
//--------------- タブ（上）--------------------
"tab.activeBackground": "#005d5a", //アクティブタブの背景色
"tab.activeForeground": "#ffffff", //アクティブタブの文字色
"tab.activeBorder": "#ffffff00", //アクティブなタブの下の線
"tab.activeBorderTop": "#00000000", //アクティブなタブの上の線（透明にしてる）
"editorGroupHeader.tabsBackground": "#000000", //タブの何もないとこ
//------------------ ステータスバー（下） --------------------
"statusBar.background": "#3a4b4b", //ステータスバーの背景色
"statusBar.foreground": "#ffffff", //ステータスバーの文字色
//--------------- エディター内 --------------------
"editor.foreground": "#eaeaea", //エディターの基本文字色
"editor.background": "#15141b", //エディター背景色
"editor.selectionBackground": "#80caff64", //エディター選択中の色
"editor.selectionHighlightBackground": "#add6ff88", //選択中の文字と同一文字の背景色
"editor.selectionHighlightBorder": "#495F77", //選択中の文字と同じやつの周りの線
"editor.findMatchBackground": "#515c6a", //検索してエンター押した時に選択された背景色
"editor.findMatchBorder": "#515c6a", //検索してエンター押した時に選択された周りの線
"editor.findMatchHighlightBackground": "#ea5c0055", //検索結果に一致した項目の背景色
"editor.findMatchHighlightBorder": "#ffffff00", //検索結果に一致した項目の周りの線
"editorLineNumber.foreground": "#a6a6a6", //エディタの行番号の色
"editorLineNumber.activeForeground": "#00df73", //選択中のエディタの行番号の色
"editorCursor.foreground": "#ffffff7b", //キャレットの色（点滅縦線のやつ）
//--------------- ミニマップ（右） --------------------
"minimap.background": "#000000", //ミニマップの背景色
"minimapGutter.modifiedBackground": "#80caff", //ミニマップ選択時の色
"minimapGutter.deletedBackground": "#f06788", //削除された行の背景色
"minimap.findMatchHighlight": "#ff8e437f", //検索結果に一致した項目の行の背景色
"minimap.selectionHighlight": "#85bcff7e", //範囲選択中時のマーカー色
"minimap.errorHighlight": "#DC3657", //エラー時のマーカー色
"minimap.warningHighlight": "#fbc23b", //警告時の背景色
"minimapSlider.background": "#51ff0040", //表示領域以外の場所にカーソルを合わせた時
"minimapSlider.hoverBackground": "#39b50040", //表示領域にカーソルが入ってる時の色
"minimapSlider.activeBackground": "#51ff0070", //んでそん時にクリックした時のマーカー色
},
その他の設定（カラー以外）
最後に、「editor.tokenColorCustomizations」や「workbench.colorCustomizations」に属さないカラー以外の設定項目です。（ここも僕自身が入れてる一部抜粋です）
始めと終わりの「{}」内にさえ入っていればあまり順序は気にせず入れ替えたりしても大丈夫です。
setting.json
//--------------- ウィンドウ --------------------
"workbench.editor.tabSizing": "shrink", //タブの幅サイズ指定
"window.title": "「${folderName}${activeEditorShort}", //パス表示
"workbench.startupEditor": "none", //vscode起動時に「ようこそ」画面を表示しないようにする
//--------------- エディター内 --------------------
"files.trimTrailingWhitespace": true, //保存時に各行の末尾にある半角スペースを削除
"files.trimFinalNewlines": true, //保存時に最終行以降の空行を削除
"files.insertFinalNewline": true, //保存時にファイルの最後に空行を挿入する
"editor.formatOnSave": false, //保存時にコード整形
"editor.fontSize": 14, //フォントサイズ（ウィンドウズームレベル0を起点）
"editor.wordWrap": "on", //行の折り返し
"editor.guides.bracketPairs": true, //カッコ同士を色で判別してくれる
"editor.autoIndent": "keep", //オートインデント
"editor.glyphMargin": false, //行番号の左端に余白を作るか
"editor.roundedSelection": true, //選択範囲の角を丸める
"editor.renderWhitespace": "boundary", //空白を可視化
"editor.renderControlCharacters": true, //制御文字を表示する
"editor.dragAndDrop": false, //D&Dでコードの移動をしないようにする
"editor.cursorStyle": "line", //カーソルの形状
"editor.cursorBlinking": "smooth", //カーソルの表示形式
//--------------- ミニマップ（右）--------------------
"editor.minimap.showSlider": "always", //ミニマップのハイライトを常に表示
"editor.minimap.enabled":true, //ミニマップを表示するかしないか
//--------------- HTML --------------------
//<html lang="ja"> の言語をjaにしておいてくれる
"emmet.variables": {
"lang": "ja",
},
//--------------- 拡張機能絡み --------------------
Code Spell Checker を入れた際にスペルミスとして表示してくれる青い波線
スペルミスと判断されたくない単語を登録する場合に""内にワードを入れることができます
"cSpell.userWords": [
"",
"",
"",
],
僕が使ってる拡張機能テーマです。
色のテーマは既存のダークテーマに、アイコンはファイルアイコンをつけただけのシンプルなものです。
//色のテーマ
"workbench.colorTheme": "Visual Studio Dark",
//ファイルアイコン
"workbench.iconTheme": "r-icons",
参考リンク