TRAE 介绍与使用教程
一、Trea是什么?
AI工程师
二、下载:
1、国内版:
2、国际版:模型多
三、体验:
1、零基础生成并且运行一个java文件:

- 新建一个
.java文件 - 在文件中写入测试代码(可以直接写一个
public然后tab自动引入) trea会自动安装对应的环境和插件- 安装好之后,在代码中有
run按钮,点击运行 - 也可以在设置中查看当前运行的
java环境

2、零基础生成一个html+css+javascript的在线待办清单项目(使用智能体):
- 首先选择一个智能体

- 输入提示词
你是一个资深的软件工程师,使用 HTML + CSS + JavaScript 纯前端实现在线待办清单(Todo List)项目,不需要后端、不需要框架。
功能要求:
1. 输入框可以添加待办事项
2. 可以标记事项为已完成/未完成
3. 可以删除单条事项
4. 可以一键清空所有已完成事项
5. 显示未完成数量统计
6. 支持本地存储 localStorage,刷新页面数据不丢失
7. 响应式布局,手机、电脑都能用
UI 风格要求:
1. 现代、简洁、清爽,浅色主题
2. 卡片式布局,圆角、柔和阴影
3. 交互友好:hover 效果、动画过渡自然
4. 按钮、输入框样式统一
5. 整体居中,不要太宽
代码要求:
1. 代码结构清晰,注释易懂
2. 原生 JS,不使用任何框架
3. 一个 HTML 文件包含所有内容,方便直接运行
4. 变量命名语义化
输出格式:
1. 一次性输出完整的 list.html 文件代码
2. 浏览器可以直接运行,不需要安装任何依赖
四、trea的三大核心功能:
1、tab-cue:
① 什么是 tab-cue:
按一下 Tab 键,AI 就根据你当前上下文,自动补全 / 改写 / 优化代码
② 如何配置 tab-cue:

③ tab-cue的功能:
(1)代码补全:

(2)智能代码重写:

(3)多行协同优化:
- 数据联想

- 多行批量修改

(4)光标位置预测:

(5)接受,接受部分和拒绝:快捷键
tab- 接收补全Ctrl(command)+RightArrow:接受部分补全esc/继续输入:拒绝补全
2、智能体聊天模式:
① 开启聊天模式:快捷键
Ctrl+U(Windows) 或 command+U(Mac) 访问侧边栏中的聊天
② 模式开发方式分类:
TRAE提供IDE模式和SOLO模式两种开发方式,分别侧重人机协作与AI自主开发。
(1) IDE模式:
特点:保留传统开发流程,用户对开发过程有更强掌控感。
适用场景:适合需要精细控制代码或逐步验证逻辑的开发者。
(2) SOLO模式:
特点:AI主导全流程,通过自然语言输入即可自主完成开发任务,自动化程度高。
适用场景:追求效率或者处理标准化任务
③ 智能体详细介绍:
(1)Chat:不会自动生成文件

体验:
你是一个资深的游戏开发工程师,请生成一个纯前端、单页面的网页版迷宫小游戏,只用 HTML + CSS + JavaScript 实现
游戏功能要求:
1. 自动随机生成迷宫地图,可以选择简单、困难和地狱三种模式
2. 玩家用键盘 ↑ ↓ ← → 控制小球移动
3. 有起点和终点,到达终点提示闯关成功
4. 可以重新生成新迷宫
5. 显示当前步数,最多100步以内就能成功
6. 简单的碰撞检测,不能穿墙
界面要求:
1. 风格简洁、现代、干净,可以选择多种界面风格
2. 居中显示,响应式布局,手机电脑都能玩
3. 迷宫墙用深色,路径浅色,玩家小球醒目
4. 按钮美观,有 hover 效果
5. 整体不要太复杂,清爽好看
代码要求:
1. 原生 JavaScript,不使用框架
2. 代码结构清晰,注释易懂
3. 所有代码写在一个 HTML 文件里
4. 可以直接在 IDEA 中运行
5. 变量命名规范
输出格式:
1. 一次性输出完整的 maze.html 文件代码
2. 浏览器可以直接运行,不需要安装任何依赖
(2)Builder:会自动生成文件,可进行交互

(3)Builder with MCP:支持使用配置的所有MCP Servers

a、数据分析可视化:
- 配置
mcp-server-chart:- 介绍:用于通过AntV生成图表的模型上下文协议服务器,可以进行图表生成和数据分析。
- 手动配置
MCP:
https://github.com/antvis/mcp-server-chart

- 引入成功并且使用(资源文件已经上传,请在当前文章进行获取):

- 体验:
根据销量生成一个柱状图
请帮我做一个销量的饼图比对
b、自动生成前端页面:
- 配置
Figma MCP:- 新建
token:
https://www.figma.com

- 添加
Figma MCP:
直接在市场搜索就好了
- 新建
(4)SOLO Coder:适合专业开发者,应对复杂项目开发

a、Plan 模式:沟通 ——>》计划 ——》执行
-
开启
Plan模式的方式:
在SOLO Coder对话里直接输入:
/plan:快速生成开发计划 → 确认后执行(替代原Plan模式)
/spec:生成更完整的项目规范文档,适合复杂项目 -
体验:
/plan
1、用 HTML + CSS + JavaScript 生成一个简单可玩的网页小游戏,
不需要后端,纯前端单文件运行,
2、界面简洁好看,操作简单,有得分、有游戏逻辑,
3、生成完整可直接运行的代码。
(5)SOLO Builder:适合从0到1的小型开发团队

