VSCodeでタグやコメントの色・スタイルをカスタマイズする

はじめに

VSCodeでは配色テーマが数多く存在し、デフォルトにインストールされているもの or マーケットプレイスからインストールしたものを自由に設定することができる。

自由であるがゆえに配色難民になることもあり、私自身「One Dark Pro」「Night Owl」「Monokai Pro」「Black Ocean」など転々としてきた。
そんな私も現在はデフォルトでインストールされている「Dark+」とちょっとした配色のカスタマイズに落ち着いている。

「このテーマ好きなんだけど、このタグの色気になるんだよなあ」と悶々としている方には良い解決策になるかと思います。

コメントの色を変更する

Dark+ではコメントアウトはデフォルトでは緑ぽい色になっています。

このままでも良いとは思うのですが、ちょっと目立ち過ぎていて気になるのでグレーぽい色に変更します。

setting.jsonを開く

VSCodeを開いたら、コマンドパレットを開きます。
（Windows/Linux:ctrl + Shift + P Mac:command + Shift + P）

「setting」と入力すると「Preferences Open Settings(JSON)」が候補に出るので選択します。

すると、setting.jsonファイルが開かれます。

コメントの設定を記述する

1つ目の中括弧内最終行に以下を記述します。

"editor.tokenColorCustomizations": {
    "comments":{
        "foreground":"#7e7e7e",
        "fontStyle": "italic"
    },

setting.jsonを保存すると、コメントの色とstyleが変わりました。

ちなみにfontstyleをboldとすると太字になります。

特定のタグの色を変更する

例えばHTMLにPHPを埋め込んだコードの場合、Dark+ではHTMLタグとPHPの開始・終了タグが同じ色になってしまいます。

これがなかなか辛いので、PHP開始・終了タグの色を変更します。

タグの名称確認

先ほど設定した「editor.tokenColorCustomizations」カッコ内に書いていくのですが、その前にPHPタグの名称を確認します。

コマンドパレットを開き「inspect editor」と入力すると「Inspect Editor Tokens and Scopes」が候補に出るので選択します。

タグにカーソルを合わせると情報が出るので、foregroundの下記赤線部分をコピーします。

「」で名称が異なるので、それぞれコピーします。

setting.jsonに記述

再度setting.jsonを開き、「textMateRules」内に設定を以下のように記述します。

"editor.tokenColorCustomizations": {
    "comments":{
        "foreground":"#7e7e7e",
        "fontStyle": "italic"
    },
    "textMateRules": [
      {
        "scope":[
          "punctuation.section.embedded.begin.php"
        ],
        "settings": {
          "foreground": "#ff8000",
          "fontStyle": "italic"
        }
      },
      {
        "scope":[
          "punctuation.section.embedded.end.php"
        ],
        "settings": {
          "foreground": "#ff8000",
          "fontStyle": "italic"
        }
      }
    ]
  }

setting.jsonを保存するとPHPの開始・終了タグの色が変わりました。
かなり見やすくなりました。

是非お試しくださいませ！