从零到一：用Trae轻松编写你的第一个浏览器插件

文章目录

• 什么是 Trae
• Trae 能力探寻
• • 功能实用性
  • 用户体验
  • 性能效率
  • • 输入方面
    • 输出方面
  • 兼容性与集成
  • 准确性
  • 社区与支持
• 安装 Trae
• • • 登录 Trae
• Trae 界面
• • AI 能力
  • 功能实用性
• 用户体验
• • 用 Trae 写一个浏览器插件
  • • 难度提升
    • 使用总结
• 性能效率
• 总结

什么是 Trae

Trae 是一款集成 AI 的编程工具，提供智能问答、代码补全和自动编程功能，以提升开发效率。它拥有完整的 IDE 功能，包括代码编写和项目管理等。AI 助手能够提供实时代码建议、生成代码片段，甚至帮你从零开始开发项目，简化编程过程。

Trae 能力探寻

一款 AI IDE 的能力取决于多个方面， 以下是我对 Trae 使用过程中总结的六个维度

功能实用性

• 功能丰富程度：涵盖代码补全、代码审查、错误检测、代码优化等常用功能。
• 特点创新性：具有独特的功能亮点，如智能代码生成、个性化编程建议等。

用户体验

• 界面设计：界面美观、简洁，操作便捷。
• 交互体验：是否支持自然语言编程，用户与产品的交互是否流畅。
• 学习成本：用户上手简单， 提供详细的帮助文档和教程，教程文档链接：https://docs.trae.ai/docs/builder?_lang=zh。

界面展示（类 vscode 界面）

在体验 AI IDE 产品时，对于开发者而言，流畅的交互体验至关重要，它直接影响到整个开发过程的舒适度和效率。

性能效率

• 运行速度：代码补全、错误检测等功能的响应速度很快。
• 资源占用：产品运行时对硬件资源的消耗情况较低，甚至是无感的。

如下图所示当项目出现问题时，会自我检测并进行修改，最终保证错误的解决

输入方面

在 Trae 中用 #符号 对文件进行引用　,从而更加准确的让Trae 知道需求所在的代码位置

输出方面

Prompt 输入之后 Trae 的交互体验尤其丝滑，从项目的创建到依赖的安装，以及代码层的实现，完全不需要我敲一行代码。

兼容性与集成

• 兼容性：支持多种编程语言和开发环境， 详细可以参考下文中的 功能实用性 小节。
• 集成度： 可以与其他开发工具（如 IDE、代码托管平台等）无缝集成。

如下图所示在安装Trae的过程在会有导入配置这一选项，已安装VS Code或Cursor的用户，可点击“从 VS Code 导入”或“从 Cursor 导入”按钮，一键导入插件、设置和快捷键至 Tra，实现 IDE 的快速切换。

准确性

• 代码补全准确性：推荐代码的正确率和适用性。
• 错误检测能力：能够准确识别代码中的潜在问题和风险。

社区与支持

• 社区活跃度：截止到目前为止，长期在线人员有 901 人， 总人数 10536 人 。

• 技术支持：遇见的问题可以及时在交流群内反馈，并得到有效解决

让我们一同深入本章节的核心议题，共同探讨国产 AI 驱动的 IDE——它的名字是Trae。

安装 Trae

访问 Trae 链接： https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=techcall 进行 IDE 的下载

注意：在撰写本文时，Trae 尚未推出 Windows 版本。然而，通过以下截图我们可以预见，Windows 版本的 Trae 即将与用户见面，敬请大家拭目以待，满怀期待地迎接这一刻的到来。

登录 Trae

如下图所示是 Trae 默认的启动页面， 我们点击右侧的登录按钮 进行登录

注意：Trae 支持的地区如下图所示， 因此在注册过程中请选择访问国外网站哦！

登录成功如下图所示

Trae 界面

登录成功之后 Trae 界面如下图所示

探索 Trae 界面时，我们很快发现它与 VSCode 编辑器非常相似。这是因为 Trae 是基于 VSCode 二次开发而成，其底层架构由强大的 Agent workflow 提供支持。Trae 的一个显著优势是，在安装过程中，它允许用户直接导入 VSCode 插件，一键操作即可完成，极大地考虑了用户的使用习惯，体现了人性化的设计。

