Composer 多文件编辑指南
Composer 是 IfAI 强大的 AI 驱动多文件编辑引擎。通过智能并行编辑和精细控制，在整个代码库中进行复杂的更改。
什么是 Composer？
Composer 允许您描述高级更改，让 AI 同时处理多个文件中的实现。
核心能力
| 功能 | 描述 |
|---|---|
| 并行编辑 | 同时修改多个文件 |
| 差异预览 | 应用前查看更改 |
| 选择性应用 | 接受或拒绝单个更改 |
| 冲突检测 | 智能处理重叠编辑 |
| 一键回滚 | 撤销所有应用的更改 |
理想使用场景
- 重构：跨文件重命名函数、提取组件
- 功能实现：跨越多个模块添加新功能
- Bug 修复：修复影响多个文件的问题
- 代码风格更新：全局应用格式或模式更改
- 迁移：更新 API 调用、升级依赖项
打开 Composer
键盘快捷键
按 Cmd+Shift+K（Mac）或 Ctrl+Shift+K（Windows/Linux）
从 AI 聊天
当 AI 建议多文件更改时，点击"在 Composer 中打开"
命令面板
Cmd+Shift+P > "Composer: 打开"
Composer 界面
视觉概览
布局图
┌─────────────────────────────────────────────────────────────────┐
│ Composer [应用] [×]│
├──────────────┬──────────────────────────────────────────────────┤
│ │ │
│ 文件列表 │ 差异视图 │
│ ┌────────┐ │ ┌─────────────────────────────────────────┐ │
│ │ ✅ auth.ts│ │ │ src/auth/login.ts │ │
│ │ ✅ api.ts│ │ │ │ │
│ │ ✅ types │ │ │ - function login(user) { │ │
│ │ ⬜ utils│ │ │ + async function login(user) { │ │
│ │ │ │ │ const token = await authenticate│ │
│ │ │ │ │ + return { token, user } │ │
│ └────────┘ │ │ } │ │
│ │ │ │ │
│ [全部展开] │ └─────────────────────────────────────────┘ │
│ │ │
│ 描述: │ "为登录添加 async/await 并返回 token" │
└──────────────┴──────────────────────────────────────────────────┘界面元素
- 文件列表：显示所有包含建议更改的文件
- 复选框：切换要应用的更改
- 差异视图：更改的并排比较
- 应用按钮：应用所有选中的更改
- 描述：所做更改的摘要
工作流程
步骤 1：描述更改
在 Composer 输入中，描述您想要完成的内容：
为服务层的所有 API 调用添加错误处理或更具体：
重构认证系统：
1. 添加 JWT 令牌刷新逻辑
2. 更新所有 API 调用以包含认证头
3. 添加注销功能
4. 更新新认证状态的类型步骤 2：审查提案
AI 分析您的代码库并提出更改：
- 文件分析：扫描受影响的文件
- 更改检测：识别具体修改
- 差异生成：创建前后比较
- 验证：检查语法和逻辑错误
步骤 3：接受/拒绝更改
独立审查每个文件：
| 操作 | 快捷键 | 描述 |
|---|---|---|
| 切换更改 | Space | 启用/禁用特定文件 |
| 查看差异 | Enter | 查看详细更改 |
| 全部接受 | Cmd+A | 选中所有文件 |
| 全部拒绝 | Cmd+D | 取消选中所有文件 |
| 应用选中的 | Cmd+Enter | 应用选中的更改 |
步骤 4：应用到项目
点击应用将更改写入文件：
- 文件以原子方式更新
- Git 跟踪更改
- 可用
Cmd+Z撤销
功能
并行编辑
Composer 同时处理多个文件：
您的请求: "在所有服务中将 getUser 重命名为 fetchUser"
AI 处理：
├── 分析 src/services/user.service.ts
├── 分析 src/services/auth.service.ts
├── 分析 src/services/admin.service.ts
└── 并行更新所有 3 个文件...差异预览
准确查看将更改的内容：
src/services/user.service.ts
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- function getUser(id: string) {
+ async function fetchUser(id: string) {
return await api.get(`/users/${id}`);
}选择性应用
选择要应用的更改：
☑️ user.service.ts - 3 处更改
☑️ auth.service.ts - 2 处更改
☐ admin.service.ts - 1 处更改 ← 取消选中以排除
☐ types.ts - 1 处更改 ← 取消选中以排除撤销支持
回滚应用的更改：
- 立即撤销：应用后按
Cmd+Z - Git 回退：如果已提交则回退提交
- 恢复备份：Composer 在应用前创建备份
版本控制
在运行大型更改的 Composer 之前，请始终提交您的工作。
最佳实践
1. 从小处着手
从范围明确的专注更改开始：
✅ 好的: "为 API 客户端添加错误日志"
❌ 不好的: "改进整个应用程序"2. 具体明确
提供清晰的所需详细信息：
✅ 好的: "为用户服务添加 TypeScript 类型"
❌ 不好的: "修复用户服务"3. 仔细审查
应用前始终审查差异：
- 检查意外更改
- 验证逻辑正确
- 确保无语法错误
4. 使用版本控制
在主要的 Composer 操作之前提交：
bash
git commit -am "Composer 重构之前"
# 运行 Composer
git diff # 审查更改
git commit -am "Composer 重构之后"5. 应用后测试
运行测试以验证更改有效：
bash
npm test
# 或
pytest
# 或
cargo test技巧和窍门
上下文提示
帮助 AI 更好地理解您的项目：
为 React 应用添加 Redux 进行状态管理。
当前状态使用 useState 钩子处理。文件范围
限制对特定文件的更改：
仅更新 utils/auth.ts 文件以使用新 API模式匹配
要求一致的模式：
将此日志模式应用于所有服务方法：
- 在方法开始时添加 console.log
- 使用 try/catch 记录错误批量操作
分组相关更改：
对于所有 API 服务文件：
1. 添加重试逻辑
2. 添加超时配置
3. 添加错误类型定义高级用法
多阶段重构
将复杂的更改分解为阶段：
阶段 1: "将认证逻辑提取到 auth.service.ts"
阶段 2: "更新所有使用者以使用新的认证服务"
阶段 3: "从组件中删除旧的认证代码"自定义模式
指定要遵循的代码模式：
将此模式应用于所有异步函数：
- 使用 try/catch 进行错误处理
- 返回 { data, error } 对象
- 在抛出之前记录错误条件更改
根据条件进行更改：
如果文件使用回调，则转换为 async/await
如果文件使用 Promise，则添加错误处理故障排查
"未提出更改"
原因：
- 请求太模糊
- 文件不匹配模式
- AI 不理解上下文
解决方案：
- 在描述中更具体
- 手动选择要包含的文件
- 提供所需更改的示例
"检测到冲突的更改"
原因：
- 多个编辑到同一行
- 重叠的文件修改
解决方案：
- 在差异视图中审查冲突
- 取消选中冲突的文件
- 分阶段应用更改
"应用后出现语法错误"
解决方案：
- 使用
Cmd+Z撤销 - 检查差异视图中的错误
- 修复语法并重新应用
- 如果之前的语法正确，请报告问题
示例
示例 1：添加错误处理
为 src/services/ 中的所有异步函数添加 try/catch 块结果：
- 所有异步函数都包装在 try/catch 中
- 错误记录到控制台
- 返回错误对象
示例 2：重命名导出
将 App.tsx 中的默认导出从 'App' 重命名为 'MainApplication'
并更新所有导入结果：
- App.tsx 导出 MainApplication
- 所有导入语句都更新
- 类型注释已更新
示例 3：添加日志记录
在 utils 目录中每个函数的开始和结束时添加 console.log 语句结果：
- 函数入口记录名称
- 函数出口记录结果
- 所有文件中的格式一致
学习笔记
