Trae AI IDE

Trae（/treɪ/）与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。使用 Trae 开发项目时，你可以与 AI 灵活协作，提升开发效率。

完备的 IDE 功能

提供传统的 IDE 功能，包括代码编写、项目管理、插件管理、源代码管理等。

强大的 AI 助手

智能问答
在编写代码时，你可以随时与 AI 助手对话，获得代码解释、代码注释和错误修复等帮助。详情参考《侧边对话》和《内嵌对话》。
实时代码建议
AI 助手能够理解当前代码并在编辑器中实时提供代码建议，提升编程效率。详情参考《代码自动补全》。
代码片段生成
通过自然语言描述你的需求，AI 助手将生成相应的代码片段，甚至能够编写项目级或跨文件的代码。
从 0 到 1 开发项目
告诉 AI 助手你想开发的程序，AI 助手将根据你的描述提供相关代码或自动创建所需文件。详情参考《Builder 模式》。

安装 Trae 并完成初始设置

本文档介绍如何安装 Trae 并完成基础配置。

第一步：安装并启动 Trae

1. 前往 Trae 官网，将 Trae 安装至电脑。

2. 启动 Trae。

依次点击以下按钮
开始——选择主题（暗色、亮色、深蓝），语言选择简体中文
导入vscdoe配置、导入Cursor配置（笔者选择跳过）——安装Trae命令——填写手机号和接收到的验证码

添加 Trae 相关的命令行后，你可以在终端中使用命令行更快速地完成 Trae 相关的操作。例如：

• 使用 trae 命令快速唤起 Trae。
• 使用 trae my-react-app 命令在 Trae 中打开一个项目。

开始使用 Trae

在 Trae 中，开发你的项目，例如：

• 打开已有的项目或克隆 Git 仓库。详情参考《管理项目》。
• 使用 AI 助手从 0 到 1 创建一个新项目。详情参考《Builder 模式》。

管理项目

你可以管理 Trae 中的项目，包括创建项目和切换项目。

什么是 “工作空间”？

“工作空间” 通常为一个在 Trae 中打开的文件夹。若你的项目较为复杂，也可以将多个文件夹添加至一个 “工作空间”。

创建项目

Trae 提供三种创建项目的方式：导入本地文件夹、克隆 Git 仓库。

管理插件

在 Trae 中，你可以安装、禁用和卸载插件。

安装插件

你可以从 Trae 或 VS Code 的插件市场安装插件。

从 Trae 的插件市场安装

在左侧导航栏中，点击 插件市场 图标。

界面左侧显示 插件市场 面板。
搜索你想要的插件并在 未安装 列表中将其选中。
界面上显示该插件的详情窗口，展示该插件的详细说明、变更日志等信息。
点击 安装。
Trae 开始安装该插件。安装完成后，该插件会出现在 已安装 列表中。

从 VS Code 的插件市场安装

如果 Trae 的插件市场未提供你所需的插件，可以将 VS Code 插件市场中的插件安装至 Trae。

1. 前往 VS Code 的插件市场。
2. 搜索你想要的插件，例如：EIDE。

1. 在搜索结果中，点击你所需的插件。

你会前往该插件的详情页。

1. 在详情页中，点击 Version History。
2. 结合插件页的 URL 和 Version History 中的信息，提取出以下信息（以 Pylance 为例）：

• • itemName：URL Query 中的 itemName 字段，如截图中的 CL.eide，并将小数点（.）前后的内容分成以下两个字段：

  • • fieldA：CL
    • fieldB：eide

  • version：如截图中的 3.21.1

1. 使用提取出来的 3 个字段的值替换下方 URL 中的同名字段。

模板：
https://marketplace.visualstudio.com/_apis/public/gallery/publishers/${itemName.fieldA}/vsextensions/${itemName.fieldB}/${version}/vspackage示例：
https://marketplace.visualstudio.com/_apis/public/gallery/publishers/CL/vsextensions/eide/3.21.1/vspackage

1. 在浏览器中输入修改后的 URL，然后按下回车键。
   浏览器开始下载该插件。

2. 下载完成后，返回 Trae 并打开插件市场。

3. 将下载的 .vsix 文件拖拽至 插件市场 面板中。
   Trae 开始自动安装该插件。安装完成后，该插件会出现在 已安装 列表中。

禁用插件

1. 在 Trae 中，打开插件市场。
2. 在 已安装 列表中，找到需禁用的插件。
3. 鼠标悬浮至列表中的插件，然后点击 设置 > 禁用。

或

• 点击该插件以打开其详情窗口，然后点击 禁用。

卸载插件

