09 - 使用诀窍与技巧

工作流: 30秒生成项目骨架

Step 1: Cmd + I (Composer)

Step 2: 输入:
"创建一个 [项目类型] 项目结构，包括：
 - 完整的文件夹结构
 - 配置文件（tsconfig, eslint, prettier）
 - package.json with scripts
 - README.md with setup instructions
 - .gitignore
 - 基础组件/模块"

Step 3: 点击 "Apply"

完成！开始编码。

场景: 重构一个复杂的组件

Step 1: 选中组件代码

Step 2: Cmd + K (Inline)

Step 3: 输入:
"重构这个组件：
 - 提取自定义 hooks
 - 优化性能（useMemo/useCallback）
 - 拆分为更小的子组件
 - 添加错误边界
 - 完善类型定义"

Step 4: 审查并应用

用时: 2分钟 vs 手动30分钟

场景: 将10个组件从 JS 迁移到 TS

Step 1: Cmd + I (Composer)

Step 2: 添加所有要迁移的文件

Step 3: 输入:
"将这些组件迁移到 TypeScript：
 1. 添加类型定义
 2. 使用泛型约束
 3. 导出类型
 4. 重命名文件为 .tsx"

Step 4: Apply

Claude 会同时处理所有文件！

Debug 工作流:

Step 1: 复制错误信息

Step 2: Cmd + L (Chat)

Step 3: 粘贴错误 + 说明:
"遇到这个错误：
[错误信息]

相关代码：
[粘贴代码片段]

已尝试：
- [你已经尝试的方法]

请帮我：
1. 分析错误原因
2. 提供解决方案
3. 解释为什么会出现这个问题"

Step 4: 按照建议修复

通常几分钟内解决！

TDD 工作流:

Step 1: 描述功能
"实现一个购物车功能"

Step 2: 让 Claude 生成测试
"先为这个功能生成完整的测试用例"

Step 3: 实现功能
"现在实现这些测试"

Step 4: 运行测试
Terminal: npm test

Step 5: 修复失败的测试
"这些测试失败了：[错误信息]"

循环直到全部通过！

技巧: 结合多光标和 Inline Edit

Step 1: Alt + Click 在多个位置添加光标

Step 2: 选中多个相似的代码块

Step 3: Cmd + K

Step 4: 输入修改需求

Claude 会智能处理每个选中的块！

示例: 
选中多个函数，
"为每个函数添加 JSDoc 注释"
→ 所有函数都添加了合适的注释

Composer 中使用 # 引用特定符号:

输入: #UserService
→ 自动找到并引用 UserService 类

输入: #login
→ 引用 login 函数的定义

好处:
- 精确引用
- 不需要手动找文件
- Claude 获得完整上下文

在 Composer 中限定作用域:

"只修改 @src/components/ 目录下的组件，
 其他文件不要动"

或

"只优化性能相关的代码，
 不改变功能逻辑"

Claude 会遵守范围限制。

技巧: 让 Claude 分步生成复杂功能

"我们来一步步实现用户认证：

第一步: 先只实现登录 UI
[等待生成]

第二步: 添加表单验证
[等待生成]

第三步: 对接API
[等待生成]

第四步: 添加错误处理
[等待生成]

第五步: 添加测试
[等待生成]"

好处:
- 每步都可以验证
- 更容易理解和修改
- 减少错误

技巧: 在文件顶部添加 AI 指令

// AI-CONTEXT-START
// 这个文件实现了用户认证逻辑
// 使用 JWT token
// 与 @api/auth.ts 配合使用
// 遵循项目的错误处理模式 @utils/errors.ts
// AI-CONTEXT-END

export class AuthService {
  // ...
}

Claude 读取文件时会看到这些上下文，
生成更准确的代码！

创建 .cursor/prompts/ 目录:

prompts/
├── component.txt
├── api.txt
├── test.txt
└── refactor.txt

// component.txt 内容
创建 React 组件：{{name}}

要求：
- TypeScript
- 函数式组件
- Props 接口定义
- 默认导出
- 使用 Tailwind CSS

参考风格：@components/Button.tsx

使用方式：
Cmd + L → /template component name=UserCard

技巧: 在 Prompt 中设置条件

"检查 package.json 中是否已安装 lodash，
 如果没有，执行 npm install lodash，
 然后优化 @utils/helpers.ts 使用 lodash"

Claude 会:
1. 检查文件
2. 根据结果决定是否安装
3. 继续后续操作

技巧: 使用项目级 .cursorrules

