Claude CodeでVSCodeの拡張機能を作成したよ

Claude Codeを社内導入したので業務で使える便利ツールをなにか作りたいなと思い、エディタ上でタイプミス、タグミスなどを監視してくれるVSCode拡張機能を作ってみました！

「こんな機能あったらいいな〜」とイメージから実装までの経緯をまとめました！

経緯

実装時に「alt=””入れ忘れた！」とか、「全角と半角が混同している！」などといったケアレスミスが多いのが悩み、、、

イメージとしてはこのようなツールがあったらいいなと思い、まずはチャットの対話形式で投げかけてみることに。

ケアレスミスを防ぐようなアプリ、例えばブラウザ上に差分をハイライトしてくれたり、コードのミスを指摘してくれるようなやつを作りたい！

コードレビューチェックリスト | 提出前に確認するカスタムチェックリスト
HTML/CSSビジュアルDiff | 2つのコードを貼り付けて差分を視覚化
スクリーンショット差分チェッカー | 修正前後の画像をピクセル比較
ライブHTML/CSSエラーレビュアー | コードを貼るだけでAIが指摘

いくつか提案してくれましたが、さらに追加で要望を投げてみる

AIが指摘してくれるのはすごくいい！！ただコードを貼るんじゃなくてVSCode上でリアルタイム監視や作業終了後に確認できるようにしたい！

ブラウザアプリではなくVSCode拡張機能として作ることに決定。

リアルタイム監視はAPIコストが高いようなので、コマンド実行による作業後レビューを採用しました。

最初に Claude API を提案されましたが課金が必要なため、すでに契約しているGitHub Copilotを使用してもらうことに。

概要としては、作業後に git diff を取得して GitHub Copilot にプロンプトを送り、ケアレスミスを自動検出するという拡張機能です。

仕組み

作業を終えたらステータスバーボタンをクリック
↓
git diff HEAD を取得し差分を比較
↓
diff をパースして変更ファイル・行番号を抽出
↓
GitHub Copilot（vscode.lm API）に diff + プロンプトを送信
↓
Copilot が JSON 形式でレビュー結果を返す
↓
VSCodeのビューにレビュー結果を表示
↓
指摘の行番号をクリックすると該当ファイル・行にジャンプ
↓
AIが検出した傾向を蓄積

画面はこんな感じです。

ひと通り作業が完了したらGitHubでコミットする前にCode Review 拡張機能の起動。前回のコミットとの差分を比較し、おかしなところがないか見てくれます。

AIが検出した傾向をストレージに蓄積し自分はどんなミスが多いのか見える化。

プロンプトはこんな感じです。

チェック観点:
- テキスト内の不自然なスペース（全角・半角スペースの混入など）
- 大文字・小文字の不統一（クラス名・テキストなど）
- 誤字脱字の可能性がある箇所
- 括弧・記号の全角・半角混在（例: (）・（) のように開き括弧と閉じ括弧で全角半角が混ざっている、テキスト中に全角の()[]{}が使われているなど）
- <a> の href属性が "#" のままになっている（未設定・仮置きの可能性）
- HTMLのネスト構造の意味的な違反（以下は特に重点チェック）:
  - <ul>・<ol> の直下に <li> 以外の要素（<div>など）が入っている
  - <h1>〜<h6> の中に <div>・<p>・<section> などブロック要素が入っている
  - <p> の中に <div>・<ul>・<table>・<h1>〜<h6> などブロック要素が入っている
  - <a> の中に <a> がネストしている
  - <button> の中に <button>・<a>・<input> などインタラクティブ要素が入っている
  - <tr> の中に <td>・<th> 以外の要素が入っている

ここに追加して拡張機能をアップデートしていけば自分ミス傾向を重点的にチェックできるようになり性能がどんどん上がります！

技術面・実装

この拡張機能は TypeScript + VSCode標準API + Node.js標準機能だけで作られており、外部ライブラリは一切使っていません。ファイルの構成も主要 .ts ファイルが5つのみとシンプルな構成です。

VSCode標準APIには vscode.lm（Language Model API）という、GitHub Copilot のモデルを直接呼び出せる機能があります。これを使えば Anthropic や OpenAI の APIキーなしに AI レビューが実装できるのですが、比較的新しいAPIで公式ドキュメントも少なく、通常なら仕様調査だけで時間がかかります。

Claude Code に「VSCode拡張機能でCopilotのモデルを呼び出すにはどうすればいいか」と質問しながら実装を進めたことで、vscode.lm.selectChatModels() の使い方や、レスポンスのストリーミング受信（for await (const chunk of response.text)）といった具体的な実装方法をその場で把握できました。

同様に、WebviewPanel での双方向通信（Webview → Node.js へのメッセージ送受信）や、context.globalState を使った永続ストレージの仕組みなども、都度 Claude Code に確認しながら進めたことで、ドキュメントを深掘りする時間を大幅に削減できました。