🔧 Trae IDE 使用指南

字节跳动推出的 AI 原生 IDE - 真正的 AI 工程师

Trae 是什么?
┌─────────────────────────────────────────────────────────────────────────┐ │ Trae IDE 简介 │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ 字节跳动出品 ✓ │ │ │ │ │ │ │ │ • Trae 2.0 全新设计升级 │ │ │ │ • 深度集成 Claude / DeepSeek 多模型 │ │ │ │ • SOLO 模式:端到端自主开发 │ │ │ │ • @Agent 多代理协作系统 │ │ │ │ • MCP 协议支持 │ │ │ │ • 免费使用,无次数限制 │ │ │ │ • 企业版已发布(600万+用户) │ │ │ │ │ │ │ │ 定位:真正的 AI 工程师 (The Real AI Engineer) │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────┘ │ │ │ │ 💡 核心优势:免费 + 多模型 + SOLO 自主开发 + 中文优化 │ │ │ └─────────────────────────────────────────────────────────────────────────┘

🤖 AI 模型支持

内置模型
┌─────────────────────────────────────────────────────────────────────────┐ │ Trae 支持的 AI 模型 │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ 免费模型 ✓ │ │ │ ├─────────────────────────────────────────────────────────────┤ │ │ │ • Claude-3.5-Sonnet - 快速响应,日常编程首选 │ │ │ │ • Claude-3.7-Sonnet - 深度思考,强推理能力 │ │ │ │ • DeepSeek-Reasoner(R1)- 国产推理模型 │ │ │ │ • DeepSeek-Chat(v3) - 国产对话模型 │ │ │ └─────────────────────────────────────────────────────────────┘ │ │ │ │ 💡 模型选择建议: │ │ • 简单代码生成 → Claude-3.5-Sonnet(快) │ │ • 复杂问题分析 → Claude-3.7-Sonnet(准) │ │ • 国产模型偏好 → DeepSeek 系列 │ │ │ └─────────────────────────────────────────────────────────────────────────┘

🗣️ AI 对话功能

打开 AI 对话
┌─────────────────────────────────────────┐ │ 打开对话的方式 │ ├─────────────────────────────────────────┤ │ │ │ 快捷键: │ │ • Ctrl/Cmd + I → 侧边对话栏 │ │ • Ctrl/Cmd + J → 浮动输入框 │ │ │ │ 界面操作: │ │ • 右侧边栏 AI 图标 │ │ • 选中代码 → 右键 → Ask AI │ │ • 输入 # 关联当前文件上下文 │ │ │ └─────────────────────────────────────────┘
对话指令技巧
# 常用对话指令

# 解释代码
"解释这段代码的功能"
"这个函数是怎么工作的?"

# 修复 Bug
"这段代码报错了,帮修复"
"为什么 API 返回 404?"

# 生成代码
"写一个 Python 快速排序"
"用 React 写登录组件"

# 代码审查
"检查这段代码的安全性"
"有什么优化建议?"

# 项目相关
"在用户模块添加忘记密码功能"
"在 #开头 关联当前文件"

# 特殊用法
# 输入 # 自动关联当前文件上下文
# AI 结合语法规则和项目结构给出精准建议

🏗️ Builder 模式

Builder 核心功能
┌─────────────────────────────────────────┐ │ Builder 模式 │ ├─────────────────────────────────────────┤ │ │ │ 📝 自然语言生成完整项目 │ │ │ │ 快捷键: │ │ • Ctrl/Cmd + Enter │ │ │ │ 特点: │ │ • 自动拆解需求结构 │ │ • 配置开发环境 │ │ • 生成可运行代码 │ │ • 多文件智能生成 │ │ • 垂直领域模板库 │ │ │ └─────────────────────────────────────────┘
Builder 使用示例
# 输入需求示例:
"""
创建一个电商 Demo,包含:
- 商品列表展示
- 购物车功能
- 结账流程
- 使用 React + Node.js
"""

# AI 自动生成:
# 1. 项目结构
# 2. 前端页面组件
# 3. 后端 API
# 4. 数据库模型
# 5. 部署脚本

# 垂直领域模板:
# • 电商、社交、办公...
# 基于模板二次修改

# 效率提升:
# 30分钟完成传统开发需半天的工作量

🚀 SOLO 模式

