5分钟开发一款小游戏！这款国产 AI 编程工具 Trae 究竟有何魔法？（附详细教程）

Trae，字节跳动推出的 AI 编程工具。目前它集成 Claude 3.5、GPT-4 等模型，支持中文。

Trae 有 Chat 和 Builder 两种模式，前者可提问获代码建议，后者能自动生成项目代码。

还具备智能代码生成与优化、多模态交互、便捷项目预览调试等功能。

使用 Trae 开发项目时，可以与 AI 灵活协作，提升开发效率。

---

一、如何安装

打开官网地址：https://www.trae.ai/

点击右上角Download或者 Download for Windows(IOS)按钮

下载完成选择一个合适的位置安装即可，由于是国产软件，自带 简体中文，不需要像Cursor那样安装简体中文插件。

还可以选择界面主题，可选项为：暗色、亮色 和 深蓝。主题和语言后期也可以修改。

Trae有一个非常人性化的设计：如果你的电脑中之前就在使用VS Code 或者 Cursor了，Trae也支持从VS Code 或者 Cursor中导入配置。

系统将会从对应的 IDE 中获取插件、IDE 设置、快捷键设置等信息并一键导入到 Trae 中，帮助你快速从其他 IDE 切换到 Trae。

后续还有添加Trae相关命令行的操作，按需选择就行了，选择跳过也没关系，后续用到的时候再安装也不迟。

当安装完成后，登录你的账号就可以使用了。

目前Trae 提供了三种登录方式，分别为 Google 账号登录、Github 账号登录、邮箱登录。

若你没有账号，也可以新注册一个账号。
登录成功后的页面：

如果是一个全新的项目，可以新建一个空文件夹，然后再Trae中打开文件夹就好了。

二、怎么使用

2.1、界面解释

顶部菜单栏：提供文件编辑、搜索等常规选项，方便开发者进行各种基本操作。

左侧有文件资源管理器、搜索栏、源代码管理、Web预览按钮、调试器以及插件市场按钮，开发者能够快速导航到目标文件，便于对项目文件进行管理和访问。

底部是命令输入区域。

右侧是 AI 工作区，右侧的 AI 工作区分成 Chat 和 Builder 两种工作模式。

1、Builder 模式可以帮助你从 0 到 1 开发一个完整的项目。

在 Builder 模式下，AI 助手在回答时会根据需求调用不同的工具，包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等。从而让回答更精确、更有效。

2、Chat 模式是编码过程中的全能 AI 伙伴，可以用来回答编码问题、讲解代码仓库、生成代码片段、修复错误等。

---

2.2、项目实践

在这一小节，我们将使用Trae从0开始做一个五子棋的小游戏.

所有的代码全部由Trae帮我们来完成，我们要做的仅仅是和Trae对话，当遇到问题或者报错的时候，再将这些问题或者报错信息扔给他，让他帮我们来完成。

第一步、新建一个空文件夹用来存放项目代码，然后在Trae中打开这个文件夹

点击左侧面板中央的 打开文件夹 按钮，或在界面左上角点击 选择项目 > 打开文件夹。

第二步、在右侧 Builder 模式下，输入 命令“帮我生成一个五子棋游戏”

注意：由于五子棋这个游戏比较简单，我输入的提示词直接就是 帮我生成一个五子棋游戏 了，
如果你要做的项目比较复杂，需要你把需求一项项写清楚。

提示词输入后Trae就开始帮你写代码了，但是很尴尬，我这边报了一个网络异常的错误

遇到报错不要怕，兵来将挡嘛！

我于是像一个侦察兵立即将这个情况向Trae报告了：

后续还算顺利，Trae先是帮我检查了下代码，然后选择了相应的组件，根据他的理解指定了一些游戏规则，然后他自动去下载对应的依赖并自己去写代码了。

中间的过程完全不需要人工的干预，非常丝滑。

他还将实现的功能详细列了出来：

他生成的五子棋页面如下

我在web预览页面体验了这个“热气腾腾”的小游戏，发现基本功能是没有问题的。

后续如果想加新功能怎么办？比如说：

1. 我想切换棋盘的颜色（分成白天模式和夜晚模式）
2. 可以选择难度等级
3. 增加落子音效效果
4. 假如读秒（防止思考时间过长）
5. ………………

要想增加这些功能，可以将Trae切换成Chat模式，然后在对话框中输入你要想增加的需求即可。

下面我以增加音效为例为大家演示下如何增加新功能，其他的功能大同小异：

Trae会自动为你生成代码，等他代码生成好之后，点击 应用 按钮

之后Trae会和你再次确认是否真的需要修改代码，选择全部接受即可

---

三、好用技巧分享

3.1、将内容作为上下文

当你的编辑器中存在正在编辑的代码文件时，Trae 默认能够看到当前文件。

你可以直接向 AI 助手提问与当前文件相关的问题。若期望对文件中的某一段代码进行提问，使用以下步骤：

1. 选中代码。
2. 点击悬浮菜单中的 添加到对话 按钮，将选中的内容作为上下文添加至侧边对话框。

指定的上下文会显示在侧边对话底部的输入框。以下图为例，输入框内显示所选内容所属的文件名称，以及所选的代码行编号。

终端的内容可以同样使用该操作

3.2、图片输入

Trae支持多模态输入，我们可以在会话中添加图片，例如报错截图、设计稿、参考样式等等，从而更加准确高效地表达需求。

---

Trae 让编程告别繁琐，拥抱高效！便捷的操作和智能的交互，为开发者打开了高效编程的新大门。

有了它，开发之路一路畅通，未来的代码世界，就靠它 “开道” 啦！

这么好用的工具你还不试试吗？