登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

豆瓜网 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 科技 ›零基础用Trae开发VS Code插件，其实很简单 ...

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

要燥 2025-8-23 11:01:32
零基础用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，然后它就开始自动帮我生成代码了。整个过程就像和一个经验丰富的程序员聊天一样简单。
1.png

2.png

3.png

4.png

5.png

6.png

很快，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还会继续优化，直到符合要求为止。当然，偶尔也会有需要我们手动调整的情况，但这种情况很少。
7.png

8.png

9.png

10.png

11.png

12.png

13.png

打包插件：四步搞定

代码写好后，接下来需要把它打包成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 发布！

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除
基础Trae开发VSCode

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
要燥
2025-8-23 11:01:32

0

粉丝关注

17

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