a、集成supabase服务:用于用户认证和数据存储

体验:
开发一个简化版的个人博客网站,需要实现以下核心功能模块:
1、用户模块:
- 用户注册/登录功能(支持手机号+验证码或邮箱+密码方式)
-个人资料管理(头像、昵称、联系方式等基本信息)
2、文章管理(管理员后台)
- 管理员可以新增、编辑、删除技术文章
- 文章支持分组 / 分类管理(如:前端、Vue、JavaScript、工程化等)
- 文章支持富文本或 Markdown 编辑
3、前台展示
- 首页展示文章列表,可按分类筛选
- 文章详情页展示完整内容
- 展示网站总访问量 / 文章阅读量统计
4、用户系统与评论
- 支持普通用户注册、登录
- 只有登录用户才能对文章发表评论
- 评论支持展示、删除(管理员可删)
5、权限区分
- 游客:只能浏览文章
- 登录用户:可评论
- 管理员:可管理文章、管理评论、查看访问统计
6、技术实现要求:
- 前端采用响应式设计,适配PC和移动端-后端提供RESTful API接口
- 数据库存储商家信息和用户评价-部署到云服务器,确保基本访问性能
7、交付标准:
- 可运行的完整系统原型
- 基础功能测试报告
- 简单的使用说明文档
- 源代码和部署指南


(6)自定义智能体:

体验:
我的智能体是mcp助手,生成关键词:我要创建一个智能mcp助手,能帮你实现文件操作,网页搜索,截图等重复性任务
下面是一份原始表格数据,请用 MCP 工具将它生成一个 Excel 文件保存到桌面,然后帮我做数据分析、汇总统计,并生成一份简洁的分析报告。
姓名,部门,岗位,出勤天数,加班时长,绩效得分
张三,技术部,前端开发,22,18,86
李四,技术部,后端开发,21,25,92
王五,产品部,产品经理,22,10,88
赵六,设计部,UI设计师,20,15,79
钱七,技术部,前端开发,22,22,90
孙八,产品部,交互设计,21,8,83
周九,设计部,视觉设计,22,12,85
吴十,技术部,测试工程师,21,16,81
请完成:
1. 生成 Excel 表格到桌面
2. 按部门统计平均绩效、平均加班时长
3. 找出加班最多、绩效最高、绩效最低的人
4. 生成一份简短的分析总结
3、Editor 内 AI 聊天编码:
(1)打开方式:
Windows:Ctrl + IMac:Command + I
(2)使用场景:
直接在编辑器窗口中生成新代码或编辑现有代码,适合精准的修改代码/内容。
(3)具体操作体验:
a、空白文件生成代码:
新建一个空白test.html文件,Command+I打开输入框,输入需求
b、原有文件修改代码:
修改:选中需要修改的代码,Command+I打开输入框,输入需求
c、原有文件新增功能:
新增功能:选中所有的代码,Command+I打开输入框,输入需求
五、trea 的上下文:
1、代码索引文件:
① 查看代码索引是否构建成功:
如果没有构建成功(100%),请刷新

② 引用工作区配置:
在聊天的窗口输入:#Workspace

对工作区中的代码进行全局索引构建,发起#Workspace问答时将自动全局检索与问题相关的跨文件上下文,给出与项目更相关的回复
2、忽略文件配置:
① 在设置中打开.ignore文件:

② 在.ignore中输入需要忽略的文件和文件夹名称:

③ 刷新一下工作区索引构建:

3、文档集的配置:
通过URL、本地上传的方式添加常用的文档集作为上下文与AI问答
① 配置文档集:

② 使用文档集:
在输入框中输入
#,选择Doc,最后根据配置的文档集选择

六、rules 的使用:
1、作用:
- 约束代码风格(如强制用驼峰命名、要求方法写注释等)
- 限定技术选型(如指定优先使用某技术/框架/库,禁止使用某组件/框架/库)
- 提前指定配置参数(如提前设置连接数据库方式、账号密码等)
2、分类:
Project Rules和User Rules规则冲突了,Project Rules的优先级更高
① 个人规则:
- 对所有项目生效,个人专属配置
- 个人习惯(如通用偏好和工作风格)
② 项目规则:
- 仅对当前项目生效,团队成员共享相同规则
- 统一团队编码规范(如技术栈、依赖版本)
七、#符号引用:
1、使用:

2、官方文档:
https://docs.trae.ai/ide/number-sign?_lang=zh#7a1ee14d
八、Skill介绍:
1、理解:
“专业技能包”,让它按你的规则干活,不用每次重复教
2、Skill的完整文件结构:
通常是一个文件夹,包含
SKILL.md和可选的脚本、模板、配置文件等
① SKILL.md:Markdown 格式
YAML 头:name、description(触发条件)Instructions:详细步骤、规则、格式要求Examples:示例
3、创建Skill的方式:
① 直接导入:
网上找别人写好的skill文件包,直接下载引入
实操:

优质skill资源:
② 对话式创建:适合小白
直接在Trea的输入框中进行描述
实操:
帮我创建一个检查代码的skill
③ 手动创建:适合动手能力强

4、使用Skill的方式:
① 显式调用:
直接指定用哪个skill
② 隐式调用:
对skill设定应用的场景,那么它会在特定的场景下自动调用
更多推荐



所有评论(0)