用 Claude Code 创建了 VSCode 扩展 | 话题

我们在公司内部引入了 Claude Code，所以我想创建一些在工作中能用上的便利工具。于是，我开发了一个 VS Code 扩展功能，可以在编辑器中监视输入错误、标签错误等问题！

"从"要是有这样的功能就好了～"的想法到实装的全过程，我们为大家详细总结！"

背景

实现时常犯"忘记添加 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 确认而推进，大幅减少了深入研究文档所需的时间。