我正在参加 Trae AI 编码从入门到实践线上共学第一期，Trae 免费下载链接： www.trae.ai
1. AI IDE和AI Extensions
1.1 AI 编程应用形式
| 应用形式 | 应用工具 | 补充说明 |
|---|---|---|
| LLM多模态模型 | GPT、Gemini、DeepSeek、Kimi、通义千问 | 通过三方大模型问答协助处理日常工作 |
| AI Extensions | Copilot、MarsCode、通义灵码 | 在传统的IDE中安装支持大模型能力的插件，便捷使用插件辅助工作 |
| AI IDE | Cursor、Trae | 内置大模型的IDE，并且IDE本身丰富了AI能力相关的交互，原本插件做不了的事情，AI IDE能个性化适配 |
| AI Agent | Devin、Manus | AI 智能体，智能体直接帮助用户做一系列的工作，不需要一问一答式引导。一个完整的需求，AI 智能体能够搜索资料，操作浏览器，操作其他应用，来实现用户需求 |
1.2 AI 编程工具
- 选择AI IDE的场景
- 需要开箱即用的全流程智能开发体验
- 优先考虑快速启动和统一操作逻辑（适合个人或轻量团队）
- 选择AI插件的场景
- 已有成熟IDE，仅需局部增强AI能力（如代码补全）
- 对灵活性和成本敏感，需复用现有工具链（适合企业级项目）
- 混合方案
- 大型团队可同时使用AI IDE（探索性开发）和AI插件（维护旧项目），通过工具组合平衡效率与稳定性
1.3 AI IDE 和 AI 插件 的对比
| 对比指标 | AI IDE | AI 插件 | 对比说明 |
|---|---|---|---|
| 集成深度 | 原生内置AI功能，深度嵌入开发流程 | 以插件形式扩展IDE功能 | AI IDE无需额外配置，开箱即用；插件依赖宿主IDE的兼容性和性能。 |
| 功能范围 | 全流程覆盖（编码、调试、测试、部署） | 聚焦特定功能（如代码补全、注释生成） | AI IDE提供端到端支持；插件通常专注单一场景。 |
| 学习成本 | 统一操作逻辑，学习曲线平缓 | 需适应插件与宿主IDE的交互逻辑 | AI IDE界面和功能更一致；插件可能需要额外学习插件管理。 |
| 定制性 | 功能固定，定制性较低 | 可自由组合多个插件，灵活性强 | 插件用户可根据需求选择不同工具组合。 |
| 性能影响 | 优化较好，资源占用更合理 | 依赖宿主IDE性能，可能拖慢响应速度 | AI IDE针对AI功能优化；插件可能因多进程通信增加延迟。 |
| 适用场景 | 全流程智能化开发（中小型团队、个人项目） | 现有项目局部增强（企业级复杂项目） | AI IDE适合轻量化开发；插件适合逐步改造传统项目。 |
| 更新频率 | 版本迭代较慢，功能更新系统化 | 插件更新灵活，依赖第三方开发者 | AI IDE更新需整体升级；插件可单独更新或替换。 |
| 成本 | 通常需订阅付费（如Cursor Pro） | 部分免费，高级功能需付费 | AI IDE成本较高；插件可通过免费方案降低开支。 |
| 兼容性 | 独立运行，无兼容性问题 | 依赖宿主IDE版本，可能冲突 | 插件需适配不同IDE版本（如VS Code更新可能导致插件失效）。 |
| 数据隐私 | 依赖云端服务，需关注数据安全 | 可选择本地化部署的插件 | 企业敏感场景可能更倾向支持本地处理的插件。 |
| 生态支持 | 生态较新，工具链有限 | 依托成熟IDE生态（如VS Code Marketplace） | 插件可复用现有IDE生态的丰富资源（如调试器、主题等）。 |
| 用户体验 | 界面统一，交互流畅 | 界面分散，需切换不同插件面板 | AI IDE操作更集中；插件功能可能分布在多个菜单中。 |
| 典型工具 | Cursor, GitHub Copilot Workspace | GitHub Copilot（插件版）, Tabnine, Codeium | AI IDE代表工具更垂直；插件生态更碎片化。 |
2. Trae功能介绍
-
智能问答
AI问答，这个功能已经很普遍了。常用的AI插件tongyilingma、marscode等都支持 在编写代码时，你可以随时与 AI 助手对话，获得代码解释、代码注释和错误修复等帮助
-
实时代码建议
AI 助手能够理解当前代码并在编辑器中实时提供代码建议，提升编程效率
-
代码片段生成
通过自然语言描述你的需求，AI 助手将生成相应的代码片段，甚至能够编写项目级或跨文件的代码。
-
从 0 到 1 开发项目
告诉 AI 助手你想开发的程序，AI 助手将根据你的描述提供相关代码或自动创建所需文件
AI助手详细手册参考Trae Builder 模式文档
3. Trae国内版安装
下载Windows安装包，根据引导进行安装即可
选择手机号验证码登录或者juejin掘金账号授权登录 登录后点击登录并打开Trae
登录后主页面如下
4. 导入设置
因为安装过程我导入了Cursor配置，所以之前在Cursor安装的插件，此处也安装好了。
安装过程中没有导入，也可以安装后在设置中找到导入配置。
或者也可以重新配置Trae，Trae和Cursor一样也是基于VS Code开发的IDE，熟悉VS Code的人易上手。
配置可以参考文末的《零代码基础也能玩转AI编程！Cursor免费版「Tab补全+Chat对话」实战教学》或《Trae国内版文档》
5. 添加模型
打开设置，添加模型
Trae内置了一些模型，可以直接选择指定的厂商和厂商下指定的模型，输入API Key添加模型即可
也可以自定义模型，录入厂商支持的模型ID添加模型即可
6. Trae-Chat模式
Trae-Chat输入： 请介绍下你的功能特性，能帮助我完成哪些工作
Trae-Chat输出：
作为您的AI编程助手，我主要具备以下核心功能来协助您的开发工作：
- 智能代码编辑
- 精准定位代码位置进行局部修改
- 自动保持原有代码格式和注释
- 支持多语言文件编辑（Python/Java/C++/JS等）
- 示例：
python:src/utils/data_processor.py# ... 已有导入语句... def process_data(data): # ... 原有处理逻辑... # 新增数据校验逻辑 if not validate_data(data): raise ValueError("Invalid data format") # ... 后续处理代码...
- 技术问题诊断
快速识别语法错误和逻辑缺陷
提供可立即应用的修复方案
支持全技术栈问题排查（前端/后端/数据库等）
- 开发流程支持
- 生成项目初始化命令
bashnpm init vite@latest . -- --template react-ts
提供CI/CD配置建议
数据库迁移脚本生成
- 架构设计辅助
推荐模块化设计方案
绘制类关系图建议
接口设计规范指导
- 跨平台支持
自动适配Windows/macOS/Linux命令差异
识别不同OS的文件路径规范
提供多环境配置建议
- 安全开发保障
- 自动检测潜在安全漏洞
- 遵守版权规范建议
- 隐私数据处理方案
典型应用场景：
- 快速生成功能模块脚手架代码
- 现有项目代码的增量修改
- 技术方案可行性评估
- 第三方库集成指导
- 性能优化建议
- 错误日志分析
我会严格遵守代码规范要求，在保持您原有项目结构的前提下提供最小化修改建议。当需要查看完整文件内容时，您可以随时提供相关代码上下文。
7. Trae-Builder模式
点击启用Builder，默认给出3个模型，仍然可以自定义添加模型
添加模型时发现Chat和Builder模式的自定义模型不互通，在Chat模式下添加的自定义模型，Builder模式下看不到，所以这里在Builder模式下添加了一个新的模型
当然有内置的模型，你可以直接使用内置的Doubao-1.5-pro、DeepSeek-Reasoner（R1）、DeepSeek-Chat（V3）
8. 请帮我生成一个贪吃蛇游戏
首先Trae开始思考并输出思考过程
然后开始回答用户的问题，并开始生成代码实现贪吃蛇游戏
Trae-Builder输入： 使用 web 技术栈生成一个贪吃蛇游戏
Trae-Builder输出：
好的，我将协助您用Web技术开发贪吃蛇游戏。首先会创建基础HTML结构和CSS样式，然后使用JavaScript实现核心游戏逻辑：包括蛇的移动控制、食物生成机制、碰撞检测以及得分系统。建议采用Canvas渲染游戏画面确保性能，并通过键盘事件监听实现方向控制。初步需要创建index.html、style.css和game.js三个文件构建完整游戏框架。
现在我将创建游戏所需的基本HTML文件，用于构建页面结构并引入必要的样式和脚本文件。 index.html + 20 - 0 审查 现在创建样式文件，定义游戏界面布局、画布样式以及控制按钮的视觉效果。 style.css + 41 - 0 审查 接下来需要实现JavaScript核心逻辑，包括初始化游戏、处理键盘控制、更新蛇位置、检测碰撞以及生成食物等功能。 game.js + 112 - 0 审查 现在需要启动本地开发服务器来运行游戏，这样可以通过浏览器访问并进行测试。 snake 终端 npx http-server -p 8080 现在可以打开预览链接进行游戏测试了。 预览 已完成贪吃蛇游戏的Web开发实现，包含以下内容：
- 创建基础HTML结构(index.html)并引入必要资源
- 编写CSS样式(style.css)定义游戏界面布局与视觉效果
- 开发JavaScript核心逻辑(game.js)实现： ▸ 蛇体移动与方向控制 ▸ 食物生成与碰撞检测 ▸ 得分统计与游戏状态管理 ▸ 画布渲染功能
- 配置本地开发服务器用于实时预览
- 添加开始游戏按钮与键盘控制提示
走到生成页面结构时，生成了HTML文件，需要点击应用后，Trae继续下一步
走到生成样式文件时，生成了CSS文件，需要点击应用后，Trae继续下一步
走到生成游戏逻辑控制文件时，生成了JS文件，需要点击应用后，Trae继续下一步
如下所示
当文件全部生成后，Trae提示我可以运行看游戏效果了
点击Builder模式对话中的运行，Trae会自动运行贪吃蛇游戏的Web服务，并提供了预览功能，可以在Trae内直接打开一个Web页签查看游戏运行效果 当然我们直接去浏览器打开localhost:8080也是一样的
需要关闭运行中程序，在终端通过Ctrl + C快捷键关闭贪吃蛇游戏服务即可
9. Trae国内版官方活动
扫二维码极速参加活动，领好礼哈
参考文档： 零代码基础也能玩转AI编程！Cursor免费版「Tab补全+Chat对话」实战教学 Trae国内版文档 Powered By niaonao