用 Claude Code 製作 VSCode 擴充功能 | 最新消息

在公司內部導入 Claude Code 後，我想在業務中製作一些實用工具，所以就試著開發了一個 VSCode 擴充功能，可以在編輯器上監視拼寫錯誤、標籤錯誤等問題！

從「要是有這樣的功能就好了～」的想法到實裝為止的過程都整理好了！

背景

在實裝時，常常出現「哎呀，忘記加入 alt=""！」、「全形和半形混淆了！」之類的粗心大意……

我想像著要是有這樣的工具就好了，於是先以聊天對話的形式試著提出想法。

想製作一個能防止粗心大意的應用程式，例如在瀏覽器上高亮顯示差異，或指出程式碼錯誤的那種！

程式碼審查檢查清單 | 提交前的自訂檢查清單
HTML/CSS 視覺化 Diff | 貼上兩段程式碼並視覺化差異
截圖差異檢查器 | 逐像素比較修正前後的圖像
即時 HTML/CSS 錯誤檢閱器 | 只需貼上代碼，AI 就會指出問題

他提出了一些建議，但我想進一步提交額外的需求

AI 指出問題真的很棒！！不過我想要的不是貼上代碼，而是希望能在 VSCode 中即時監視或在完成工作後進行檢查！

決定開發為 VSCode 擴展功能而非瀏覽器應用。

由於即時監視的 API 成本較高，我們採用了命令執行後的檢查方案。

最初建議使用 Claude API，但由於需要付費，所以改為使用已經訂閱的 GitHub Copilot。

簡單來說，這是一個擴展功能，可在工作完成後取得 git diff，將提示詞發送給 GitHub Copilot，自動檢測粗心錯誤。

運作原理

完成工作後點擊狀態欄按鈕
↓
取得 git diff HEAD 並比較差異
↓
解析 diff 並提取變更檔案和行號
↓
將 diff 和提示詞發送至 GitHub Copilot（vscode.lm API）
↓
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 確認，因此大幅減少了深入研究文件的時間。