零基础用Trae开发VS Code插件，其实很简单
<h1 id="零基础用trae开发vs-code插件其实很简单">零基础用Trae开发VS Code插件，其实很简单</h1><h2 id="先聊聊traeai编程助手到底是什么">先聊聊Trae：AI编程助手到底是什么？</h2>
<p>不知道你有没有听说过Trae这个工具？简单来说，它就是一个能帮你写代码的AI助手。</p>
<p>想象一下：你只需要把需求说清楚，它就能自动生成完整的代码；遇到bug了，你直接问它，它还能帮你调试、修复，甚至自动写测试用例验证修复效果。</p>
<p>今天跟大家分享一个真实案例——我是怎么用Trae从零开发一个VS Code插件的。</p>
<h2 id="我们要做什么自定义markdown格式化工具">我们要做什么？自定义Markdown格式化工具</h2>
<p>先聊聊需求吧。很多朋友在处理Markdown文档时，可能都遇到过这样的问题：从一些文档平台导出的Markdown文件，会带着字体样式等额外信息，导入到其他编辑器或博客系统后，排版看起来总是不太规整，而普通的格式化工具又无法完全解决这些个性化需求。</p>
<p>所以就有了做一个个性化Markdown格式化工具的想法，主要功能包括：</p>
<h3 id="1-按自定义规则清理内容">1. 按自定义规则清理内容</h3>
<ul>
<li>删掉那些特定的HTML标签（比如<code><font></code>标签，会让文档排版显得凌乱、影响阅读体验）</li>
<li>移除多余的符号（像<code>**</code>这种加粗符号，根据需求进行处理）</li>
<li>清理标题里的序号（把<code>### 1.2 标题</code>变成干净的<code>### 标题</code>）</li>
<li>删除所有的分隔线（比如<code>---</code>）</li>
</ul>
<h3 id="2-智能处理换行和空行">2. 智能处理换行和空行</h3>
<ul>
<li>不管你用Windows还是Linux系统，换行符都能正常处理</li>
<li>自动在标题后面加空行，让文档看起来更舒服</li>
<li>在代码块前后也加上空行，方便阅读</li>
<li>调整列表项之间的间距，保持一致性</li>
</ul>
<h3 id="3-控制空行数量">3. 控制空行数量</h3>
<ul>
<li>把多个连续的空行合并成一个</li>
<li>确保不同内容之间有合适的间距</li>
</ul>
<h3 id="简单举个例子">简单举个例子</h3>
<p>比如有一段这样的内容：</p>
<pre><code>### 1.2 标题
<font color=red>红色文字</font>
**加粗内容**
---
</code></pre>
<p>格式化后就变成了：</p>
<pre><code>### 标题
红色文字
加粗内容
</code></pre>
<p>是不是清爽多了？</p>
<h2 id="用trae开发从需求到代码其实很简单">用Trae开发：从需求到代码，其实很简单</h2>
<p>接下来，就用Trae来实现这个插件。</p>
<p>首先，我把上面的需求描述清楚告诉Trae，然后它就开始自动帮我生成代码了。整个过程就像和一个经验丰富的程序员聊天一样简单。</p>
<p><img alt="trae-develop1" loading="lazy" src="https://cdn.jsdelivr.net/gh/zmyAI/image-cdn@5e4bf9f/trae-plugin/trae-develop1.png" class="lazyload"><br>
<img alt="trae-develop2" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195057355-561860078.png" class="lazyload"><br>
<img alt="trae-develop3" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195741625-1248256786.png" class="lazyload"><br>
<img alt="trae-develop4" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195751433-1694949607.png" class="lazyload"><br>
<img alt="trae-develop5" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195752438-1139241961.png" class="lazyload"><br>
<img alt="trae-develop6" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195753291-1993587481.png" class="lazyload"></p>
<p>很快，Trae就帮我生成了完整的项目结构：</p>
<pre><code>markdown-formatter# 项目目录
│.gitignore # 告诉Git哪些文件不用提交
│.vscodeignore # 告诉VS Code哪些文件不用打包到插件里
│debug-helper.js # 调试辅助工具
│extension.js # 插件的主要逻辑
│formatter.js # 核心格式化功能
│package.json # 插件配置文件
│README.md # 插件说明文档
│test-format.js # 测试脚本
│test.md # 测试用的Markdown文件
│
└─.vscode # VS Code配置目录
launch.json# 调试配置
tasks.json # 任务配置
</code></pre>
<h2 id="代码修改有问题直接问trae">代码修改：有问题直接问Trae</h2>
<p>Trae生成的代码已经很完整了，但有时候我们可能需要做一些调整。这时候，你只需要直接问Trae就行。</p>
<p>比如，我发现某个功能实现得不太对，就可以直接说："Trae，我发现代码中有个问题，这个地方应该怎么修改？"</p>
<p>Trae会立刻理解我的问题，然后给出具体的修改建议。</p>
<p>更厉害的是，Trae还会自动帮我写测试用例来验证修改是否正确。比如它自动生成了<code>test-merge-lines.js</code>这个测试脚本，用来测试合并空行的功能。</p>
<p>如果第一次修改没达到预期，Trae还会继续优化，直到符合要求为止。当然，偶尔也会有需要我们手动调整的情况，但这种情况很少。</p>
<p><img alt="trae-debug1" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195754098-263069179.png" class="lazyload"><br>
<img alt="trae-debug2" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195754920-1756104474.png" class="lazyload"><br>
<img alt="trae-debug3" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195755961-1625947525.png" class="lazyload"><br>
<img alt="trae-debug4" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195757319-120918813.png" class="lazyload"><br>
<img alt="trae-debug5" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195758195-1524737823.png" class="lazyload"><br>
<img alt="trae-debug6" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195759033-1429696394.png" class="lazyload"><br>
<img alt="trae-debug7" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250822195800061-840037390.png" class="lazyload"></p>
<h2 id="打包插件四步搞定">打包插件：四步搞定</h2>
<p>代码写好后，接下来需要把它打包成VS Code能安装的插件。步骤也很简单：</p>
<ol>
<li><strong>安装打包工具</strong>：打开终端，输入<code>npm install -g vsce</code>，按回车安装VSCE工具</li>
<li><strong>执行打包命令</strong>：在项目文件夹里打开终端，输入<code>vsce package</code>开始打包</li>
<li><strong>安装插件</strong>：打开VS Code，点击插件市场右上角的"..."，选择"Install from VSIX..."，找到刚才生成的.vsix文件</li>
<li><strong>重启VS Code</strong>：安装完成后，重启VS Code让插件生效</li>
</ol>
<h2 id="测试插件看看效果如何">测试插件：看看效果如何</h2>
<p>插件安装好后，我们来测试一下实际效果。</p>
<p>打开一个Markdown文件，点击右键，选择"Format Markdown Document"，就能看到格式化的效果了。</p>
<h2 id="遇到问题怎么办这里有解决方案">遇到问题怎么办？这里有解决方案</h2>
<p>开发过程中，遇到了一个小问题：按F5启动调试的时候，在调试窗口里找不到格式化命令。</p>
<p>因为是使用Trae开发的插件，猜测可能是Trae和VS Code的API兼容性问题导致的。</p>
<p>解决方法也很简单：直接跳过调试环节，按照上面的步骤打包成VSIX文件，然后安装使用就可以了。</p>
<p>如果遇到类似问题，你也可以尝试跳过中间步骤，直接进行打包安装。</p>
<h2 id="总结用trae开发插件真的很省心">总结：用Trae开发插件，真的很省心</h2>
<p>对于没有太多开发经验的人来说，用Trae开发VS Code插件真的是一个很好的选择。你不需要记住复杂的API，也不需要担心代码结构问题，只需要把需求说清楚，剩下的交给Trae就好。</p>
<p>如果你也想开发一个属于自己的VS Code插件，不妨试试用Trae来辅助。相信我，它会让你的开发过程变得轻松愉快很多！</p>
<p>最后附上项目地址：https://github.com/zmyAI/vscode-plugin/markdown-formatter</p>
<blockquote>
<p>本文由博客一文多发平台 OpenWrite 发布！</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/zhaomy2025/p/19053560
頁:
[1]