我正在参加 Trae「超级体验官」创意实践征文, 本文所使用的 Trae 免费下载链接:https://www.trae.ai/?utm_source=juejin&utm_medium=juejin_trae&utm_campaign=techcall

开篇:AI浪潮下的程序员

自2023年初GPT-3.5引领LLM(大型语言模型)热潮以来,AI技术已深刻影响了各个行业,引发了业务流程和工作模式的革新。AI技术的融入,无疑为各领域带来了效率提升和结构变革。对于身为程序员的我们来说,AI的快速发展无疑带来了接连不断的挑战与机遇。以下图表概述了从2023年至2025年AI发展的主要趋势,仅供参考。

AI技术发展全景图

在当前AI技术快速发展的背景下,AI技术主要呈现出三大发展方向:大语言模型、AI IDE工具和智能编程助手。下面这张流程图展示了AI技术在开发领域的主要应用和发展脉络:

Trae:引领国产AI IDE新纪元

作为程序员的得力助手,Trae 正在重新定义开发体验。这款由字节跳动 IDE 团队精心打造的 AI IDE 不仅是对标国际产品 Cursor 的中国方案,更是一次突破性的技术创新。

Trae 的核心优势:

  • 技术创新:作为首款由中国团队自主研发的基于 VSCode 内核的 AI IDE,Trae 完美融合了 VSCode 的成熟生态和前沿 AI 技术
  • 本土化优势:深度理解中国开发者需求,提供更贴近本土开发场景的智能辅助功能
  • 全栈支持:从前端到后端,从移动开发到桌面应用,Trae 为各类开发场景提供全方位支持
  • 持续进化:依托字节跳动强大的技术实力,Trae 正在持续优化和升级,不断提升开发体验

基础篇: Trae全场景

Trae IDE 生态系统:打造智能开发新范式

在现代软件开发领域,Trae IDE 通过其完整的功能生态,正在重新定义开发体验。让我们通过这张思维导图来深入了解 Trae 的核心优势:

四大核心能力详解

  1. 卓越的编码能力

    • 多语言支持:从前端到后端,从移动到桌面,全方位语言覆盖
    • 智能补全:基于上下文的智能代码提示,提升编码效率
    • 代码生成:一键生成标准代码模板,告别重复劳动
  2. 革命性的AI能力

    • Chat模式:像聊天一样解决编程问题
    • Builder模式:AI驱动的项目脚手架,快速启动开发
    • 行内对话:随时随地获取AI建议,编码更流畅
  3. 专业的工具链集成

    • 版本控制:无缝集成Git等主流版本控制系统
    • 调试工具:强大的断点调试和性能分析能力
    • 插件系统:丰富的插件生态,按需扩展功能
  4. 高效的团队协作

    • 代码评审:规范的代码审查流程,保证代码质量
    • 实时协作:支持多人同时编辑,提升团队效率
    • 知识分享:内置文档系统,促进团队知识沉淀
使用场景示例
  • 个人开发者:利用AI能力快速学习新技术,提高编码效率
  • 小型团队:通过协作功能实现高效的远程协同开发
  • 大型企业:借助完整工具链打造规范的开发流程

如下图所示,我们展示的是Trae 这款IDE 的界面介绍

Trae 语言支持

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

这里我要说的是, 其实官方给的这些支持语言并不全, 比如我们在下文所讲到的地方, Trae 给了我以上语言中的另外一种语言 — glsl 语言, 我只想说 Trae 你到底还有多少东西我没有get 到的呢?

地区支持

截止到本文编写之时,目前 Trae 支持的地区如下图所示,因此在登录该编辑器时记得先爬梯子,然后翻墙才可以哦!!

进阶篇: Trae新玩法

基础的使用,类似于使用Builder 模式从零到一 搭建一个项目, 使用Chat 模式修复代码, 或者完成某个代码段的优化等等,教程太多了,本篇文章就不过多的讲解了, 感兴趣的话可以去看我这篇文章从零到一:用Trae轻松编写你的第一个浏览器插件

