Composer vs 普通Chat的区别

Cursor 普通 Chat 模式只能给出代码建议，开发者需要手动复制粘贴到文件里。Composer 模式直接让 AI 编辑真实文件：跨多个文件同步修改、自动运行测试、迭代优化。这是 AI 编程从’辅助’到’主导’的代际升级。对项目升级、性能优化、重构这类跨文件任务尤其有效。

第一步：安装和初始化

  1. 从 https://cursor.com 下载 Cursor（基于 VS Code fork）
  2. 免费版支持 GPT-4o-mini 和 Claude 3.5，Pro 版 $20/月解锁完整模型
  3. 首次启动：File → Open Folder 打开你的项目根目录
  4. 建议先 .cursorignore 排除 node_modules、dist、.git 等大文件夹

第二步：Composer基础调用

  1. 快捷键 Ctrl+I（Mac: Cmd+I）唤起 Composer 输入框
  2. Composer 在右侧打开多文件编辑器
  3. 输入指令：’把所有 API 调用从 fetch 改为 axios，并加错误处理’
  4. Composer 会列出涉及的文件，每个文件给出 diff 预览
  5. 点击 ‘Accept All’ 一键应用所有修改，或单独 Accept/Reject 每个文件

第三步：@ 上下文指令

Composer 支持用 @ 引用上下文，让 AI 更精准：

  • @Files：引用项目文件作为上下文，例如 @file:src/api.ts @file:src/utils.ts
  • @Folders：引用整个文件夹
  • @Codebase：全代码库检索相关内容
  • @Web：让 Cursor 实时搜索互联网最新文档
  • @Docs：引用官方文档，例如 @Docs:React useEffect
  • @Git：引用最近的 git commit 或 diff

第四步：Agent 自动模式

Composer 的 Agent 模式让 AI 自主完成任务：

  1. Composer 输入框右上角切换到 ‘Agent’ 模式
  2. 指令：’为这个项目添加 JWT 鉴权，包括登录、刷新 token、中间件’
  3. Agent 会：自动探索代码库 → 创建所需文件 → 安装依赖 → 修改现有代码 → 运行测试 → 修复错误
  4. 过程中 Agent 会自主决策，遇到错误会自动修复

第五步：Rules 项目记忆

Rules 让 Cursor 记住项目规范：

  1. .cursor/rules 目录创建 .mdc 文件
  2. 内容示例：
    – ‘项目使用 TypeScript strict 模式，所有新代码必须有类型’
    – ‘API 调用统一用 axios，不要用 fetch’
    – ‘组件文件名用 PascalCase，工具函数用 camelCase’
  3. Composer 在生成代码时会自动遵守 Rules
  4. 可以创建多个 Rules 文件按目录作用域生效

第六步：常用 Composer 实战场景

场景1：依赖升级

指令：把 React 从 17 升级到 18，处理所有 breaking changes，跑一遍 build

场景2：性能重构

指令：这个列表页渲染慢，分析可能的性能瓶颈，重构到使用虚拟滚动，并跑 Lighthouse 评分

场景3：迁移框架

指令：把所有 class 组件迁移到 function 组件并使用 hooks

场景4：加测试

指令：给 src/services/ 下所有函数添加 Jest 单元测试，覆盖率达到 80%

场景5：文档生成

指令：给所有 export 函数加 JSDoc 注释，包括参数、返回值、示例

第七步：Yolo 模式（全自动）

Composer 的最强模式，开启后 AI 会全自动运行：

  1. Settings → Composer → 启用 ‘Yolo Mode’
  2. AI 会自主运行命令（npm install、git commit 等）无需人工确认
  3. 仅推荐用于测试环境或新项目初始化
  4. 生产项目建议关闭 Yolo，避免误操作

第八步：错误处理和回滚

  • Composer 的修改可一键 Reject，会回到修改前状态
  • Composer 自动创建 git checkpoint（开启 Settings → Auto-checkpoint）
  • 如需回退到 Composer 修改前：git checkout HEAD~ 或用 Git 工具回滚 commit

常见问题与误区

  • Composer 修改太激进：可限制每个 Composer 任务只改 N 个文件，避免大范围破坏
  • AI 误删代码：开启 Auto-checkpoint + 频繁 git commit 是必要保险
  • @Web 检索慢：可关闭实时检索，使用内置的代码知识
  • Composer 卡顿：超大型项目建议分模块使用，每次只处理 1-2 个目录

效率数据

实测对比：中型 React 项目（200+ 文件）做 React 18 升级，传统手动约 2-3 天，Composer 平均 1-2 小时完成初版，人工只需核查。性能优化类任务（如加虚拟滚动）从半天压缩到 20 分钟，效率提升 12 倍。