環境: macOS
VSCodeのテーマをカスタマイズしたい。
- 色が多すぎて目が疲れる。
- プログラムの文法と色付けがズレることがあってイラッとする。
最終的にできたものはこんな感じです。基本は白黒、コメントの灰色以外は青と緑だけ。
参考:
- https://code.visualstudio.com/docs/getstarted/themes
- https://code.visualstudio.com/api/extension-guides/color-theme
既存のテーマをカスタマイズ
VSCodeのコマンドパレットから "Open Settngs(JSON)" を選んでsettings.jsonを開きます。 "editor.tokenColorCustomizations": { " まで入力すると、テーマの名前がサジェスチョンに出ますので（サジェスチョンが有効なら）、自分が使っているテーマを選びます。
"editor.tokenColorCustomizations": {
"
"[テーマの名前]" の中で "textMateRules" に配列を指定します。
"editor.tokenColorCustomizations": {
"[Visual Studio Light]": {
"textMateRules": [
]
},
},
カスタマイズしたいテーマのソースコードを調べます。デフォルトのテーマは、次のディレクトリ内のJSONファイルです。
/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-何々/themes/
インストールしたテーマのJSONは、次のディレクトリ内にあります。
~/.vscode/extensions/作者.拡張機能-バージョン/themes/
あるいは、Githubでvscodeや拡張機能のソースコードを調べます。
こうしたJSONファイルの中の "tokenColors" から「それらしき」部分をコピーして、setting.jsonに貼り付け、"foreground" の色を変えます。次の例は Visual Studio Light の文字列リテラルを赤から緑に変えます。
"editor.tokenColorCustomizations": {
"[Visual Studio Light]": {
"textMateRules": [
{
"scope": [
"string",
"entity.name.operator.custom-literal.string",
"meta.embedded.assembly"
],
"settings": {
"foreground": "#219186"
}
}
]
},
},
斜体や太字をやめたいときは、"fontStyle" を空にします。
{
"scope": "comment",
"settings": {
"fontStyle": "",
"foreground": "#93A1A1"
}
},
Rubyの色のカスタマイズ
キーワードのカスタマイズ
常々やめてほしいと思っていたのは、Rubyのinclude、private、attr_accessorに色を付けることです。これってキーワードじゃなくてModuleクラスやClassクラスのメソッドじゃん。has_manyとattr_accessorが別の色になるのはおかしいと思う。
vscodeや拡張機能vscode-rubyのソースコードを調べて、"scope" に指定すべき文字列を探します。
- https://github.com/microsoft/vscode/blob/master/extensions/ruby/syntaxes/ruby.tmLanguage.json
- https://github.com/rubyide/vscode-ruby/blob/master/packages/vscode-ruby/syntaxes/ruby.cson.json
一般的なキーワードは "keyword"、includeやprivateにあたる部分は "keyword.other.special-method.ruby" であるようです。次のようにキーワードは青、includeやprivateは黒とします。
{
"scope": "keyword",
"settings": {
"foreground": "#0451a5"
}
},
{ // include, private, attr_accessor ...
"scope": "keyword.other.special-method.ruby",
"settings": {
"foreground": "#000000"
}
},
ハッシュのキーのカスタマイズ
vscodeとvscode-rubyのソースコードを眺めていたら、symbols as hash key というのを見つけました。ハッシュのキーと値の場合で色を分けられたら見やすいかもしれない。
次のように設定することで、キーのシンボルは青、値のシンボルは緑にできました。
{ // Ruby: symbol, true, false, nil
"scope": "constant.language",
"settings": {
"foreground": "#219186"
}
},
{
// Ruby: symbols as hash key
"scope": [
"constant.other.symbol.hashkey.ruby",
"constant.language.symbol.hashkey.ruby"
],
"settings": {
"foreground": "#0451a5"
}
}
テーマを自作する
VSCodeのマニュアルにカラーテーマを自作する方法が載っていましたので、試してみたところ割と簡単にできました。
必要なツールをインストールします。
% npm install -g yo generator-code
次のコマンドで質問に答えていくとひな形ができます。
% yo code
? What type of extension do you want to create? New Color Theme
? Do you want to import or convert an existing TextMate color theme? No, start f
resh
? What's the name of your extension? Light Simple
? What's the identifier of your extension? light-simple
? What's the description of your extension? Based on the built-in light theme, r
educed the colors.
? What's the name of your theme shown to the user? Light Simple
? Select a base theme: Light
themesディレクトリの下にあるJSONファイルを開き、デフォルトのテーマ、あるいはインストールしたテーマのJSONを貼り付けます。
Visual Studio Lightではソースが2つ（light_vs.jsonとlight_defaults.json）に分かれていたので、light_vs.jsonの "tokenColors" と light_defaults.jsonの "colors", "semanticHighlighting" を使ってまとめました。
あとは色を変えていくだけです。
{
"colors": {
"editor.background": "#FFFFFF",
"editor.foreground": "#000000",
// 中略
},
"semanticHighlighting": true,
"tokenColors": [
// 中略
{
"scope": [
"string",
"entity.name.operator.custom-literal.string",
"meta.embedded.assembly"
],
"settings": {
"foreground": "#219186"
}
},
// 中略
]
}
VSCode上でF5キーを押してウィンドウを開き、⌘K → ⌘T で自作のテーマに変えると、編集中のテーマがリアルタイムで反映されます。
自作のテーマをインストールできるようにするには、次のコマンドをインストールします。
% npm install -g vsce
テーマのディレクトリで、vsixファイルを作るコマンドを実行します。
% vsce package
VSCodeに戻り、拡張機能のタブで上の[...]のメニューから「VSIXからのインストール」を選び、生成されたvsixファイルを選べば、自作のテーマをインストールできます。あとは ⌘K → ⌘T でテーマを選びます。