零基础用Trae开发VS Code插件，其实很简单

零基础用Trae开发VS Code插件，其实很简单

先聊聊Trae：AI编程助手到底是什么？

不知道你有没有听说过Trae这个工具？简单来说，它就是一个能帮你写代码的AI助手。
想象一下：你只需要把需求说清楚，它就能自动生成完整的代码；遇到bug了，你直接问它，它还能帮你调试、修复，甚至自动写测试用例验证修复效果。
今天跟大家分享一个真实案例——我是怎么用Trae从零开发一个VS Code插件的。
我们要做什么？自定义Markdown格式化工具

先聊聊需求吧。很多朋友在处理Markdown文档时，可能都遇到过这样的问题：从一些文档平台导出的Markdown文件，会带着字体样式等额外信息，导入到其他编辑器或博客系统后，排版看起来总是不太规整，而普通的格式化工具又无法完全解决这些个性化需求。
所以就有了做一个个性化Markdown格式化工具的想法，主要功能包括：
1. 按自定义规则清理内容

• 删掉那些特定的HTML标签（比如标签，会让文档排版显得凌乱、影响阅读体验）
  
• 移除多余的符号（像**这种加粗符号，根据需求进行处理）
  
• 清理标题里的序号（把### 1.2 标题变成干净的### 标题）
  
• 删除所有的分隔线（比如---）
  

2. 智能处理换行和空行

• 不管你用Windows还是Linux系统，换行符都能正常处理
  
• 自动在标题后面加空行，让文档看起来更舒服
  
• 在代码块前后也加上空行，方便阅读
  
• 调整列表项之间的间距，保持一致性
  

3. 控制空行数量

• 把多个连续的空行合并成一个
  
• 确保不同内容之间有合适的间距
  

简单举个例子

比如有一段这样的内容：

1. ### 1.2 标题
2. <font color=red>红色文字</font>
3. **加粗内容**
4. ---

复制代码

格式化后就变成了：

1. ### 标题
3. 红色文字
4. 加粗内容

复制代码

是不是清爽多了？
用Trae开发：从需求到代码，其实很简单

接下来，就用Trae来实现这个插件。
首先，我把上面的需求描述清楚告诉Trae，然后它就开始自动帮我生成代码了。整个过程就像和一个经验丰富的程序员聊天一样简单。

很快，Trae就帮我生成了完整的项目结构：

1. markdown-formatter  # 项目目录
2. │  .gitignore        # 告诉Git哪些文件不用提交
3. │  .vscodeignore     # 告诉VS Code哪些文件不用打包到插件里
4. │  debug-helper.js   # 调试辅助工具
5. │  extension.js      # 插件的主要逻辑
6. │  formatter.js      # 核心格式化功能
7. │  package.json      # 插件配置文件
8. │  README.md         # 插件说明文档
9. │  test-format.js    # 测试脚本
10. │  test.md           # 测试用的Markdown文件
11. │
12. └─.vscode           # VS Code配置目录
13.         launch.json  # 调试配置
14.         tasks.json   # 任务配置

复制代码

代码修改：有问题直接问Trae

Trae生成的代码已经很完整了，但有时候我们可能需要做一些调整。这时候，你只需要直接问Trae就行。
比如，我发现某个功能实现得不太对，就可以直接说："Trae，我发现代码中有个问题，这个地方应该怎么修改？"
Trae会立刻理解我的问题，然后给出具体的修改建议。
更厉害的是，Trae还会自动帮我写测试用例来验证修改是否正确。比如它自动生成了test-merge-lines.js这个测试脚本，用来测试合并空行的功能。
如果第一次修改没达到预期，Trae还会继续优化，直到符合要求为止。当然，偶尔也会有需要我们手动调整的情况，但这种情况很少。

打包插件：四步搞定

代码写好后，接下来需要把它打包成VS Code能安装的插件。步骤也很简单：

• 安装打包工具：打开终端，输入npm install -g vsce，按回车安装VSCE工具
  
• 执行打包命令：在项目文件夹里打开终端，输入vsce package开始打包
  
• 安装插件：打开VS Code，点击插件市场右上角的"..."，选择"Install from VSIX..."，找到刚才生成的.vsix文件
  
• 重启VS Code：安装完成后，重启VS Code让插件生效
  

测试插件：看看效果如何

插件安装好后，我们来测试一下实际效果。
打开一个Markdown文件，点击右键，选择"Format Markdown Document"，就能看到格式化的效果了。
遇到问题怎么办？这里有解决方案

开发过程中，遇到了一个小问题：按F5启动调试的时候，在调试窗口里找不到格式化命令。
因为是使用Trae开发的插件，猜测可能是Trae和VS Code的API兼容性问题导致的。
解决方法也很简单：直接跳过调试环节，按照上面的步骤打包成VSIX文件，然后安装使用就可以了。
如果遇到类似问题，你也可以尝试跳过中间步骤，直接进行打包安装。
总结：用Trae开发插件，真的很省心

对于没有太多开发经验的人来说，用Trae开发VS Code插件真的是一个很好的选择。你不需要记住复杂的API，也不需要担心代码结构问题，只需要把需求说清楚，剩下的交给Trae就好。
如果你也想开发一个属于自己的VS Code插件，不妨试试用Trae来辅助。相信我，它会让你的开发过程变得轻松愉快很多！
最后附上项目地址：https://github.com/zmyAI/vscode-plugin/markdown-formatter

本文由博客一文多发平台 OpenWrite 发布！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！