SOLO 端到端自主开发
┌─────────────────────────────────────────────────────────────────────────┐ │ SOLO 模式核心 │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ 输入需求 → AI 自主拆解 → 计划生成 → 多轮编码 → 测试验证 │ │ │ │ ↓ │ │ │ │ 部署上线 🚀 │ │ │ │ │ │ │ │ 特点: │ │ │ │ • 需求到部署全流程自动化 │ │ │ │ • 双智能体架构协同 │ │ │ │ • Plan 模式:先规划再执行 │ │ │ │ • 规划卡 → 产物 → 部署步骤 │ │ │ │ │ │ │ │ 适用场景: │ │ │ │ • 复杂项目从 0 到 1 │ │ │ │ • 需要多模块协作的任务 │ │ │ │ • 端到端交付场景 │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────┘ │ │ │ │ 💡 SOLO Builder:通过自然语言从零构建完整应用 │ │ │ └─────────────────────────────────────────────────────────────────────────┘
SOLO vs Builder
# Builder 模式
# • 单次代码生成
# • 适合功能模块开发
# • 快速原型验证

# SOLO 模式
# • 自主多轮迭代
# • 端到端交付
# • 复杂项目首选

# 使用建议:
# 简单功能 → Builder
# 完整项目 → SOLO
Plan 模式
# SOLO 的 Plan 模式

# 1. 检索项目上下文
# 2. 生成详细开发计划
# 3. 调度子智能体分工协作

# 示例计划输出:
# ┌─────────────────────────────────────┐
# │ 任务规划                            │
# ├─────────────────────────────────────┤
# │ 1. 数据库设计 → 数据库专家智能体      │
# │ 2. API 开发 → 后端专家智能体         │
# │ 3. 前端页面 → 前端专家智能体         │
# │ 4. 测试验证 → 测试专家智能体         │
# │ 5. 部署上线 → DevOps 智能体          │
# └─────────────────────────────────────┘

🤖 @Agent 多代理系统

@Agent 智能体协作
┌─────────────────────────────────────────────────────────────────────────┐ │ @Agent 系统 │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ 核心特性 │ │ │ ├─────────────────────────────────────────────────────────────┤ │ │ │ • 自定义 Agent 技能 │ │ │ │ • MCP 协议支持(Model Context Protocol) │ │ │ │ • 多 Agent 协作 │ │ │ │ • .rules 行为规则配置 │ │ │ │ • 外部工具集成(Supabase、Vercel 等) │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────┘ │ │ │ │ 适用场景: │ │ • 复杂任务分解 │ │ • 跨模块协同开发 │ │ • 自动化工作流 │ │ │ └─────────────────────────────────────────────────────────────────────────┘

💡 Cue 预测性编码

Cue 智能预测
┌─────────────────────────────────────────┐ │ Cue 核心功能 │ ├─────────────────────────────────────────┤ │ │ │ ⚡ 预测性编码 │ │ • 预测下一个编辑点 │ │ • 一键完成 │ │ • 闪电速度编码 │ │ │ │ Cue-Pro 升级: │ │ • 仓库级编辑序列 │ │ • 保持编码流程 │ │ • 最大月度更新 │ │ │ └─────────────────────────────────────────┘
深度上下文补全
# 智能感知整个项目上下文

# 功能:
# • 自动检索项目内接口定义
# • 提示参数类型和返回值结构
# • 补全建议符合项目规范

# 大规模重构:
# • 同步更新所有关联调用点
# • 规避遗漏修改导致的错误
# • 减少手动追溯依赖链

# 技术实现:
# • 实时代码索引仓库
# • 跨文件理解能力
# • 增量编译 < 300ms

🎨 多模态功能

图像转代码
# 上传 UI 截图生成代码

# 支持:
# • Figma 截图
# • 设计稿导出图片
# • 手绘原型图

# 生成结果:
# • HTML/CSS 代码
# • 响应式布局
# • 保留设计细节

# 测试数据:
# • 电商商品卡片 → 90秒转化
# • 保留间距、字体等细节
# • 支持 hover 效果
Webview 实时预览
# 内置 Webview 预览

# 特点:
# • 所见即所得编辑
# • 右侧实时渲染
# • 支持交互事件响应

# 技术实现:
# • 基于 V8 引擎
# • 热重载机制
# • 增量编译 < 300ms

# 适用:
# • React 组件开发
# • Vue 组件开发
# • 样式调试

🔧 MCP 协议与 .rules

MCP 协议支持
┌─────────────────────────────────────────────────────────────────────────┐ │ MCP 协议(Model Context Protocol) │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────────┐ │ │ │ MCP 核心作用 │ │ │ ├─────────────────────────────────────────────────────────────┤ │ │ │ • 外部工具和资源的智能接入 │ │ │ │ • 自动化工作流编排 │ │ │ │ • 跨工具上下文共享 │ │ │ │ • Agent 任务路由和协调 │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────┘ │ │ │ │ .rules 行为规则: │ │ • 定义 Agent 行为约束 │ │ • 自定义技能集 │ │ • 配置文件:.trae/rules/ │ │ │ └─────────────────────────────────────────────────────────────────────────┘

🎯 快捷键速查

