我正在参加 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