[TOC] #### 1. Trae 介绍 --- Trae 是字节跳动于 2025年1月正式发布的一款面向全球开发者的 AI 原生集成开发环境（IDE）。它并非在现有编辑器上简单的增加一个 AI 插件，而是从底层架构上就将 AI 作为核心，旨在重塑整个软件开发的工作流，让开发者从 “工具使用者” 转变为 “AI 协同创新者”。目前，它已成长为全球范围内广受欢迎的 AI 编程工具。 可以理解为：它是一个 “能写代码、会思考，还能自动完成开发任务” 的 AI 程序员 Trae 可以做什么 ？ + 智能代码生成（AI Code Generation） + 项目构建 + 对话式编程 + 多任务并行（前端开发、接口调试、BUG 修复） + 智能协作 + 多语言支持（覆盖 Go、Java、C++、PHP等，并支持多语言联合调试） Trae 三个核心 AI 功能： + Tab-Cue（context understanding engine） + 智能体聊天模式 + Editor 内 AI 编码 #### 2. Trae 安装 --- 安装 Trae 非常简单，无论是 Windows、MacOS 还是 Linux 用户，都可以在几分钟内完成 + 国内版官网：<https://www.trae.cn> + 国际版官网：<https://www.trae.ai> Trae 的配置： + Trae Settings（Trae AI 相关设置） + Editor Settings（Trae 编辑器设置） #### 3. 快速体验 Trae --- 打开一个文件夹，使用内置智能体（Builder），输入提示词，Trae 会根据提示词生成程序/代码 比如：我们输入一个提示词 “请编写一个在线投票系统”。 + 这就是一个大白话，如果觉得这个提示词不够清晰，Trae 给我们提供一个非常好用的功能，可以帮我们优化提示词 这是优化后的提示词： ```plaintext 你现在是一名资深网页前端开发工程师，请帮我使用原生 HTML + CSS + JavaScript 编写一个可直接在浏览器中打开使用的【在线投票程序】，要求如下： - 功能： - 创建投票：输入投票标题，至少含2个选项；支持添加/删除选项 - 开始投票：显示选项列表，点击为某一选项投票，实时更新票数与百分比 - 防重复投票：同一设备对同一投票仅能投一次（使用 localStorage 记录） - 结果展示：显示每个选项票数和百分比，提供简单进度条或条形图效果 - 数据持久化：投票标题、选项、票数、是否已投状态均使用 localStorage 保存，刷新后保留 - 重置：提供 “重置投票” 按钮，清空数据并重新创建新的投票 - 界面与技术： - 风格简洁淡雅（浅灰/浅蓝），居中卡片布局，按钮圆角阴影 - 使用 CSS Flex 或 Grid 布局；当前日期不需要显示 - 不使用任何框架或库； 全部代码在同一个 HTML 文件中 - 使用原生 JavaScript 操作 DOM， 逻辑清晰， 适量注释 - 输出格式： - 直接保存为 “vote.html” 文件，并在浏览器中打开即可使用 - 代码可直接运行，无需任何依赖 ``` 根据优化后的提示词会生成一个 `vote.html` 文件，可以手动打开，也可以发送提示词让它帮我们打开，发送提示词： ```plaintext 请使用浏览器打开 vote.html ``` #### 4. Tab - Cue --- Tab-Cue （上下文理解引擎）是其核心交互功能，通过 AI 驱动的智能补全和上下文感知能力显著提升编码效率 + 代码补全（根据注释生成响应的代码） + 智能代码重写 + 多行协同优化 + 光标位置预测 + 接受，接受部分和拒绝 + 配置 代码补全：输入注释，描述功能，使用 Tab 键回车补全 ```php // 编写一个方法，接收一个数组，并排序，排序使用冒泡排序，返回排序后的数组 function bubbleSort($arr) { $len = count($arr); for ($i = 0; $i < $len; $i++) { for ($j = 0; $j < $len - $i - 1; $j++) { if ($arr[$j] > $arr[$j + 1]) { $temp = $arr[$j]; $arr[$j] = $arr[$j + 1]; $arr[$j + 1] = $temp; } } } return $arr; } // 编写一个方法，接收一个数组，并打印数组 function printArray($arr) { foreach ($arr as $item) { echo $item . PHP_EOL; } } ``` 智能代码重写：上面写的冒泡排序是从小到大的，现在增加一句 “排序从大到小” + Trae 的 Cue 引擎就会分析历史记录，提示我们在哪里修改，按 Tab 键自动跳转到相应位置并修改 多行协同优化： + 数据联想：当编写成员变量（字段）时，会进行自动联想和补全 + 多行批量修改：上下文深度感知，分析代码：批量重构变量名、方法名 数据联想演示：编写 `User` 类时，定义 `$name` 变量后，自动提示是否添加 `$age`  多行协同优化演示：批量修改方法名  光标预测演示：当写完一个注释后，会预测下个注释应该怎么写，光标应该在哪里  Cue 提示的接受，接受部分和拒绝： + Tab（接收完整的补全） + Ctrl/Command + RightArrow（接收部分补全。Windows 用 Ctrl，MacOS 用 Command） + ESC 或继续输入（拒绝接收） #### 5. 内置智能体 --- 智能体聊天模式：使用 `Ctrl/Command + U` 访问侧边栏中的聊天。用自然语言输入我们的请求，Trae 将做出相应的响应 Trace 内置的智能体：Chat、Builder、Builder with MCP、SOLO Coder（SOLO Only） 智能体 Chat 适用场景：聊聊你的代码库或编写代码 ```plaintext 提示词：请编写一个网页版《贪吃蛇》游戏 优化后： 你现在是一名资深的网页游戏开发工程师，请帮我用原生 HTML + CSS + JavaScript 编写一个可以直接在浏览器中运行的网页版《贪吃蛇》游戏，要求如下： 功能要求： 1. 要求有积分统计 2. 页面要有多种背景可以切换 3. 代码添加中文注释 技术要求： - 不使用任何框架或库（如 React、Vue、Jquery 等） - 所有代码写在同一个 HTML 文件中 - 有详细注释，逻辑清晰 - 在浏览器中打开即可使用 输出格式要求： - 一次性输出完整的 HTML 文件代码，并直接保存为 `snakeGame01.html` 文件到当前文件夹下 - 代码可直接运行，无需任何依赖 - 包含 `<style>` 和 `<script>` ``` 智能体 Builder：端到端执行常规开发任务（阅读、编辑、终端、预览、联网搜索） 依然使用生成贪吃蛇游戏的提示词，并将文件名改为 `snakeGame02.html`，智能体改为 `Builder` + Builder 智能体会自动创建文件，而 Chat 智能体不会自动创建 可以使用提示词，让它打开文件： ```plaintext 请使用浏览器打开 snakeGame02.html ``` 智能体 Builder with MCP 适用场景：支持使用配置的所有 `MCP Servers` #### 6. Trae 的两种模式 --- Trae 提供 IDE 模式和 SOLO 模式两种开发方式，分别侧重 `人机协作` 与 `AI 自主开发`。 IDE 模式： + 特点：保留传统开发流程，支持智能问答、代码补全等辅助功能，用户对开发过程有更强掌控感 + 适用场景：适合需要精细控制代码或逐步验证逻辑的开发者 SOLO 模式： + 特点：AI 主导全流程（需求理解、编码、测试、部署），通过自然语言输入即可自主完成开发任务，自动化程度高 选择建议： + 若需保留开发自主性，选择 IDE 模式 + 若追求效率或处理标准化任务，SOLO 模式更高效 SOLO 模式又分为两种： + SOLO Builder：聚焦快速原型开发，通过自然语言描述生成完整 Web 应用（含前后端），适合从零到一的场景 + SOLO Coder：面向专业开发者，处理复杂项目迭代、代码重构、Bug 修复等工程化任务，提供 “Plan” 模式辅助开发规划 开发 “大众点评网” 提示词示例，可以让 Trae 优化一下提示词再执行 ```plaintext 我想开发一个类似大众点评的网站应用，不需要太复杂的功能，只要基本的功能就可以。 注意：生成的文档语言要求：简体中文（不要英文文档）。 ``` #### 7. 自定义智能体 --- 自定义智能体：在 Trae 中创建自定义智能体可以帮你高效处理各种任务