有了Trae 上下文doc功能，快速上手陌生组件，再也不用提oncall了

我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.com.cn/?utm_source...

什么是Trae

Trae（中国区：www.trae.com.cn/，海外版：https:... AI 工程师（The Real Al Engineer）。Trae 旗下的 AI IDE 产品，以智能生产力为核心，无缝融入你的开发流程，与你默契配合，更高质量、高效率完成每一个任务。

什么上下文Doc 功能

指定上下文可以让 AI 助手提供更精准的回答，但是大模型对一个组件的理解的实时程度是低于组件自己的官方文档的。如果我们在使用一个不熟悉的组件的时候，如果能将该组件的相关文档引入到上下文中，可以大大的提升智能化编程水平。

Trae 使用 "#" 来指定上下文。

输入"#Doc："，可以索引文档集。我们添加VisActor 的文档，进行测试。目前Trae 还没有内置任何文档集，所以需要手动添加。

首先添加文档集：

这里我们通过url的方式添加各组件的入口url：

整个过程略微缓慢，但是索引效果，明显好于 Cursor。

下面我们实地测试一下引用文档作为上下文是否会给编程带来实际的益处。

效果测试

创建测试项目

我们创建一个最简单web 项目

perl 复制代码

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 结合文档有如下好处：

提升开发效率

快速访问：通过Marscode直接查阅VisActor API文档
智能提示：基于VisActor文档的精准代码补全

增强开发体验

无缝集成：在开发环境中直接获取VTable使用指导
实时反馈：快速验证代码效果

降低学习成本

文档辅助：随时查阅VisActor官方示例
代码生成：自动生成符合VisActor规范的代码

提高代码质量

规范检查：确保代码符合VisActor最佳实践
性能优化：自动生成高性能表格配置

这只是Trae 众多功能的一个，如果你觉得很赞，可以参加官方的推广活动，可以拿大奖。

活动链接:juejin.cn/loyalty-pro...

联系我们

github ：github.com/VisActor

VisActor 微信订阅号留言（可以通过订阅号菜单加入微信群）：

p0-xtjj-private.juejin.cn/tos-cn-i-73...

VisActor 官网：www.visactor.io/

www.visactor.com

飞书群：