そこそこ VS Code 拡張を開発してきたのでニッチな拡張開発 Tips を紹介する
私は今まで 6 つほど VS Code 拡張機能開発に携わってきました。以下一覧です。
自作 & コントリビュートした VS Code 拡張一覧
自作
コントリビュート
など
今回はその中で得た、公式ドキュメントには書かれていないようなニッチな Tips をいくつか紹介します。
デバッグが便利になる launch.json の Tips
yo code で作る最初の .vscode/launch.json は以下のようになっていると思います。
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"preLaunchTask": "${defaultBuildTask}"
}
]
}
これをこのように変更します。
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
+ "--profile-temp",
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"preLaunchTask": "${defaultBuildTask}",
+ "skipFiles": ["**/app/out/vs/**"]
}
]
}
args に --profile-temp を追加
args は code コマンドの引数ですが、これに --profile-temp をつけると一時的なプロファイルの状態で VS Code を起動することができます。他の拡張機能と競合していたりするとバグに気づけなかったりするのでおすすめです。
単に他の拡張を無効にしたいなら --disable-extensions でも良いんですが、依存関係にある拡張機能があると困るので --profile-temp のほうが無難です。
--install-extension で依存にある拡張をインストールするようにするのも良きです。
skipFiles に **/app/out/vs/** を追加
初期設定のままだと下の画像のように console.log などで Debug Console に出したログが extensionHostProcess.js:xxx とかいうわけわからんファイルの参照になります。
これが、skipFiles に **/app/out/vs/** [1] を追加すると、
と、extension.ts になってジャンプしやすくなります（source map 付きでのビルドを忘れずに）。skipFiles はデバッグ時にスキップするファイルを指定するオプションです。
結合テストの Tips
拡張機能がある程度の規模になってくると結合テストが欲しくなってくると思います。その場合、以下のようなディレクトリ構成がおすすめです。
examples/ # 拡張機能の使い方例 & 結合テスト用のワークスペース
src/ # 拡張機能のソースコード
test-integration/ # 結合テスト用のテストコード
...
結合テストと単体テストで config や snapshot などがバッティングしたりするので、このように分けるのがおすすめです（場合によっては Monorepo にしてもいいです）。以前 snapshot で結合テストだけにあるせいで、単体テストだけ実行するときに snapshot 差分が出たりしてアーキテクチャ変更に迫られたことがありました。
単体テストは好みで src 下に置いたり、新たにディレクトリを作ったりしてもいいです。
Vitest VS Code 拡張 [2]でも src, samples, test-e2e のような ディレクトリ構成にしています。
yo code でプロジェクトを作ると src の下に結合テスト用の test が作られますが、ちゃちゃっと移動しちゃいましょう。
なお、私は結合テストは Jest を用いてテストしています。beforeAll や afterEach といったメソッドが使いたい方はおすすめです。詳しくは過去の記事で紹介しているので参考まで。
まとめ
VS Code 拡張開発は自分の開発環境を充実させられてとても楽しいです。公式ドキュメント や公式サンプルリポジトリ、VS Code 組み込み拡張などがとても参考になります。みなさんも良き VS Code 拡張ライフを！
-
Linux だと
/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js, MacOS だと/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.jsになるので、共通しているパスを指定しています。 ↩︎ -
ちなみに Vitest は Playwright を使って結合テストを行っているようです。本当はこの Playwright を使った結合テストも紹介しようかと思いましたが、Tips というにはまだ発展途上 & 複雑すぎるので省きました。Microsoft さんライブラリ化してくれないかなあ ↩︎
Discussion