Scribble at 2026-03-09 16:22:50 Last modified: 2026-03-10 06:25:26

VSCode の配色テーマ（Color Theme）を作り直した。既存の環境から extension のフォルダを移すだけでは VSCode が正しく認識してくれなかったからだ。最初に作ってから数年が経過しているし作成の仕様やインストールの手順も変わっていると思うので、この機会にスクラッチで作成する手順をおさらいすることとしたわけである。ただ、基本的な準備は変わっていない。

・Node.js（つまり yo, generator-code の実行環境）をインストールする。

・作業ディレクトリを作って、そこを起点に PowerShell を立ち上げて、yo でスケルトンを作成する。（PowerShell は標準だと C:\WINDOWS\System32 のように書き込み権限がないフォルダを起点にするから、必ず作業ディレクトリは移動するのがよい。）

・作業ディレクトリで作成したスケルトンとしての拡張機能（配色テーマ）フォルダを "%USERPROFILE%\.vscode\extension" へ追加する。作業ディレクトリで変更した内容をコピーしてもよいが、面倒なので動く場所に置いたファイルを直に編集する方がよい。（ただし JSON ファイルの編集を間違うと VSCode のユーザ・インターフェイスを崩してしまうリスクはある。）

さらに最近の VSCode で配色テーマをつくるときに強調しておきたいのは、"package.json" の内容とフォルダ名との符合に注意しないと、VSCode が認識に失敗して、".obsolete" という名前のファイルにブラック・リストとして登録してしまうので、このファイルがあることを理解していないと、何をしようが VSCode は認識してくれなくなるというドツボにはまるということだ。yo で作成したままだと、不十分なフォーマットでスケルトンが吐き出されてしまうのである。そこで、修正するべき個所は、少なくとも次の二つとなる。

・"package.json" に "publisher" と "version" の値を設定する。

・テーマのフォルダ名は、"[publisher].[themename]-[version]" という形式に従う必要がある。

従来は、themename だけでフォルダを作ってもよかったのだが、現在の VSCode ではテーマを認識してくれない。"package.json" で設定した内容をフォルダ名にも反映させる必要があるのだ。

あとは、もちろんテーマの中にある JSON ファイルを編集してエディタやウィンドウなどの配色とかフォントのスタイルを定義していくだけだ。調べてみたところ、相変わらず token やスコープの充実した一覧表というものは存在しておらず、それぞれ勝手に10個や20個ていどのスコープを定義して「俺のテーマ」みたいな話をしているだけだ。しかし、実際に Ctrl + Shift + P で "Developer: Inspect Editor Tokens and Scopes" で一つずつ調べてゆくと、もちろんスコープやトークンごとの用途などによって色々とあるのがわかる。結局は GitHub で TextMate のスコープをどこで処理してるのか見つけないといけないのだが、もうまったくの迷宮になっていて、面倒臭い。これは暇なときに探そう。