101 Cursor IDE 高效开发
掌握 Cursor Composer Agent，理解 Cursor 与 Codex 的协作边界，构建前后端分离的开发工作流。
学习目标
完成本课程后，你将能够：
一、Cursor Composer Agent 概述
Cursor 是基于 VS Code 深度定制的 AI IDE。其核心能力来自 **Composer Agent**——一个能理解整个项目、执行多文件编辑的 AI 智能体。
Composer Agent vs 普通 Chat
| 特性 | 普通 Chat | Composer Agent |
|---|---|---|
| 文件编辑 | 输出代码，手动粘贴 | 直接修改项目文件 |
| 上下文 | 单文件或选中文本 | 全项目范围 |
| 多步操作 | 不支持 | 支持（创建文件+修改+删除） |
| 终端执行 | 不支持 | 支持运行命令 |
| 错误修复 | 输出建议 | 自动读取错误并修复 |
启动 Composer Agent
- 快捷键：`Cmd+I`（macOS）/ `Ctrl+I`（Windows）
- 或在 Chat 面板切换到 "Agent" 模式
二、.cursorrules 配置
`.cursorrules` 是 Cursor 的项目配置文件，功能等同于 Codex 的 `codex.yaml`。放在项目根目录即可生效。
配置示例
你是一个全职前端工程师，精通 React 和 TypeScript。
项目技术栈：
- Next.js 14 App Router
- TypeScript 严格模式
- Tailwind CSS 做样式
- Zustand 做状态管理
编码规范：
- 组件按功能放在 src/components/{feature}/ 目录
- 每个组件文件只导出一个组件
- 优先使用 Server Components，交互逻辑抽取为 Client Components
- Props 必须定义 interface，不允许使用 inline type
- 事件处理器命名：handle{Event}，如 handleSubmit
- 避免在 JSX 中写复杂逻辑，抽取为变量或函数
组件拆分原则：
- 单个组件不超过 150 行
- 重复 UI 片段提取为独立组件
- 业务逻辑放在 custom hook 中
禁止：
- 不使用 any 类型
- 不使用 CSS-in-JS（项目统一用 Tailwind）
- 不直接操作 DOM（用 React 方式）.cursorrules 与 codex.yaml 的关系
| 维度 | .cursorrules | codex.yaml |
|---|---|---|
| 所属工具 | Cursor IDE | Codex CLI |
| 格式 | 纯文本（Markdown 风格） | YAML 结构化 |
| 侧重 | 前端编码行为和组件规范 | 全栈工作流和工具链 |
| 共享 | 可以内容复用，但要放在各自文件里 |
**💡 提示：** 可以在两个文件中保持编码规范一致。写一份共享的"编码规范文档"，然后在 `.cursorrules` 和 `codex.yaml` 中各自引用。
三、Tab 补全与内联编辑
Tab 补全
Cursor 的 Tab 补全不仅补全单行代码，还能**预测并补全整个代码块**：
- 输入函数名，Tab 补全会预测函数体
- 写注释描述意图，Tab 会生成对应代码
- 修改一处后，Tab 会预测其他需要同步修改的位置
内联编辑（Cmd+K）
选中一段代码，按 `Cmd+K`（macOS）/ `Ctrl+K`（Windows），输入修改意图：
# 选中一段代码后，输入：
提取为独立函数 handleFormSubmit
把这个 if-else 改成 switch
添加 loading 和 error 状态处理Cursor 会直接替换选中代码，并保持风格一致。
四、什么时候用 Cursor，什么时候用 Codex
这是多工具协同的核心决策。错误的工具选择会降低效率。
决策矩阵
| 场景 | 推荐工具 | 理由 |
|---|---|---|
| 写 UI 组件 | Cursor | 实时预览、Tab 补全、内联编辑快 |
| 调整样式和布局 | Cursor | 所见即所得，频繁微调 |
| 初始化项目/脚手架 | Codex | 自动执行多条命令，一气呵成 |
| 后端 API 开发 | Codex | 终端原生，配合 curl/Postman 测试 |
| 数据库 Migration | Codex | 直接执行 prisma/drizzle 命令 |
| 写测试 | 两者皆可 | Cursor 直观，Codex 可批量生成 |
| 跨文件重构 | Codex | 自主执行，无需逐个确认 |
| DevOps/Docker/CI | Codex | 终端操作，Shell 管道集成 |
| 代码审查 | Codex | 全项目范围分析 |
| Git 操作 | Codex | 直接生成 commit message & PR |
混合工作流：Cursor + Codex
前端（Cursor） 后端 & DevOps（Codex）
┌─────────────────┐ ┌─────────────────┐
│ 页面组件开发 │ │ API 路由开发 │
│ UI 样式微调 │ ──> │ 数据库操作 │
│ 交互逻辑实现 │ │ 测试编写 │
│ 内联代码重构 │ │ Docker 部署 │
└─────────────────┘ └─────────────────┘
│ │
└──────── 共享 codex.yaml ───┘**实际工作流示例：**
- 用 Codex 初始化项目 + 配置 Docker
- 用 Cursor 开发前端页面和组件
- 用 Codex 写后端 API 和数据库逻辑
- 用 Cursor 做前端代码审查和微调
- 用 Codex 执行测试、生成 commit message、提交
五、Cursor + Codex 实战：前后端分离开发
场景：开发用户管理模块
**用 Codex 搭建后端：**
创建一个用户管理 API：
- POST /api/users — 创建用户
- GET /api/users — 获取用户列表（分页）
- GET /api/users/[id] — 获取单个用户
- PATCH /api/users/[id] — 更新用户
- DELETE /api/users/[id] — 删除用户
使用 Prisma + PostgreSQL，生成 migration**用 Cursor 开发前端：**
在 Cursor 中打开项目，用 Composer Agent：
创建用户管理页面 /admin/users：
- 用户列表表格（分页、搜索、排序）
- 新建/编辑用户弹窗
- 删除确认对话框
参考已有组件的风格和 @src/lib/api.ts 的调用方式六、本课总结
**核心要点：**
- Cursor Composer Agent 是 IDE 内的 AI 助手，适合 UI 和前端工作
- .cursorrules 与 codex.yaml 功能相似但服务于不同工具
- Tab 补全和内联编辑（Cmd+K）是 Cursor 的高频场景
- Cursor 管前端 UI，Codex 管后端 & DevOps——这是最合理的分工
- 两种工具可以无缝配合：Codex 初始化项目，Cursor 写页面，Codex 做测试和部署
**下一步：** 下一课学习 GitHub Copilot 的深度用法，理解 Copilot + Cursor + Codex 三者的定位差异与最佳组合。