用 Claude Code 制作 VSCode 扩展 | 主题

公司内部引入了 Claude Code 后，我想开发一些能在工作中使用的便捷工具，于是尝试制作了一款 VSCode 扩展，它可以在编辑器中监控拼写错误、标签错误等问题！

本文整理了从“要是有这样的功能就好了”的构想到实现的全过程！

开发过程

在实现过程中，经常会出现“忘记写 alt=""了！”或“全角和半角混用了！”之类的疏忽错误，这让人十分困扰……

我设想了这样一个工具，于是先尝试以聊天对话的形式提出需求。

我想做一个能防止这类疏忽的应用，比如在浏览器中高亮显示差异，或者指出代码中的错误！

代码审查检查清单 | 提交前需要确认的自定义检查清单
HTML/CSS 可视化差异 | 粘贴两段代码，直观呈现差异
截图差异检查器 | 对修改前后的图片进行像素级比较
实时 HTML/CSS 错误审查工具 | 只需粘贴代码，AI 即可给出指正

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)）等具体实现方法。

同样，在与 Claude Code 逐步确认的过程中推进开发，WebviewPanel 的双向通信（Webview 与 Node.js 之间的消息收发）以及使用 context.globalState 的持久化存储机制等，也大幅减少了深入查阅文档的时间。