10年前端，用AI 1天做了个VSCode插件，自动写注释太香了
写注释这件事，做了10年前端了，从来没真正喜欢过。
不是不会写，是不想写——特别是接手别人的烂代码，每行都要猜"这到底在干嘛"。
上周试了一下让 AI 来写注释，结果一发不可收拾。1天时间，我做了一个 VSCode 插件，选中代码 → 右键 → AI 自动生成注释。
效果怎么样？看下面这段代码改造前后：
之前：
const a = items.filter(x => x.status === 'active')
.sort((a, b) => b.priority - a.priority)
.slice(0, 5);
选中→右键→「AI生成注释」之后：
// 从活跃项目中按优先级排序，取前5条
const a = items.filter(x => x.status === 'active')
.sort((a, b) => b.priority - a.priority)
.slice(0, 5);
舒服了。
为什么做这个插件
10年前端，平时写 React、Node、各种工具脚本。遇到过太多不写注释的代码，也写过太多"以后补注释"然后永远没补的代码。
AI 出来后我一直在想：能不能让它帮我们干这件事？
试了几个已有的方案：
- 某些在线工具：还要复制粘贴，麻烦
- ChatGPT：手动对话，更麻烦
- 已有的 VSCode 插件：要么太慢，要么质量不行
所以干脆自己做一个。
技术实现
技术栈非常简单：
- VSCode 插件：Node.js，官方脚手架
- AI 接口：DeepSeek API（速度快，而且便宜，百万token只要几块钱）
核心流程就三步：
// 1. 用户选中代码 → 右键点击
// 2. 调用 AI API 生成注释
// 3. 把注释插入到代码上方
整个插件主体代码只有 200 行。
最难的部分：写 Prompt
要让 AI 生成"好的注释"，不能太啰嗦，也不能太简单。我试了十几种 Prompt 才找到平衡点：
你是一个资深前端工程师，请为以下代码生成简洁的中文注释。
只返回注释内容，不要多余的解释。
关键参数调了几项：
- temperature: 0.3（温度越低，输出越稳定）
- max_tokens: 1024（防止生成太多废话）
- 语言按 VSCode 配置自适应（中文/英文都能无缝切换）
三种使用方式
① 选中代码生成注释
选中代码 → 右键 → 「AI 生成注释」（简洁）/ 「AI 生成详细注释」（JSDoc）→ AI 自动插入。
② 全文件批量注释
右键 → 「AI 为整个文件添加注释」→ 插件自动扫描未注释的函数，批量生成，一次最多处理 5 个。
③ 保存时自动补注释
设置中开启 autoCommentOnSave，每次保存自动补全未注释的函数。懒人专属。
效果实测
拿公司项目测了一下：
| 代码类型 | 生成速度 | 注释质量 |
|---|---|---|
| 简单函数 | < 1 秒 | ⭐⭐⭐⭐⭐ 直接可用 |
| React 组件 | 1-2 秒 | ⭐⭐⭐⭐ 偶尔调几个字 |
| 复杂逻辑 | 2-3 秒 | ⭐⭐⭐⭐ 基本能用 |
| CSS/样式 | < 1 秒 | ⭐⭐⭐⭐⭐ 完美 |
90% 的场景，生成的注释直接可用，改几个字就行。比起从零开始写，省了 90% 的时间。
回头看这个插件
做这个插件花了不到一天，收获却很大：
- AI 写注释是真的香 — 不是花架子，是能实实在在节省时间的工具
- 小工具也能有大价值 — 有时候解决一个具体的小痛点，比做大而全的产品更有用
- VSCode 插件开发比想象中简单 — 官方文档完善，脚手架一键生成
安装使用
插件已开源，完全免费：
- GitHub 仓库：github.com/kunjingzhu/…
- 下载安装：去 Releases 页面 下载最新的
.vsix文件 - VSCode 安装：扩展 → 右上角
...→ 从 VSIX 安装
⚠️ 需要先设置 DeepSeek API Key。去 deepseek.com 注册，送 500 万 token 免费额度，够写几万行注释了。网址：platform.deepseek.com/
📦 已上架 VSCode 商店 → 搜索 AI 注释生成器 或点此链接安装：marketplace.visualstudio.com/items?itemN…
后续计划
目前还是 MVP 版本，接下来计划加的：
- 更多语言支持（Go、Rust、Java）
- 自定义注释风格模板
- 纯离线模式（本地模型）
你觉得 AI 写注释靠谱吗？有没有想让 AI 帮你做的事？欢迎评论交流 👇
如果觉得有用，欢迎去 GitHub 点个 Star ⭐ 支持一下，让更多人看到这个项目！
