Scribble at 2026-03-09 16:22:50 Last modified: unmodified

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

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

・作業ディレクトリを作って、そこを起点に PowerShell を立ち上げて、yo でスケルトンを作成する。

・スケルトンの拡張機能（配色テーマ）フォルダを "%USERPROFILE%\.vscode\extension" へ追加する。

ただし、スケルトンの "package.json" とフォルダ名に注意しないと、VSCode が認識に失敗して、".obsolete" という名前のファイルにブラック・リストとして登録してしまうので、このファイルがあることを理解していないと、何をしようが VSCode は認識してくれなくなるというドツボにはまる。スケルトンの修正するべき個所は、少なくとも次の二つ。

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

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

従来は、themename だけでフォルダを作ってもよかったのだが、現在の VSCode ではテーマを認識してくれない。

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