
颠覆常规Trae IDE教你如何用新玩法打造超级知识体系
我正在参加 Trae「超级体验官」创意实践征文, 本文所使用的。
我正在参加 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 的核心优势:
四大核心能力详解
-
卓越的编码能力
- 多语言支持:从前端到后端,从移动到桌面,全方位语言覆盖
- 智能补全:基于上下文的智能代码提示,提升编码效率
- 代码生成:一键生成标准代码模板,告别重复劳动
-
革命性的AI能力
- Chat模式:像聊天一样解决编程问题
- Builder模式:AI驱动的项目脚手架,快速启动开发
- 行内对话:随时随地获取AI建议,编码更流畅
-
专业的工具链集成
- 版本控制:无缝集成Git等主流版本控制系统
- 调试工具:强大的断点调试和性能分析能力
- 插件系统:丰富的插件生态,按需扩展功能
-
高效的团队协作
- 代码评审:规范的代码审查流程,保证代码质量
- 实时协作:支持多人同时编辑,提升团队效率
- 知识分享:内置文档系统,促进团队知识沉淀
使用场景示例
- 个人开发者:利用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 领域创造更多可能
更多推荐
所有评论(0)