1. 在 Trae 中，打开插件市场。
2. 在 已安装 列表中，找到需卸载的插件。
3. 鼠标悬浮至该插件，然后点击 卸载。

或

• 点击该插件以打开其详情窗口，然后点击 卸载。

插件常见问题

暂不支持安装 VS Code 插件市场中某个版本的插件

若 VS Code 插件市场中某个版本的插件依赖了新版 VS Code 中的某些接口，则可能会导致该插件与 Trae 不兼容。你可以查看该插件的 Version History，然后下载该插件的历史版本。

Builder模式
全新 Builder 模式，快速从 0 到 1
Builder 模式下，Trae 会自主拆解需求并自动完成多轮编码任务。从想法描述到功能实现，Trae 为你一气呵成。

上下文理解
全面理解代码仓库，准确解决需求
Trae 可以深入理解你的代码仓库，并深度结合 IDE 内信息，更准确识别你的需求，为你提供更优质的解决方法。

• 代码仓库
• 文件夹
• 文件
• 代码块

自动补全
实时代码续写，极致提速
通过强大的上下文分析，Trae 可以实时预测和续写你的代码片段，快速无缝扩展你未完成的代码，数倍提升你的编码效率。

AI 协作
智能 AI 协作，畅享丝滑体验
你可以将 AI 生成的代码一键应用到多个模块，还可以随时调整指令，实时预览 AI 生成代码的前端效果……更多畅快体验，等你探索。

• 实时预览
• 一键应用
• 版本回退

---

对比其它AI代码编辑器

Trae IDE
功能丰富的AI编辑器，集成Claude 3.5和GPT-4，提供强大的智能编程体验。所有功能免费。
Cursor
一款从零开始构建的现代AI编辑器，完全为AI集成优化。
GitHub Copilot
GitHub官方推出的AI编程助手
Codeium Windsurf
支持20多种编程语言的AI代码补全工具。
Tabnine
支持多种编程语言的AI代码补全工具。
Replit
强大的在线IDE，支持超过50种编程语言，具有实时协作功能。
Amazon CodeWhisperer
亚马逊推出的AI编程助手，专注于AWS服务和API的支持。
在线 AI 编辑器
Devv AI
专为开发者打造的智能搜索引擎，带有在线代码运行环境（测试版）
Bolt
StackBlitz推出的在线开发环境，集成AI功能

---

常见问题解答

Trae IDE与其他AI编程工具有什么不同？

Trae IDE通过提供对GPT-4和Claude 3.5的无限免费访问、全面的IDE功能和无缝GitHub集成，脱颖而出。所有功能都是完全免费的。

Trae IDE真的免费吗？有什么限制吗？

是的，Trae IDE完全免费，没有隐藏费用。作为字节跳动的产品，致力于让先进的AI编程工具为所有开发者所用。

Trae IDE支持哪些操作系统？

目前，Trae IDE支持macOS，Windows支持将于2025年2月晚些时候推出。Linux支持计划在未来发布。

我可以使用现有的VSCode扩展吗？

是的！Trae IDE基于VSCode构建，并支持大多数VSCode扩展。您可以轻松导入现有的VSCode设置和扩展。

AI助手如何离线工作？

虽然核心IDE功能可以在离线状态下工作，但AI助手需要互联网连接来访问GPT-4和Claude 3.5。我们通过优化API调用来确保最小延迟。

---

什么是 Trae Builder？

Trae Builder 模式可以帮你从零开始开发一个完整的项目。你可以轻松地把它融入到你的项目开发过程中。

在 Builder 模式下，AI 助手会根据你的需求使用各种工具来回应。这些工具包括分析代码文件、编辑代码文件、运行命令等等，让回应更准确、更有效。

Builder 模式是怎么工作的？

在 Builder 模式下，AI 助手会主动读取当前项目文件的内容，把任务分解成小步骤，然后一步一步执行。包括：

• 提取相关的上下文
• 创建或修改文件
• 生成和运行命令
• 分析命令执行的状态

如何开启 Builder 模式？

1. 用快捷键 command + U 打开侧边聊天框
2. 在 AI 聊天框的左上角，点击 Builder 就可以开启 Builder 模式

探索 Builder 模式

Builder 模式提供了一系列实用的功能，可以有效地帮你从 0 到 1 精准高效地开发项目。

添加上下文

AI 助手能理解当前项目的上下文，包括代码、文件和文件夹，这样就能更准确地帮你实现开发需求。想了解更多，可以看看"上下文"部分。

输入多模态内容

你可以在聊天中添加图片，比如错误截图、设计草图、参考样式等等，这样可以更准确、更高效地表达你的需求。想了解更多，可以看看"多模态输入"部分。

