2.3 本地 IDE 工具:Cursor、Trae
本地 IDE 是 AI 编程的主战场,适合长期项目开发和系统性学习。
适合人群:
- 想系统学习编程的开发者
- 需要开发复杂项目
- 追求代码质量和可维护性
- 需要版本控制和团队协作
工具选择:Cursor vs Trae
快速对比
| 对比维度 | Cursor | Trae |
|---|---|---|
| AI 模型 | GPT-4, Claude 3.5 Sonnet | Claude 3.7/3.5(国际版), DeepSeek(国内版) |
| 价格 | $20/月(Pro) | 更便宜,国内版尤其划算 |
| 中文支持 | 良好 | 优秀 |
| 网络要求 | 需要稳定国际网络 | 国内版无需特殊网络 |
| 功能更新 | 快速 | 稳定 |
| 推荐人群 | 国际化项目,追求最新功能 | 国内开发者,注重性价比 |
选择建议:
- Cursor: 网络稳定、预算充足、追求最新功能
- Trae: 国内开发、预算有限、中文项目为主
- 两者都试: 免费版都够用,先体验再决定
Cursor
Cursor - 功能最强的 AI IDE
核心特点
- ✅ AI 能力强: GPT-4 + Claude 双引擎
- ✅ 多智能体协作: 同时开发多个功能(2.0 新特性)
- ✅ 内置浏览器: AI 自动测试代码
- ✅ 代码审查: 增强型 diff 视图
- ✅ 项目理解: 语义搜索整个代码库
安装配置
下载安装
- 访问 https://cursor.com/download
- 下载对应系统的安装包
- 安装并启动
登录账号
- 使用 GitHub 或 Google 登录
- 选择订阅计划(免费版够用)
配置 AI 模型
- 打开设置(
Cmd/Ctrl + ,) - 选择 AI Models
- 配置主模型:
- GPT-4: 通用能力强
- Claude 3.5 Sonnet: 编程能力更强(推荐)
核心功能详解
1. Composer 模式 - 项目级 AI 助手
使用快捷键: Cmd/Ctrl + I
特点:
- 理解整个项目上下文
- 可以同时修改多个文件
- 响应速度快(2.0 版本提升 4 倍)
使用示例:
创建一个用户认证系统,包含:
- 登录/注册页面
- JWT token 管理
- 受保护的路由
- 用户信息存储AI 会自动:
- 分析项目结构
- 创建必要的文件
- 修改路由配置
- 集成认证逻辑
2. Chat 模式 - 对话式编程
使用快捷键: Cmd/Ctrl + L
特点:
- 快速问答
- 代码解释
- 调试帮助
使用场景:
# 询问代码含义
这段代码是做什么的?
# 寻求帮助
这个报错怎么解决: Cannot find module 'react'
# 优化建议
这个函数性能不好,帮我优化3. Inline Edit - 行内编辑
使用快捷键: Cmd/Ctrl + K
特点:
- 选中代码直接修改
- 快速重构
- 代码优化
使用流程:
- 选中要修改的代码
- 按
Cmd/Ctrl + K - 描述修改需求
- AI 直接在原位置修改
4. 多智能体并行(2.0 新特性)
适用场景: 大型项目,多个独立功能同时开发
示例:
# Agent 1: 开发前端组件
创建用户列表组件,支持分页和搜索
# Agent 2: 开发 API 接口
实现用户 CRUD 的 RESTful API
# Agent 3: 数据库设计
设计用户表结构和关系
# Agent 4: 测试用例
为所有功能编写单元测试新手建议: 先熟悉单 Agent 工作流,再尝试多 Agent。每个 Agent 有独立的 git worktree,避免冲突。
5. 内置浏览器测试
工作流程:
- AI 编写代码
- 自动在内置浏览器测试
- 发现问题自动修复
- 确认无误后提交
好处: 减少手动刷新浏览器的次数,AI 自己验证代码质量
Cursor 最佳实践
提示词技巧:
-
项目级任务用 Composer
✅ 好: 重构整个认证系统,使用 OAuth 2.0 ❌ 差: 改一下登录按钮颜色 -
快速问答用 Chat
✅ 好: 这个 API 错误是什么原因? ✅ 好: useState 和 useRef 有什么区别? -
代码优化用 Inline Edit
✅ 好: (选中函数) 优化性能并添加错误处理 ❌ 差: 从零写一个新组件 -
一次一个明确需求
✅ 好: 添加用户头像上传功能 ❌ 差: 添加用户头像、个人资料编辑、密码修改、邮箱验证...
新手必会的 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 编程工具