Trae 程序员的指导名师

作为一名程序员,我们常常需要在网络上寻找各种技术知识点,这可能是项目需求,也可能是个人技能提升的一部分。然而,搜索和查找资料的过程往往耗时且效率不高。此外,官方文档虽然权威,但有时内容覆盖并不全面,这可能会增加我们的学习曲线。这也是我决定写本篇文章的原因,

事情是这样的我司最近要实现一个功能,主要的需求如下:

对一张图片进行处理分别实现: 图片的自然色, 图片去雾,图片锐化,图片反色,图片老照片等效果。经过技术调研决定使用 pixi.js中的着色器功能。

但是我此前从未使用过该插件及功能。 于是我尝试的使用Trae 为我解决当前的问题。

具体实现

如下图所示我们需要在Trea 编辑器中创建一个 以.md 结尾的文件。

接下来,我们选择Builder模式,选择该文件并输入以下内容:

vue3项目中,我需要使用pixi.js 中的着色器对已有的图片进行操作, 如自然, 去雾,锐化,黑白色,反色, 等如和实现, 以及关于pixi.js 中关于着色器相关的知识点, 请详细讲解, 我是个小白 ,对于自然, 去雾,锐化,黑白色,反色, 等图片操作 给出完整示例代码 以及详细讲解

此时我们等待Trae为我们分析并讲解相关内容即可,当内容生成完成之后,我们点击全部接受 , 然后开始阅读该文档,如下图所示

进一步完善文档

第一次文档生成之后 通过查看可能会存在不满意的地方,此时我们可以继续提问,来完善文档。如下图所示

通过尝试文档终于完善了, 但是此时又出现了新的问题, 文档中的某个地方的讲解我依旧不是很理解,此时我们就可以使用 Chat 模式来完善我们的文档

Chat 模式优化局部内容

如下图所示,我们选择需要修改的代码,并选择Chat模式, 输入框内提出自己的优化内容

如下图所示,优化完成之后,点击应用即可完美替换我们需要更改的内容, 此外对话中还给出了使用示例。

如此往复逐渐的完善了我们的文档

行内对话

另一种情况,如果我们需要再这个文档中增加新的知识点了, 此时只需要使用Trae 的行内对话即可,如下图所示

此时一直按Tab键即可补全内容

如果感觉此时的内容不够充分,我们可以重复 Chat 模式优化局部内容 来进一步完善文档内容

效果展示

通过 文档的学习,最终实现的demo 如下图所示

升华篇:Trae优化建议

主题色控制

如下图所示目前Trae 中只存在三种主题色,但是这三种主题色过于经典了,我希望可以有更多的主题色供我选择

开放性

对于Trae 里面的一些插件设置,及开发原则我希望的可以有更多的参考教程,这里不局限于插件市场 中的插件开发, 比如主题色的自定义开发等

内置插件可选择性

如下图所示,每次项目运行或者热更新的时候 都会提示该对话框,当我想禁止该对话框时,却找到禁用的地方。

导入配置

如下图所示从 VS Code或者Cursor中导入的配置,应该存在可选项, 比如全部导入或者选择性导入

创新与突破:期待Trae的下一步

通过本次实践,我深刻体会到了 Trae 在提升开发效率方面的独特优势。从图片处理到代码优化,从文档生成到知识分享,Trae 展现出了强大的 AI 辅助编程能力。期待 Trae 在未来能够带来更多突破性的创新,为中国开发者提供更好的 AI 编程体验。

正如本文展示的 PixiJS 着色器案例,Trae 不仅能够帮助我们解决具体的编程问题,更重要的是它正在重新定义程序员与 AI 的协作方式。让我们共同期待 Trae 的下一步发展,见证它在 AI IDE 领域创造更多可能

原文地址

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