生成和处理代码变更

根据你的需求，AI 助手会自动生成代码变更，包括创建新文件和编辑现有文件的代码。

为了让你预览代码变更，Trae 会自动保存 AI 助手生成的代码变更。如果你拒绝了代码变更，这些变更就会从硬盘中删除。

你可以接受或拒绝代码变更，包括：

• 处理多个文件中的所有代码变更：在输入框上方的文件列表中点击"全部接受"或"全部拒绝"按钮，就可以批量接受或拒绝当前项目中的所有代码变更。
• 处理一个文件中的所有代码变更：在编辑器中打开文件，点击顶部提示栏中的接受（快捷键：Command + Enter）或拒绝（快捷键：Command + Backspace）按钮，就可以批量接受或拒绝当前文件中的所有代码变更。
• 处理单个代码变更：在编辑器中点击特定代码变更右上角的 ^Y 或 ^N 按钮，就可以接受或拒绝这个特定的变更。

生成和运行命令

根据你的需求，AI 助手会及时推荐你需要运行的 Shell 命令。你可以选择运行或跳过命令，AI 助手会根据你的操作继续后续任务。

点击运行后，命令会在 Trae 的终端中执行。命令运行完后，AI 助手会自动读取和分析结果。如果执行过程中出现问题，AI 助手会分析原因并提供解决建议。

如果命令运行成功，你可以点击命令卡片右上角的终端按钮，在终端中查看该命令的执行日志。

预览结果

当 AI 助手完成了你的需求后，它会提供一个预览按钮。点击这个按钮会在 Trae 中打开一个 Webview 窗口来展示结果。

在预览过程中，如果你继续和 AI 助手交互并修改需求，结果会在 Webview 窗口中实时更新。

在 Webview 窗口的右上角，你可以点击"在浏览器中打开"按钮，在浏览器中打开窗口预览结果。

回退到之前的版本

你可以把项目回退到某次聊天之前的版本。

• 回退后不能撤销
• 只支持回退最新的 Builder 窗口中的项目
• 只支持回退项目到最近 10 次聊天中的版本

回退步骤：

1. 找到目标聊天气泡
2. 在左侧点击回退按钮
3. 会弹出显示受影响文件的对话框
4. 点击文件名可以在编辑器中预览变更
5. 确认影响，如果可以接受就点击确认
6. AI 助手就会开始回退操作

管理历史聊天

点击 Builder 窗口右上角的"显示历史"按钮，左侧会出现历史面板，显示聊天模式和 Builder 模式的所有历史聊天。

要查看特定的历史聊天，点击对应的条目就可以跳转到那部分。

如果你需要删除某个历史聊天，把鼠标悬停在想要的条目上，点击右侧的删除按钮就可以。注意，删除的聊天是不能恢复的。

---

Trae IDE 快捷键怎么设置

Trae 提供了多种键盘快捷键来提高你的开发效率。以下是使用方法：

常用键盘快捷键

文本编辑

操作	键盘快捷键 (macOS)
新建一行	Command + Enter
复制一行（无需选中）	Command + C
剪切一行（无需选中）	Command + X
粘贴一行	Command + V
选中一行（或下一行）	Command + L
撤销操作	Command + Z
重做操作	Command + Shift + Z
注释/取消注释一行	Command + /
打开搜索框	Command + F
查找下一项	Enter
查找上一项	Shift + Enter
重命名符号	F2 或 Enter
跳转到定义	Command + F12
触发代码自动补全	Ctrl + Space

全局设置

操作	键盘快捷键 (macOS)
打开命令面板	Command + Shift + P
打开文件导航器	Command + P
打开全局搜索	Command + Shift + F
打开设置	Command + ,

AI 聊天

操作	键盘快捷键 (macOS)
打开侧边 AI 聊天框	Command + U
打开内联 AI 聊天框	Command + I

管理键盘快捷键

要自定义你的键盘快捷键：

1. 点击 Trae 右上角的个人头像
2. 选择键盘快捷键
3. 在键盘快捷键窗口中，右键点击任意快捷键条目可以：
   • 修改现有的快捷键绑定
   • 添加新的快捷键绑定
   • 删除快捷键绑定
   • 执行其他自定义选项

---

使用Trae AI IDE

# 新建项目文件夹
mkdir test
# 用trae命令打开项目文件夹
trae test

请使用HTML5 Canvas和JavaScript开发一个俄罗斯方块游戏，创建tetris.html文件和tetris.js文件。要求实现游戏的核心逻辑，包括方块生成、移动、旋转、碰撞检测、计分等功能。

安装Live Server插件，点击右正解的Go Live预览游戏。