⏱ 本页预计时间
阅读 12 分钟 · 练习 60 分钟
2.3 本地 IDE 工具:Trae、Cursor
本地 IDE 是 AI 编程的主战场,适合长期项目开发和系统性学习。
适合人群:
- 想系统学习编程的开发者
- 需要开发复杂项目
- 追求代码质量和可维护性
- 需要版本控制和团队协作
工具选择:Trae vs Cursor
快速对比
| 对比维度 | Trae | Cursor |
|---|---|---|
| AI 模型 | Gemini、GPT(国际版)；豆包、DeepSeek、Kimi(国内版) | GPT, Claude、Gemini |
| 价格 | 国际版：$10/月；国内版目前还是免费的 | $20/月(Pro) |
| 中文支持 | 优秀 | 良好 |
| 网络要求 | 国内版无需特殊网络 | 需要稳定国际网络 |
| 功能更新 | 稳定 | 快速 |
| 推荐人群 | 国内开发者，注重性价比 | 国际化项目，追求最新功能 |
选择建议:
- Trae: 国内开发、预算有限、中文项目为主
- Cursor: 网络稳定、预算充足、追求最新功能
- 两者都试: 免费版都够用，先体验再决定
Trae
Trae - 国内开发者的最佳选择
官网:
- 国际版: https://trae.ai (需要特殊网络)
- 国内版: https://trae.cn (直接访问)
版本选择
核心特色功能
1. Trae Solo 模式 - AI 自主完成项目
特点: AI 像一个独立开发者，自主规划并完成整个项目
使用示例:
我想做一个番茄工作法 App,包含:
- 25 分钟倒计时功能
- 休息时间智能提醒
- 任务列表管理
- 统计功能(今日/本周完成的番茄数)
- 简洁美观的界面AI 会自动:
- 规划项目结构
- 创建所有必要文件
- 实现所有功能
- 测试并修复 bug
- 提供完整可运行的项目
Solo 模式适用场景:
- 完整的小型项目(Todo、计算器、简单网站)
- 系统性功能模块
- 需要多个文件协同的任务
2. 智能代码补全
特点:
- 根据上下文智能预测
- 支持多行补全
- 自动导入依赖
体验: 类似 GitHub Copilot，但中文理解更好
3. 项目级问答
使用场景:
# 理解代码库
这个项目的架构是什么?
# 寻找代码
用户认证逻辑在哪个文件?
# 调试帮助
为什么登录后跳转不正确?Trae 安装配置
下载安装
- 访问 https://trae.cn (国内版) 或 https://trae.ai (国际版)
- 下载对应系统版本
- 安装并启动
注册登录
- 使用手机号或邮箱注册
- 国内版支持微信登录
选择 AI 模型
- 打开设置
- 选择模型:
- 国内版: 豆包 code(推荐)
- 国际版: Gemini3(推荐)
开始使用
- 创建或打开项目
- 尝试 Solo 模式或对话模式
- 熟悉快捷键
Trae 最佳实践
使用技巧:
-
Solo 模式最适合完整项目
✅ 好: 创建一个完整的博客系统 ✅ 好: 实现用户管理模块(增删改查) ❌ 差: 改一个按钮的颜色 -
中文提问效果更好
✅ 好: 帮我实现用户登录功能,要求支持手机号和邮箱两种方式 ⚠️ 可以但不必要: Implement user login with phone and email -
结合 DeepSeek 的推理能力
✅ 好: 分析这段代码的性能瓶颈并给出优化方案 ✅ 好: 这个架构设计有什么问题?如何改进?
新手必会的 5 个实用技巧
这些是最实用的基础操作，会了这些就能流畅使用 AI IDE 了。
1. @ 引用文件（最常用）
作用：让 AI 看到具体文件的内容
使用方法：
- 在对话框输入
@ - 出现文件列表
- 输入文件名搜索
- 选择文件
示例：
@app/page.tsx 这个文件的代码有什么问题？
@components/Button.tsx 参考这个按钮组件，帮我创建一个类似的卡片组件小技巧：一次可以 @ 多个文件，AI 会综合理解它们的关系。
2. 粘贴图片（超级方便）
作用：给 AI 看界面设计稿、参考图、错误截图
使用方法：
- 截图或复制图片
- 直接粘贴到对话框（
Cmd/Ctrl + V） - AI 会自动识别图片内容
常见用途：
# 根据设计稿写代码
[粘贴设计稿]
按照这个设计稿，帮我实现这个页面
# 让 AI 看报错
[粘贴报错截图]
这个错误怎么解决？
# 参考其他网站
[粘贴参考网站截图]
做一个类似这样的导航栏3. 选择文件夹（批量操作）
作用：让 AI 理解整个文件夹的结构和内容
使用方法：
- 输入
@ - 选择 “Add folder”
- 选择要添加的文件夹
适用场景：
@components/ 文件夹里的所有组件，统一改成 TypeScript
@src/utils/ 这个文件夹下的工具函数，帮我写一下注释4. 在命令行中打开（快速启动）
Mac 用户：
# 在项目文件夹中，直接输入
cursor . # 打开 Cursor
# 或者
trae . # 打开 TraeWindows 用户：
# 在项目文件夹中，右键选择
"Open with Cursor"
# 或
"Open with Trae"前提：安装时要勾选”添加到 PATH”，或者安装后在设置里启用。
5. 快捷键速查（新手版）
| 功能 | 快捷键 | 说明 |
|---|---|---|
| 打开 AI 对话 | Cmd/Ctrl + L | 最常用，问问题、要代码 |
| 选中代码提问 | Cmd/Ctrl + K | 选中代码后改进或解释 |
| 项目级任务 | Cmd/Ctrl + I | 创建多个文件、大功能 |
| 接受 AI 建议 | Tab | AI 自动补全代码时按 Tab 接受 |
| 保存文件 | Cmd/Ctrl + S | 修改后记得保存 |
记住这个：90% 的时间你只需要 Cmd/Ctrl + L 打开对话，然后用自然语言说你要什么就行了。
新手练习：做一个简单网页
🎯
目标：用 AI IDE 做一个能用的网页，体验完整流程
难度：⭐（超简单） 时间：30 分钟
你会学到：
- 怎么让 AI 帮你写代码
- 怎么看效果
- 怎么改东西
第一步：打开 IDE，创建文件夹
- 打开 Cursor 或 Trae
- 点击 “Open Folder”
- 创建一个新文件夹，比如
my-first-page - 选择这个文件夹
第二步：跟 AI 说你要什么
按 Cmd/Ctrl + L 打开对话框，复制这段话发给 AI：
帮我创建一个简单的个人介绍网页，要求：
1. 包含内容：
- 我的名字和一句话介绍
- 我的 3 个爱好（用列表显示）
- 一个联系我的按钮
2. 界面要求：
- 居中显示
- 用好看的配色
- 简洁现代的设计
请创建 HTML、CSS 文件，并告诉我怎么运行。第三步：等 AI 写完代码
AI 会自动：
- 创建
index.html文件 - 创建
style.css文件 - 写好所有代码
- 告诉你怎么打开看效果
你什么都不用做，就看着它工作就行。
第四步：打开浏览器看效果
AI 会告诉你方法，一般是：
方法 1（最简单）：
- 找到
index.html文件 - 双击打开
方法 2（更专业）：
- 在 VS Code 装 “Live Server” 插件
- 右键 index.html → “Open with Live Server”
第五步：改点东西试试
不满意？直接告诉 AI 改：
# 改颜色
背景色改成浅蓝色
# 改内容
把爱好改成 5 个
# 加功能
加一个头像图片
# 改样式
字体改大一点，让标题更突出每次改完，刷新浏览器就能看到效果。
恭喜！ 🎉
你刚刚用 AI 做出了第一个网页！
接下来可以：
- 继续改进这个网页（加图片、改样式）
- 试试做一个简单的计算器
- 做一个个人简历页面
下一节: CLI 工具:Claude Code、Codex - 命令行 AI 编程工具
学习进度0%
0/60 篇已完成
Last updated on