什么是Trae
Trae（中国区： https://www.trae.com.cn/?utm_source=school&utm_medium=oncam&utm_campaign=visactor ，海外版：https://www.trae.ai/ ），致力于成为真正的 AI 工程师（The Real Al Engineer）。Trae 旗下的 AI IDE 产品，以智能生产力为核心，无缝融 入你的开发流程，与你默契配合，更高质量、高效率完成每一个任务。
什么上下文Doc 功能
指定上下文可以让 AI 助手提供更精准的回答，但是大模型对一个组件的理解的实时程度是低于组件自己的官方文档的。如果我们在使用一个不熟悉的组件的时候，如果能将该组件的相关文档引入到上下文中，可以大大的提升智能化编程水平。
Trae 使用 “#” 来指定上下文。
输入“#Doc：”，可以索引文档集。 我们添加VisActor 的文档，进行测试。 目前Trae 还没有内置任何文档集，所以需要手动添加。
首先添加文档集：
这里我们通过url的方式添加各组件的入口url：
-
....
整个过程略微缓慢，但是索引效果，明显好于 Cursor。
下面我们实地测试一下引用文档作为上下文是否会给编程带来实际的益处。
效果测试
创建测试项目
我们创建一个最简单web 项目
npm create vite@latest my-ts-web -- --template typescript
cd my-ts-web
实践验证
新增一个线图
我们要求Trae 生成一段代码，在当前文件中添加一个VChart 线图。
生成的结果还是有错误的。
我们下面引入文档，看看是不是会有所改变。
重新生成的代码修复了之前的api 错误调用。
生成了一个正确的线图。
加大难度
首先我们来修改数据，显示三条线。
问题的分析和答案都比较靠谱：
主要修改点：
-
重构了数据结构，使用type字段来区分不同系列
-
使用seriesField来指定系列的分类字段
-
每个数据点包含year（x轴）、value（y轴）和type（系列）三个字段
修改入场动画效果：
主要修改：
-
添加了animation配置
-
appear设置入场动画为fadeIn（淡入淡出）
-
duration设置动画持续时间为1000毫秒
结果如下：
更多问答
因为有了官方文档，我们可以让Trae 回答更多类型的问题，不只是代码本身。
比如基本的图表概念：
或者 具体用法：
导航到更相关文档：
简单总结
Trae 结合文档有如下好处：
- 提升开发效率
-
快速访问：通过Marscode直接查阅VisActor API文档
-
智能提示：基于VisActor文档的精准代码补全
- 增强开发体验
-
无缝集成：在开发环境中直接获取VTable使用指导
-
实时反馈：快速验证代码效果
- 降低学习成本
-
文档辅助：随时查阅VisActor官方示例
-
代码生成：自动生成符合VisActor规范的代码
- 提高代码质量
-
规范检查：确保代码符合VisActor最佳实践
-
性能优化：自动生成高性能表格配置
联系我们
github ：github.com/VisActor
VisActor 微信订阅号留言（可以通过订阅号菜单加入微信群）：
VisActor 官网：www.visactor.io/ ； www.visactor.com
飞书群：
discord：https://discord.com/invite/3wPyxVyH6m
The doc is contributed by 玄魂