この記事は夏のブログリレー5日目の記事です。
はじめに
こんにちは、25Bの@fken_57です。最近いろいろなものに手を出していて専門分野が分からなくなっています。
皆さんこんな経験はないでしょうか？
- VsCodeでこんな拡張機能が欲しいけど見つからない…
- 拡張機能見つかったけど使い方よくわからない…
- 微妙に自分のやりたいことと合わない…
そんな人に「ない物は作ればいい！」を進めるのがこの記事になります。なかったら作ればいいんです。
そして、今はAIエージェントがかつてないほど発展していて、あり得ないほどモノづくりのコストが下がっています。だから1→10はものすごく簡単なんですが、どうしても人力でやらないといけない土台作りの部分（0→1の部分）が重かったりします…
この記事では、制作の準備段階および公開の段階をスムーズにできるようにするための手引きを紹介をしていきます。
セッティングの過程
前提
Node.jsがローカル環境にインストールされているかを確認してください。もしインストールされていなかったら公式サイトからインストールするとよいでしょう。
Node.jsがインストールされているかは以下のコマンドで確認できます。Windowsならターミナルを開いて次のコマンドを実行してみましょう。
node --version
もしインストールできていなければ、こちらの記事を参考にしてみるといいかも…
入力コマンド
Node.jsがインストールされている環境なら、次のコマンドをターミナルで実行してみてください。
npm install -g yo generator-code
yoパッケージのインストールが実行し終わった後に、次のこのコマンドを実行します。
yo code
実行した結果、こんな感じになっていれば成功です
ではこの後色々聞かれると思いますが、これも下の画像のように答えていけば問題ありません。
**What's the name of your extension?**は自分のプロジェクト名にします。
**What`s the description of your extension?**は自分の拡張機能の説明にします。
これで、時間が経つとvscodeの拡張機能が作成されます。
Do you want to open the new folder with Visual Studio Codeと聞かれるはずなので、Open with Codeを選択するとVsCodeで拡張機能が開かれます。
開いたファイルがこんな感じの構成になっていれば成功です。
必要ならGitを使ってリモートで管理できる状態にしましょう。
作成
作成過程はあまり詳しく解説しません。ここは、コーディングエージェントなりを使って実装するのでも、自分で調べながら実装するのでもいいと思いますが、軽く機能を作る程度ならAIに投げることをお勧めします…
一応、スムーズになるAI開発のフローも示しておきます。参考程度に読んでいただけると助かります
大まかな開発フロー
1.AIに構成案と不明な点を整理させる。
2.AIが不明な点がなくなり、自分でも納得する実装方針であれば実装を命じる。
3.最後に拡張機能のテストを実施する
いきなり作らせようとすると意図とは違ったものができる可能性が高いです。頭の中にない物は作れません(重要)
まずAIにもどのように作るかという過程を考えさせて、思考の差異をすり合わせる必要があります。
AGENTS.mdを使ってみる
Codexでは、AGENTS.mdを使ってプロジェクト固有の行動指針を与えられます。
例えばCodexに対して、勝手に推測してあてずっぽうでAPIを使ってほしくないという願望があったとします。
その願望をAGENTS.mdに記述しましょう
ただAGENTS.mdに記述するときに
勝手に推測してあてずっぽうでAPIを使ってほしくない。
と書いても効果は薄いです。それよりかは「こんな内容の厳密なAGENTS.mdを作成したい!」と、プロジェクトに使用しているAIとは別のAIに頼んでみることをお勧めします。具体的な指示があった場合、より効果的な結果が得られる可能性があります。
最終的に依頼の仕方を工夫することによって、
# VS Code API
VS Code Extension APIを使用する場合は、
`node_modules/@types/vscode/index.d.ts`
を一次資料として参照すること。
- vscode APIを推測で生成しない
- 使用する型・関数・namespaceの存在をindex.d.tsで確認する
- 引数と戻り値は型定義に従う
- 実装後は必ず `npx tsc --noEmit` を実行する
という具体的な指針を作ることができます。AGENTS.mdを使いながら行動指針を上手く調節しましょう。
コンパイルエラーで落とす
いくら指針を示したところで指針は指針。AIが従わないかもしれないという信頼性の問題に直面する場合があります。
そもそも信頼しないで外部から落とすという手が使えます！
TypeScriptのコンパイラで、もしAIがハルシネーションを起こしたと分かった場合は、コンパイルエラーにしてしまえばいいのです。
例えばAIが
vscode.window.superCoolWindow()
と存在しない関数を書いた時に撃墜することができます
yo codeで生成したTypeScriptプロジェクトでは、@types/vscodeが開発依存関係として用意され、import * as vscode from "vscode"によってVS Code APIの型が読み込まれます。tsconfig.jsonのtypesに"vscode"を追加する必要はありません。
VsCode上のターミナルで、
npx tsc --noEmit
を実行します。もし間違ったコードを書いていれば、
src/extension.ts:5:15 - error TS2339: Property 'superCoolWindow' does not exist on type 'typeof window'.
5 vscode.window.superCoolWindow()
~~~~~~~~~~~~~~~
Found 1 error in src/extension.ts:5
という風に撃墜することができます。あとは先ほどのAGENTS.mdも併用して、
## TypeScript validation
After modifying TypeScript files, always run:
npx tsc --noEmit
Fix all type errors before completing the task.
For VS Code API usage, treat the installed type definitions as authoritative:
`node_modules/@types/vscode/index.d.ts`
Do not invent or guess VS Code APIs. Check the type definition when unsure.
とすれば、自動的にAIが型テストをしてハルシネーションを阻止するという手段も使えます。
更にCI/CDで堅牢にする方法も考えられますが、今回のブログでは割愛します。
Extension Development Hostで動作確認する
VSIXファイルを作る前に、VS CodeでF5を押してExtension Development Hostを起動し、拡張機能を実際に動かします。
ここでデバッグすることによって実際の環境での事故を防ぐことができます。
作った拡張機能を使う
AIをさばきながらでも、手作業で頑張りながらでも作りたい拡張機能が完成したとします。おめでとうございます。
でも拡張機能は使うまでが本番です
どのようにローカルで使うかを見てみましょう。
.vsixファイルとしてアウトプットする
まず.vsixファイルとしてアウトプットする必要があります。
package.json の先頭付近に publisher を追加します。ローカル利用だけなら任意の名前で大丈夫です！
{
"name": "for-blog-relay",
"publisher": "fken57",
"displayName": "Rainbow Terminal"
}
その後、ターミナルで
npx @vscode/vsce package --allow-missing-repository
を実行します。
.vsixファイルが生成されれば成功です。
.vsixファイル経由で拡張機能を利用する
.vsixファイルを作ったら拡張機能をいよいよ使うことができます。
拡張機能のインストール場所>…>VSIXからインストールを画像のように選択します。
そのあとあらかじめ作っておいた拡張機能を入れれば完成です！
これで君も拡張機能デビュー完了！！
おまけ:私が作った拡張機能
じゃあ実際にどんな拡張機能を作ったか紹介していきます。
私が作った拡張機能は競技プログラミングにおけるバンドラーおよびライブラリチェッカーで以下の内容に対応します。
- ライブラリの依存関係を確認しながらの展開
- 依存関係を一覧で確認できるグラフビジュアライザ
- 循環参照の検知機能
- 作ったライブラリをテストする機能
詳細は私のGitHubリポジトリと拡張機能ダウンロード先から見れますのでこちらもぜひよろしくお願いします！
まとめ
今回は拡張機能のセットアップの仕方、AIを活用した作り方、作った拡張機能の使い方、実際に作成した拡張機能の順番で紹介しました。
皆さんはこれからはないから作ったができます！是非参考にしていただければ幸いです!
明日のブログの担当は@Haru_18です。
