<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>AI注释 on 老朱的赛博工位</title><link>https://blog.zjkun.top/tags/ai%E6%B3%A8%E9%87%8A/</link><description>Recent content in AI注释 on 老朱的赛博工位</description><generator>Hugo</generator><language>zh-CN</language><lastBuildDate>Tue, 20 Oct 2026 22:15:00 +0800</lastBuildDate><atom:link href="https://blog.zjkun.top/tags/ai%E6%B3%A8%E9%87%8A/index.xml" rel="self" type="application/rss+xml"/><item><title>搭站第二天：1天手搓的 VSCode AI 注释插件，正式介绍一下</title><link>https://blog.zjkun.top/posts/%E6%90%AD%E7%AB%99%E7%AC%AC%E4%BA%8C%E5%A4%A91%E5%A4%A9%E6%89%8B%E6%90%93%E7%9A%84-vscode-ai-%E6%B3%A8%E9%87%8A%E6%8F%92%E4%BB%B6%E6%AD%A3%E5%BC%8F%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8B/</link><pubDate>Tue, 20 Oct 2026 22:15:00 +0800</pubDate><guid>https://blog.zjkun.top/posts/%E6%90%AD%E7%AB%99%E7%AC%AC%E4%BA%8C%E5%A4%A91%E5%A4%A9%E6%89%8B%E6%90%93%E7%9A%84-vscode-ai-%E6%B3%A8%E9%87%8A%E6%8F%92%E4%BB%B6%E6%AD%A3%E5%BC%8F%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8B/</guid><description>ai-comment-gen：选中代码右键一键 AI 生成注释的 VSCode 插件，开源免费，基于 DeepSeek，主体代码 200 行，附 Prompt 调参和实测数据</description><content:encoded><![CDATA[<p>开站第一篇说了这个站要写什么，今天进入正题。第一期写自己手搓的小工具——<strong><a href="https://github.com/kunjingzhu/ai-comment-gen">ai-comment-gen</a></strong>，一个 VSCode 插件：选中代码 → 右键 → AI 自动生成注释。掘金上发过开发记录，这篇是站在博客视角的完整版介绍。</p>
<h2 id="为什么做这个">为什么做这个</h2>
<p>写注释这件事，做了 10 年前端，从来没真正喜欢过。不是不会写，是不想写——特别是接手别人的烂代码，每行都要猜&quot;这到底在干嘛&quot;；也写过太多&quot;以后补注释&quot;然后永远没补的代码。</p>
<p>AI 出来后我一直在想：能不能让它把这事干了？试过的已有方案都不解渴：在线工具要复制粘贴，ChatGPT 手动对话更麻烦，现成插件要么太慢要么质量不行。所以干脆自己做一个——<strong>1 天时间，做出来了。</strong></p>
<h2 id="效果长什么样">效果长什么样</h2>
<p>最直接，看一段代码改造前后：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 之前：盯半天
</span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">a</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">filter</span>(<span style="color:#a6e22e">x</span> =&gt; <span style="color:#a6e22e">x</span>.<span style="color:#a6e22e">status</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;active&#39;</span>)
</span></span><span style="display:flex;"><span>  .<span style="color:#a6e22e">sort</span>((<span style="color:#a6e22e">a</span>, <span style="color:#a6e22e">b</span>) =&gt; <span style="color:#a6e22e">b</span>.<span style="color:#a6e22e">priority</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">a</span>.<span style="color:#a6e22e">priority</span>)
</span></span><span style="display:flex;"><span>  .<span style="color:#a6e22e">slice</span>(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">5</span>);
</span></span></code></pre></div><p>选中 → 右键 →「AI 生成注释」之后：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 从活跃项目中按优先级排序，取前5条
</span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">a</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">items</span>.<span style="color:#a6e22e">filter</span>(<span style="color:#a6e22e">x</span> =&gt; <span style="color:#a6e22e">x</span>.<span style="color:#a6e22e">status</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;active&#39;</span>)
</span></span><span style="display:flex;"><span>  .<span style="color:#a6e22e">sort</span>((<span style="color:#a6e22e">a</span>, <span style="color:#a6e22e">b</span>) =&gt; <span style="color:#a6e22e">b</span>.<span style="color:#a6e22e">priority</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">a</span>.<span style="color:#a6e22e">priority</span>)
</span></span><span style="display:flex;"><span>  .<span style="color:#a6e22e">slice</span>(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">5</span>);
</span></span></code></pre></div><p>舒服了。</p>
<h2 id="三种使用方式">三种使用方式</h2>
<ol>
<li><strong>选中生成</strong>：右键「AI 生成注释」出简洁一句话；「AI 生成详细注释」出 JSDoc / docstring</li>
<li><strong>整文件批量</strong>：右键「AI 为整个文件添加注释」，自动扫描未注释的函数逐个生成，一次最多 5 个（可配），防止手滑烧穿配额</li>
<li><strong>保存时自动补</strong>：设置里勾 <code>autoCommentOnSave</code>，每次保存自动补全未注释的函数——懒人专属</li>
</ol>
<p>语言上自动匹配注释风格：JS/TS 用 <code>//</code> 和 <code>/** */</code>、CSS/SCSS/Less 用 <code>/* */</code>、HTML/Vue 模板用 <code>&lt;!-- --&gt;</code>、Python/Ruby 用 <code>#</code> 和 <code>&quot;&quot;&quot;docstring&quot;&quot;&quot;</code>；中英文在设置里一切换就行。</p>
<h2 id="技术实现主体代码-200-行">技术实现（主体代码 200 行）</h2>
<p>技术栈简单到寒酸：Node.js + 官方脚手架 + DeepSeek API（速度快、便宜，百万 token 几块钱）。核心流程就三步：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">// 1. 用户选中代码 → 右键点击
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// 2. 调用 AI API 生成注释
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// 3. 把注释插入到代码上方
</span></span></span></code></pre></div><p>真正花时间的地方：</p>
<ul>
<li><strong>Prompt 是灵魂</strong>。要注释&quot;不啰嗦也不废话&quot;，试了十几种 Prompt 才找到平衡点，大意是：</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-fallback" data-lang="fallback"><span style="display:flex;"><span>你是一个资深前端工程师，请为以下代码生成简洁的中文注释。
</span></span><span style="display:flex;"><span>只返回注释内容，不要多余的解释。
</span></span></code></pre></div><ul>
<li><strong>temperature: 0.3 + max_tokens: 1024</strong>。温度越低输出越稳不跑偏，限长防止 AI 开始抒情。</li>
<li><strong>API 走 OpenAI 兼容格式</strong>，<code>apiUrl</code> 和 <code>model</code> 都是配置项，默认 DeepSeek，想换任何兼容端点都行。</li>
<li><strong>注释插回编辑器走 WorkspaceEdit</strong>——选区行号会动态变，直接改文本必崩，这是 VSCode 扩展 API 给的第一课。</li>
</ul>
<h2 id="效果实测">效果实测</h2>
<p>拿公司项目测的：</p>
<table>
	<thead>
			<tr>
					<th>代码类型</th>
					<th>生成速度</th>
					<th>注释质量</th>
			</tr>
	</thead>
	<tbody>
			<tr>
					<td>简单函数</td>
					<td>&lt; 1 秒</td>
					<td>⭐⭐⭐⭐⭐ 直接可用</td>
			</tr>
			<tr>
					<td>React 组件</td>
					<td>1-2 秒</td>
					<td>⭐⭐⭐⭐ 偶尔调几个字</td>
			</tr>
			<tr>
					<td>复杂逻辑</td>
					<td>2-3 秒</td>
					<td>⭐⭐⭐⭐ 基本能用</td>
			</tr>
			<tr>
					<td>CSS/样式</td>
					<td>&lt; 1 秒</td>
					<td>⭐⭐⭐⭐⭐ 完美</td>
			</tr>
	</tbody>
</table>
<p><strong>90% 的场景生成的注释直接可用</strong>，改几个字就行，比从零写省 90% 时间。</p>
<h2 id="但要泼一句冷水">但要泼一句冷水</h2>
<p>AI 只配写&quot;是什么&quot;，<strong>&ldquo;为什么&quot;必须你自己写</strong>——它不知道这段 workaround 在绕哪个坑、那个魔法数字是谁拍板的。也别贪多开全文件模式量产 <code>i++ // i 自增 1</code> 式噪音：错的注释比没注释更毒，它会以&quot;文档的权威&quot;误导下一个读代码的人，包括半年后的你。我自己的用法：只对&quot;接手区&quot;选择性生成，what 收下，why 自己补。</p>
<h2 id="回头看这-1-天">回头看这 1 天</h2>
<ul>
<li><strong>AI 写注释是真的香</strong>——不是花架子，是实实在在省时间的工具</li>
<li><strong>小工具也能有大价值</strong>——解决一个具体小痛点，比做大而全的产品更有用</li>
<li><strong>VSCode 插件开发比想象中简单</strong>——官方文档完善，脚手架一键生成</li>
</ul>
<h2 id="安装">安装</h2>
<p>开源、免费，两个渠道：</p>
<ul>
<li><strong>VSCode 插件商店</strong>：搜 <code>AI 注释生成器</code> 或 <code>ai-comment-gen</code>（已上架）</li>
<li><strong>GitHub</strong>：<a href="https://github.com/kunjingzhu/ai-comment-gen">kunjingzhu/ai-comment-gen</a>（MIT），Releases 下载 <code>.vsix</code> → 扩展 → 右上角 <code>...</code> → 从 VSIX 安装</li>
</ul>
<blockquote>
<p>⚠️ 需要自备 DeepSeek API Key（platform.deepseek.com 注册，新用户送 500 万 token 额度，够写几万行注释）</p>
</blockquote>
<p>后续计划：更多语言（Go、Rust、Java）、自定义注释风格模板、纯离线模式（本地模型）。觉得有用，去 GitHub 点个 Star ⭐ 让更多人看到。</p>
<hr>
<p><em>本文属于「AI 开发工具」系列。开发过程的完整记录见掘金同名文章，这个博客之后会放更细的实现拆解。</em></p>
]]></content:encoded></item></channel></rss>