功能 Windows / Linux macOS
打开侧边 AI 对话 Ctrl + U Cmd + U
打开内嵌 AI 对话 Ctrl + I Cmd + I
打开浮动输入框 Ctrl + J Cmd + J
Builder 生成 Ctrl + Enter Cmd + Enter
接受 AI 代码 Tab Tab
拒绝 AI 代码 Esc Esc
命令面板 Ctrl + Shift + P Cmd + Shift + P
文件导航 Ctrl + P Cmd + P
全局搜索 Ctrl + Shift + F Cmd + Shift + F
代码补全 Ctrl + Space Ctrl + Space
关联当前文件(#) 在对话中输入 # 在对话中输入 #

📌 说明:更多快捷键可在 Trae 中通过 Ctrl/Cmd + Shift + P → "Keyboard Shortcuts" 查看和自定义

📦 扩展与配置

推荐扩展
# Git 增强
# • GitLens - 查看代码历史
# • Git Graph - 可视化分支

# 代码质量
# • ESLint - 代码检查
# • Prettier - 代码格式化
# • SonarLint - 问题发现

# 主题美化
# • One Dark Pro - 主题
# • Material Icon - 图标

# 其他工具
# • REST Client - API 测试
# • Docker - 容器支持
# • YAML / TOML - 配置文件

# VS Code 扩展兼容
# • 支持大部分 VS Code 插件
# • 无缝迁移
Trae 专属设置
# 1. AI 模型选择
# Settings → Trae → Model
# Claude-3.5-Sonnet / Claude-3.7-Sonnet
# DeepSeek-Reasoner(R1) / DeepSeek-Chat(v3)

# 2. Index 配置
# Settings → Trae → Index
# 索引范围、排除文件

# 3. Max Mode(深度编码)
# Settings → Trae → Max Mode
# 更大上下文窗口
# 更多工具调用

# 4. .traeignore
# 排除敏感文件
.env
secrets/
node_modules/

# 5. .rules 配置
# .trae/rules/*.rules
# 自定义 Agent 行为规则

🏢 其他国产 AI IDE

🤖 百度 Comate(文心快码)
┌─────────────────────────────────────────┐ │ 百度 Comate 核心优势 │ ├─────────────────────────────────────────┤ │ │ │ 🏛️ Multi-Agent 架构 │ │ • Zulu - 日常助手 │ │ • Plan - 策划专家 │ │ • Architect - 架构师 │ │ │ │ 📊 核心数据: │ │ • C++ 代码质量行业第一 │ │ • Python 首生成率 92.3% │ │ • 百度内部 80% 工程师使用 │ │ • 跨文件任务理解 91% │ │ • 代码采纳率 44%+ │ │ │ │ 💡 特色功能: │ │ • SPEC 规范驱动开发 │ │ • Figma2Code 设计稿转代码 │ │ • 200+ 语言支持 │ │ │ └─────────────────────────────────────────┘
  • 官网:comate.baidu.com
  • 形态:VS Code / JetBrains 插件
  • 定价:个人免费,企业版付费
💻 腾讯 CodeBuddy
┌─────────────────────────────────────────┐ │ 腾讯 CodeBuddy 核心优势 │ ├─────────────────────────────────────────┤ │ │ │ 🤖 Craft 智能体 │ │ • Plan 模式自动拆解任务 │ │ • 腾讯混元大模型驱动 │ │ │ │ 📊 核心数据: │ │ • 代码采纳率高达 93% │ │ • 腾讯内部 43% 代码 AI 生成 │ │ • 微信小程序开发提升 125% │ │ • 多语言支持 200+ │ │ │ │ 💡 特色功能: │ │ • 微信生态深度集成 │ │ • MCP 协议支持 │ │ • 设计稿一键转代码 │ │ • IDE / 插件 / CLI 多形态 │ │ │ └─────────────────────────────────────────┘
  • 官网:codebuddy.cloud.tencent.com
  • 形态:独立 IDE / VS Code 插件
  • 定价:个人免费,企业版付费
🛡️ 阿里 Lingma(通义灵码)
┌─────────────────────────────────────────┐ │ 阿里 Lingma 核心优势 │ ├─────────────────────────────────────────┤ │ │ │ 🧠 编程智能体 │ │ • Agent Mode 自主完成任务 │ │ • 千问 3 大模型驱动 │ │ │ │ 📊 核心数据: │ │ • Java/Go 覆盖率 98% │ │ • 200+ 语言支持 │ │ • 开发者满意率 87%+ │ │ • 哈啰集团 AI 代码采纳率 25% │ │ │ │ 💡 特色功能: │ │ • 阿里云生态深度集成 │ │ • 魔搭 MCP 市场 3000+ 服务 │ │ • 企业私有化部署支持 │ │ • 工程自动感知 │ │ │ └─────────────────────────────────────────┘
  • 官网:lingma.aliyun.com
  • 形态:独立 IDE / VS Code / JetBrains
  • 定价:个人免费,企业版付费