🧩
Vibe CodingでVSCode拡張を作った時にやったこと
前提
以下の状態から開始。
- VS Code拡張を実装したことはなく、「あーなんかTypeScriptで書けるらしいよね」くらいの知識
- TypeScript自体は普通に書ける
作ったもの
VS Codeで今開いているすべてのファイルを、相対パスでクリップボードにコピーする拡張機能。
Claude Codeを使うときや、コードレビューでコミュニケーションを取る際に、こういう機能が欲しいと思っていたため。
（着想はGitHub Copilot Chatの Add Context -> Open Editors から得た。）
成果物はこちら。
使ったツール
- VS Code (できたものを見る用)
- Claude Code
- ChatGPT (Plusプラン)
Vibe Codingの流れ
1. VS Code拡張開発のはじめ方を調べる（AIに聞く）
以下をChatGPT o3に聞いて、前提知識として頭に入れた。
- リポジトリ名、プロジェクト名のアイデア（命名ルールはあるか、デファクトはあるか）
- VS Code拡張でもテストは書けるかどうか
- （もうすでに忘れたけど）なんかコマンド一発でプロジェクトを作れること
2. 要件定義書を作る
o3に以下のような流れで要件定義書(markdown)を作成してもらい、気に入らないところは手で微修正した。
- 「こういう課題があって」「こういう機能を作りたい」「こうやったらできると思っている」「率直に意見をくれ」 と o3 に投げる
- (VS Code拡張を作るのが初めてなので当然疑問点があり、) 質問しながら会話の中で方針を固めていく。
- 例えば今回は VSCode QuickPick の機能を自分は知らなくて、o3 のおかげで初めてそれを使う方針案が出てきた。
- 方針が固まったら、「要件定義書の叩き台を完全なMarkdownファイルとして出力して」とお願いする。
- 手で直した方が早い部分は手で微修正して完成させる。
ちなみに成果物はこちら。
3. Coding開始
- 事前に「VS Code拡張開発のはじめ方」を調べていたので、それをClaude Codeに依頼。
- Claude Codeに上記の「要件定義書を理解して」と依頼。
- あとは要件定義書に基づいて実装してもらう
- 途中で、うまくいかないことや学びがあったらプロジェクトの CLAUDE.md に追記していく
- 例えば、最初は実装後にコンパイルやリントをしてくれず、エラーが出てしまっていたので、自動で行うようにルールを追記した。
- CIとかテストもよしなに指示しながら実装してもらった。（テストは癖があって何度かハマった）
- (当然だけど)うまくいったところで都度、セーブポイント的にcommitすると良い感じだった。
4. Publish
完成してテストも通ったら、VS Code MarketplaceにPublishした。Publishの仕方も o3 と o4 に聞きながら進めた。(Claude Codeを使わなかったのはコスト節約のため)
アイコンもChat GPTに作ってもらった。
感想
- 自分も知識がなくて、ネット上にもそれほど情報がない部分はやはりハマるパターンがあった。今回だとテストの部分。
- Claude Codeにテスト実行させると、VS Code拡張テストの場合標準出力エラーが良く出るので失敗したと見なされて、めちゃくちゃにされることがあってハマった。
- 逆に、事前知識がほぼ無かったにもかかわらず「とりあえず動くもの」は10分くらいですぐに完成した。ここで良しとするか、品質を担保するためにもう少し踏ん張るかのところで、エンジニアの介入余地があるんだろうなと思った。
- （まあそうだよねって感じw）
おわり
Discussion