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 + I
Mac：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资源：
https://github.com/anthropics/skills/tree/main/skills
https://skillsmp.com/?utm_source=sofindai.com
② 对话式创建：适合小白
直接在Trea的输入框中进行描述
实操：
帮我创建一个检查代码的skill
③ 手动创建：适合动手能力强
4、使用Skill的方式：
① 显式调用：
直接指定用哪个skill
② 隐式调用：
对skill设定应用的场景，那么它会在特定的场景下自动调用