// .cursorrules
{
  "projectContext": {
    "name": "My E-commerce",
    "stack": "Next.js 14 + TypeScript + Prisma + tRPC",
    "conventions": {
      "styling": "Tailwind CSS with custom design system",
      "stateManagement": "Zustand",
      "api": "tRPC with Zod validation",
      "testing": "Jest + React Testing Library",
      "文件命名": "kebab-case for files, PascalCase for components"
    },
    "importantFiles": {
      "types": "src/types/index.ts",
      "theme": "src/styles/theme.ts",
      "api": "src/server/api/root.ts"
    }
  }
}

Claude 会记住这些项目信息！

技巧: 使用循环模式

"对 src/api/ 目录下的每个文件：
 1. 添加错误处理
 2. 添加请求日志
 3. 统一返回格式
 4. 添加单元测试"

Claude 会自动遍历处理所有文件。

高级搜索替换:

"在整个项目中：
 1. 找到所有使用 axios 的地方
 2. 替换为我们的自定义 fetch wrapper
 3. 更新错误处理模式
 4. 保持功能不变
 5. 给我一个修改清单"

Claude 会:
- 智能识别所有使用位置
- 理解上下文后替换
- 保证功能一致性

解决方法:

1. 分步描述
   ❌ "做一个复杂的后台系统"
   ✅ "首先创建用户管理模块，包括..."

2. 提供示例
   "像这样的模式：[粘贴示例代码]"

3. 使用类比
   "类似于 Stripe 的支付流程"

4. 画图说明
   使用 ASCII 图或文字描述流程

解决方法:

1. 粘贴错误信息
   "运行时报这个错：[错误]"

2. 说明期望行为
   "我期望：[描述]，但实际：[描述]"

3. 提供调试信息
   "console.log 显示：[输出]"

4. 逐步缩小范围
   "问题出在这个函数：[指定函数]"

原因: 上下文窗口限制

解决方法:

1. 定期总结
   "总结一下目前完成的功能：
    1. ...
    2. ...
    现在我们继续..."

2. 引用文件
   "基于 @已完成的文件"

3. 清理无关对话
   Cmd + Shift + L

4. 使用 .cursorrules
   记录项目关键信息

解决方法:

1. 减少上下文
   - 只引用必要文件
   - 使用 # 引用特定符号

2. 分批处理
   "先处理前5个文件，然后我们继续"

3. 使用缓存
   Claude 会缓存最近的对话

4. 选择更快的模型
   临时用 Claude 3 Haiku (更快但稍弱)

解决方法:

1. 检查当前用量
   Settings → Usage

2. 优化 Prompt
   - 更精确的描述
   - 减少重复请求

3. 使用自己的 API Key
   Settings → API Keys → Add Key

4. 合理使用免费额度
   - 复杂任务用 Claude
   - 简单任务手写

学习工作流:

Step 1: "解释 [新技术] 的核心概念"
Step 2: "给我一个 Hello World 示例"
Step 3: "创建一个真实的 demo 项目"
Step 4: "这段代码中，为什么要这样写？"
Step 5: "最佳实践是什么？"

通过对话式学习，效率极高！

理解老代码:

"这个项目已经很久了，帮我：
 1. 分析整体架构
 2. 画出模块依赖图
 3. 找出代码坏味道
 4. 提出现代化改造方案"

Claude 能快速理解遗留代码！

自动生成文档:

"基于 @src/ 目录：
 1. 生成 API 文档
 2. 生成架构文档
 3. 生成贡献指南
 4. 生成使用示例
 
 要求：
 - Markdown 格式
 - 包含代码示例
 - 适合新手阅读"

让 Claude 做 Code Review:

"审查这个 PR:
 @pull-request/123

 关注点：
 1. 安全性
 2. 性能
 3. 最佳实践
 4. 测试覆盖
 5. 文档更新
 
 给出：
 - 具体问题列表
 - 改进建议
 - 优先级排序"

技术决策支持:

"我需要选择一个状态管理方案，
 项目情况：
 - React 18
 - TypeScript
 - 中等复杂度
 - 需要性能优化
 
 请比较：
 1. Redux Toolkit
 2. Zustand
 3. Jotai
 4. Recoil
 
 给出：
 - 各自优缺点
 - 适用场景
 - 学习曲线
 - 你的推荐"

设置常用短语:

Settings → Snippets

添加:
- "fix" → "审查并修复这段代码"
- "test" → "为这个函数生成测试用例"
- "opt" → "优化性能"
- "doc" → "生成文档"
- "type" → "添加完整的 TypeScript 类型"

使用: 输入短语 + Tab

创建模板库:

~/.cursor/templates/
├── react-component/
├── api-endpoint/
├── test-suite/
└── config-file/

使用:
Cmd + Shift + P → "Create from template"