型付きで行うVSCode拡張機能開発 VS Code Meetup #31 @mazrean

mazrean 2 ◼ 東工大 修士2年 ⚫4時間後には𝑺𝒄𝒊𝒆𝒏𝒄𝒆 𝑻𝒐𝒌𝒚𝒐 ⚫ソフトウェア工学 ◼ デジタル創作同好会traP ⚫Goでバックエンドの開発 ◼ 趣味でVSCode拡張機能製作中 今日はこれの話 @mazrean22 / @mazrean

拡張機能開発でのTypeScriptの利用 3 ◼ 拡張機能開発では簡単にTypeScriptを使用できる ⚫コード生成ツール[1]にTypeScriptを利用するオプション ◼ VSCode APIにもしっかり型が付く！ [1]: https://www.npmjs.com/package/generator-code

package.jsonに記述する設定 4 ◼ package.jsonへ記述する設定が存在 ⚫コマンド ⚫設定項目 コマンド 設定項目

package.json内の設定とTypeScript 5 ◼ 設定なしでVSCode APIを利用すると正常に動作しない！ ◼ package.jsonはVSCode APIの型定義に反映されない → package.jsonを反映して型をつけたい！ 例) コマンドのハンドラー設定 コマンド名: string型 → 実行までエラーなし

手順 6 1. package.jsonのTypeScriptへの変換 2. 型の作成 3. ラッパー関数作成 サンプル: https://github.com/mazrean/typed-hello-world

1. package.jsonのTypeScriptへの変換 7 ◼ jsonはそのままでは型定義に利用できない ⚫型定義にはreadonlyなオブジェクトのみ利用可能 ⚫現状、jsonはimport時にreadonlyにならない…[2] ◼ TypeScriptファイルに転記 [2]: https://github.com/microsoft/TypeScript/issues/32063 readonly化

1. package.jsonのTypeScriptへの変換 8 毎回転記するのは大変 → スクリプトを用意すると楽

2.型の作成 9 ◼ 書き出したTypeScriptを基に型を作成する ◼ 型が複雑になるものもあるが頑張る ⚫LLMの力を借りると楽になる

3.ラッパー関数作成 10 ◼ 型を設定したVSCode APIのラッパー関数を作る

デモ 11 誤ったコマンドにハンドラーを設定しようとするとエラー → 設定ミス・typoに気づきやすい！

まとめ 12 ◼ package.jsonに記述する設定項目が存在 ⚫設定を忘れると正常に動作しない ◼ VSCode APIの型定義にはpackage.jsonが反映されない ◼ 型付きのラッパー関数を作るとミスに気付ける！