Trae CN IDE 运用教程

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

一、软件简介与安装配备

1. 核心特点

字节跳动推出的就是Trae CN 免费 AI 原生 IDE，基于 VS Code 内核开发，深度集成大模型编程能力，主打中文友好、零门槛上手，核心优势包括：

全中文界面与本土化适配，支持国内主流技术栈

AI 驱动的代码生成、补全、修复等全流程辅助

无缝迁移 VS Code/Cursor 配置，编写习惯零成本切换

支持 Windows/macOS 系统，Linux 版本可预约获取

2. 安装步骤

下载安装包：访问Trae 中国官网，根据平台选择对应版本

初始配置（首次启动）：

- 选择主题（暗色 / 亮色 / 深蓝）和展示语言（默认简体中文）

- 可选：一键导入 VS Code/Cursor 的插件、主题和快捷键配置

- 安装命令行工具：点击「安装trae命令」，后续可凭借终端快速唤起 IDE

- 登录认证：使用手机号或稀土掘金账号登录（需登录才能使用 AI 功能）

二、界面快速导航

Trae 界面分为五大核心区域，布局清晰直观：

顶部菜单栏：文件执行、编辑、视图等常规功能

左侧区域：

- 文件资源管理器：管理项目材料 / 文件夹

- 搜索栏：全局材料 / 代码内容检索

- 效果按钮：源代码管理、Web 预览、调试器、插件市场

右侧 AI 工作区：核心功能区，拥护 Chat 对话和 Builder 项目生成

底部区域：终端命令行、错误提示、状态栏

三、基础管理指南

1. 项目管理

新建项目：「文件」→「新建项目」，可选择空白工程或依据 Builder 模式生成

打开项目：「文件」→「打开文件夹」，或终端执行 trae 项目路径

新建文件：右键文件夹→「新建文件」，支持自动识别文件类型并生成模板

2. 常用快捷键（分系统）

操作

Windows 快捷键

macOS 快捷键

新建文件

Ctrl+N

Command+N

唤起 AI 侧边对话框

Ctrl+U

Command+U

代码自动补全

Ctrl+Space

Command+Space

打开命令面板

Ctrl+Shift+P

Command+Shift+P

全局搜索

Ctrl+Shift+F

Command+Shift+F

注释代码行

Ctrl+/

Command+/

跳转到定义

Ctrl+F12

Command+F12

重命名变量 / 函数

自定义快捷键：「设置」→「通用」→「偏好设置」→「快捷键设置」，支持修改 / 添加 / 删除组合键

四、核心 AI 特性详解

1. Builder 模式：自然语言生成完整项目

适合从零搭建项目，无需关注技术细节：

点击右侧「Builder」标签

用中文描述需求（例：「做个春节接福小游戏，支持拖拽福字到指定区域」）

系统自动拆解任务、安装环境、生成可运行代码（10 分钟内完成基础搭建）

生成后可直接在编辑器中修改优化

2. 智能代码补全

两种补全模式，提升编码效率：

基础补全：换行或添加注释后自动触发，按Tab采纳全部推荐，Ctrl+→逐字添加，Esc取消

Pro 补全（默认启用）：光标定位后按Ctrl+Shift+Enter主动触发，采纳后自动推荐下一个改动点

特性：跨档案感知上下文，自动匹配项目内接口定义和参数格式

3. 代码生成与编辑

自然语言生成代码：

1. Ctrl+U 唤起 AI 对话框

1. 输入需求描述（例：「生成一个 Vue3 的登录表单组件，带手机号校验」）

1. 点击「发送」，生成后可选择「复制 / 插入 / 新建文件 / Apply（Diff 预览）」

代码编辑 / 优化：

1. 选中目标代码

1. 输入指令（例：「优化这段代码的性能」或/fix修复错误）

1. 框架返回修改后的代码，协助对比采纳

4. 实用 AI 工具集

功能

触发方式

用途

代码解释

选中代码→右键「Trae AI→代码解释」或输入/explain

理解复杂代码逻辑

单元测试生成

选中代码→输入/test或右键对应选项

自动生成测试用例

注释生成

选中代码→输入/doc或右键对应选项

生成函数级 / 行间注释

智能修复

代码报错时选中→输入「修复这段代码」或/fix

定位并修复语法 / 逻辑错误

图像转代码

点击「导入」→「上传图片」

UI 截图生成 HTML/CSS 代码

5. Chat 模式：实时解决编码问题

调试排错时高效求助：

点击右侧「Chat」标签

输入问题（例：「为什么这个 API 请求返回 404」），可加#关联当前文件上下文

系统结合代码结构和语法规则给出解决方案，支持多轮追问

特性：基于 Claude-3.5-Sonnet 引擎，理解中文技术问题更精准

五、插件与环境调整

1. 插件安装

方式 1：直接在 Trae 插件市场搜索安装

方式 2：导入 VS Code 插件

1. 从VS Code 市场下载.vsix 文件

1. 打开 Trae 插件市场，拖拽档案至面板完成安装

2. 环境迁移

首次启动时自动识别本地 VS Code/Cursor 配置

手动导入：「文档」→「导入设置」→选择对应 IDE 的调整目录

拥护迁移：ESLint 规则、主题、代码片段、已安装插件

3. 多模型切换

默认集成豆包、Claude-3.5-Sonnet、GPT-4o：

点击 AI 对话框右上角「设置」

在「Trae AI 设置」中选择默认模型

建议：算法优化用 GPT-4o，业务代码用豆包（中文支持更好）

六、Webview 实时预览（前端开发专属）

开发 React/Vue 等前端项目时，点击左侧「Web 预览」按钮

右侧将显示实时渲染效果，修改代码后 300ms 内自动更新

帮助交互事件响应，可直接在预览区测试按钮点击、表单输入等操作

七、常见问题排查

否正常就是AI 功能无法运用：检查是否已登录账号，网络

导入配置失败：确认原 IDE 路径正确，关闭其他 IDE 后重试

快捷键冲突：进入快捷键设置页面，搜索冲突按键并修改

否启用补全功能，重启 IDE 尝试就是代码补全不生效：检查「Trae AI 设置」中