如图所示，左侧的侧边栏中展示的插件，正是我在 VSCode 中已经安装的。在 Trae 中，我无需重新配置这些插件，这一功能极大地节省了我的设置时间。

AI 能力

Trae 的 Ai 能力如下：

Trae 的 AI 能力为开发者提供了全方位的编程支持。Builder 模式智能读取和执行项目任务，而 Chat 模式则是一个多功能的编码助手，解答问题、生成代码等。内嵌对话保持编码连贯性，上下文感知功能确保 AI 助手提供精准帮助。多模态输入和 AI 代码补全提高编码效率，源代码管理功能则简化了版本控制。

功能实用性

Trae 是符合中文程序员的需求的，　整体界面显示都符合中文程序员操作习惯

编码需求 Trae 支持全栈开发，涵盖 JavaScript/TypeScript、HTML、CSS、Python、Java、Go、Rust、Swift、Kotlin 等语言，以及 React、Vue、Angular、Spring Boot、Django、Express 等框架，并提供智能提示和类型推导

用户体验

用 Trae 写一个浏览器插件

需求如下：

 我现在要做一个Google 的浏览器插件， 该浏览器插件的核心功能是一款贪吃蛇的游戏， 此外我不希望这款游戏中存在任何图片素材， 关于该游戏的具体开发思路我没有相关规划， 请你先帮我生成一份具体的规划，然后根据这个规划开始生成前端的相关代码，
 技术栈要求：vite/ts/vue3/支持 vue3 的 UI 框架等，我拥有相关的开发环境，需要你从创建项目到代码编写一步一步的实现功能

Trae 智能识别了我的需求，并自动启动工具进行分析。即便我跳过了某些指令，它仍能准确把握当前进度和我的意图。分析完成后，效果如下图所示。

项目完成之后又给了我关于该项目的介绍：

难度提升

基本的编码没有问题， 接下来我们开始上难度

1. 美化UI界面

  现在的UI界面不够美观， 请帮我美化一下， 需要加上计时器以及关卡等功能

注意此时我完全不去操作代码部分， 只会安装 Trae 的指示执行， 如下图所示， 我点击的是全部接收 , 但是我的编辑器界面并没有在需要修改的文件上 ， 他依旧可以识别我的意图

修改后的效果如下：

1. 发布 项目完成了，接下来我开始将其发布到插件中

现在项目很完美，我想将其发布到Google 的插件中

如下图所示 在执行 build 的过程中报错了 ， Trae 依旧可以识别并给出相关操作

经过多轮尝试 打包成功 ，并告诉我接下来应该如和操作

使用总结

1. 界面全面中文化

• 操作提示与文件说明均采用中文，贴合中文开发者的使用习惯。

1. 交互方式升级

• Trae 提供直观的文件路径创建指南，明确每个文件的具体用途与功能。
• 行数变更提示以"+xx"形式突出显示，一目了然。
• 批量操作选项包含“全部拒绝”与“全部接受”，简化决策流程。

1. 代码生成艺术

• Trae 以任务描述为引领，展现完整的功能模块说明。
• 重视业务逻辑的连贯性，确保生成的代码逻辑清晰。

1. 用户引导与提示

• 提供详尽的中文引导说明，确保用户每一步操作都有明确指导。
• 每个文件都有清晰的功能描述，操作步骤直观易懂。

性能效率

体验 Trae 通过 Google 插件的全流程开发，显著提升了开发效率。从项目启动到竣工，整个过程仅耗时不到 15 分钟，相较于个人独立开发所需时间大幅缩短。同时，项目优化也得以根据个人意愿灵活实施。

总结

我极力推荐初学者使用 Trae 来启动他们的编程之旅，并开发出符合个人需求的项目。Trae 以其低门槛的特性，让编程变得轻松有趣。 对于开发者也提供了很大的助力。 尽管 Trae 作为一款新兴的 IDE 尚有改进空间，例如当前可能需要特定的网络环境才能访问，或是对某些特定语言环境（如 HarmonyOS）的支持尚不完善，但作为一款免费软件，它的表现已经非常卓越。展望未来，我们期待 Trae 能够继续保持免费政策，因为高质量且免费的工具总是能够带来极大的使用满足感。

附上原文链接地址：https://juejin.cn/post/7471659406524399654