型付きで行うVSCode拡張機能開発 / VSCode Meetup #31

VSCode拡張機能の開発では簡単にTypeScriptを利用できます。
しかし、package.jsonに記述される設定項目は型定義に反映されず、typoなどのミスに気づきづらいです。
この発表では、package.jsonの記述を型定義に反映することで、VSCode拡張機能開発でのバグを防ぐ方法を解説します。

Transcript

1. 型付きで行うVSCode拡張機能開発 VS Code Meetup #31 @mazrean
2. mazrean 2 ◼ 東工大 修士2年 ⚫4時間後には𝑺𝒄𝒊𝒆𝒏𝒄𝒆 𝑻𝒐𝒌𝒚𝒐 ⚫ソフトウェア工学 ◼ デジタル創作同好会traP ⚫Goでバックエンドの開発 ◼ 趣味でVSCode拡張機能製作中 今日はこれの話 @mazrean22 / @mazrean
3. 拡張機能開発でのTypeScriptの利用 3 ◼ 拡張機能開発では簡単にTypeScriptを使用できる ⚫コード生成ツール[1]にTypeScriptを利用するオプション ◼ VSCode APIにもしっかり型が付く！ [1]: https://www.npmjs.com/package/generator-code
4. package.jsonに記述する設定 4 ◼ package.jsonへ記述する設定が存在 ⚫コマンド ⚫設定項目 コマンド 設定項目
5. package.json内の設定とTypeScript 5 ◼ 設定なしでVSCode APIを利用すると正常に動作しない！ ◼ package.jsonはVSCode APIの型定義に反映されない → package.jsonを反映して型をつけたい！ 例) コマンドのハンドラー設定 コマンド名: string型 → 実行までエラーなし
6. 手順 6 1. package.jsonのTypeScriptへの変換 2. 型の作成 3. ラッパー関数作成 サンプル: https://github.com/mazrean/typed-hello-world
7. 1. package.jsonのTypeScriptへの変換 7 ◼ jsonはそのままでは型定義に利用できない ⚫型定義にはreadonlyなオブジェクトのみ利用可能 ⚫現状、jsonはimport時にreadonlyにならない…[2] ◼ TypeScriptファイルに転記 [2]: https://github.com/microsoft/TypeScript/issues/32063 readonly化
8. 1. package.jsonのTypeScriptへの変換 8 毎回転記するのは大変 → スクリプトを用意すると楽
9. 2.型の作成 9 ◼ 書き出したTypeScriptを基に型を作成する ◼ 型が複雑になるものもあるが頑張る ⚫LLMの力を借りると楽になる
10. 3.ラッパー関数作成 10 ◼ 型を設定したVSCode APIのラッパー関数を作る
11. デモ 11 誤ったコマンドにハンドラーを設定しようとするとエラー → 設定ミス・typoに気づきやすい！
12. まとめ 12 ◼ package.jsonに記述する設定項目が存在 ⚫設定を忘れると正常に動作しない ◼ VSCode APIの型定義にはpackage.jsonが反映されない ◼ 型付きのラッパー関数を作るとミスに気付ける！