用 Claude Code 開發了 VSCode 擴充功能

由於公司內部導入了 Claude Code，我們想開發一些能在工作中使用的實用工具，於是製作了一款 VSCode 擴充功能，可以在編輯器中監控打字錯誤、標籤錯誤等問題！

整理了從「如果有這樣的功能就好了」的構想，到實際開發的過程！

開發過程

實作時常會因為「忘記加 alt=""！」或「全形與半形混用！」等粗心的錯誤而感到困擾……

心中浮現的理想工具形式，首先是透過聊天對話的方式向 AI 提出需求。

我想開發能防止粗心錯誤的應用程式，例如在瀏覽器上高亮顯示差異，或是指出程式碼中的錯誤！

• 程式碼審查檢查清單 | 提交前確認的自訂檢查清單
• HTML/CSS 視覺化差異 | 貼上兩段程式碼，視覺化呈現差異
• 截圖差異檢查器 | 以像素比對修正前後的圖片
• 即時 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 提交 commit 之前啟動 Code Review 擴充功能。它會比較與上次 commit 的差異，檢查是否有任何不對勁的地方。

將 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 確認的過程中推進，因此大幅減少了深入研究文件的時間。

總結

這次分享的是製作一款 VSCode 擴充功能的經過，目的是在提交前一次找出粗心的失誤。

結合 git diff 與 Copilot，可以減少遺漏，同時增加檢查的角度，逐步打造成符合自己失誤傾向的專屬工具。

我新發現，使用 VSCode 標準 API 其實可以相當輕鬆地開發擴充功能。如果沒有 Claude Code，我大概不會想到要做擴充功能吧！（笑）

當然，理解程式碼的內容與運作原理很重要，但即使全部交給 AI，只要先動手「總之先做做看」，往往也能找到點子與新發現。