21. 工作流与最佳实践 (Workflows & Best Practices)
掌握 Claude Code 的核心工作模式和业界最佳实践,将极大提升你的开发效率。
🎯 核心工作流
1. 代码审查工作流 (Code Review Workflow)
标准审查流程
你: 审查这个 PR 的代码变更
Claude:
→ 读取变更文件
→ 分析代码质量
→ 检查潜在问题
→ 提供改进建议
📋 审查报告
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ 优点:
- 代码结构清晰
- 错误处理完善
⚠️ 需要改进:
- src/auth.js:45 - 未处理的 Promise rejection
- src/user.ts:120 - 缺少输入验证
💡 建议:
- 添加 try-catch 包装
- 使用 Zod 进行 schema 验证
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━自动化审查
创建 /review Skill:
你: skill review
Claude:
→ 运行 linter
→ 运行类型检查
→ 运行测试
→ 生成覆盖率报告
→ 检查安全问题
→ 生成审查报告2. 调试工作流 (Debugging Workflow)
系统化调试
你: 帮我调试这个 bug:用户登录失败
Claude:
[阶段 1] 信息收集
→ 查看错误日志
→ 检查相关代码
→ 了解复现步骤
[阶段 2] 问题定位
→ 分析错误堆栈
→ 检查数据流
→ 验证假设
[阶段 3] 修复验证
→ 实施修复
→ 添加测试
→ 验证修复
✓ Bug 已修复
原因: JWT token 验证时缺少 secret key
位置: src/auth.js:78
修复: 添加了环境变量检查调试最佳实践
DO - 应该做的:
提供完整的错误信息
你: 调试这个错误 ❌ 不好: "不工作了" ✅ 好: "TypeError: Cannot read property 'map' of undefined at UserList.render (src/UserList.ts:45) 复现步骤:打开用户列表页面"隔离问题
你: 帮我创建最小复现示例 Claude: → 提取核心逻辑 → 创建独立测试文件 → 验证问题记录调试过程
# 创建调试笔记 echo "- 发现问题在 authentication 层 - 检查了 token 验证逻辑 - 下一步:检查 middleware" > debug_notes.md
3. 重构工作流 (Refactoring Workflow)
安全重构流程
你: 重构这个组件,提升性能
Claude:
[步骤 1] 理解代码
→ 分析组件结构
→ 识别性能瓶颈
→ 评估影响范围
[步骤 2] 制定计划
→ 使用规划模式
→ 列出重构步骤
→ 评估风险
[步骤 3] 执行重构
→ 小步迭代
→ 保持测试通过
→ 逐步优化
[步骤 4] 验证
→ 运行所有测试
→ 性能对比
→ 代码审查
✓ 重构完成
性能提升: 60%
测试: 全部通过重构检查清单
markdown
## 重构前检查
- [ ] 备份当前代码
- [ ] 运行测试套件
- [ ] 记录当前性能指标
- [ ] 识别依赖关系
## 重构中检查
- [ ] 小步提交
- [ ] 每步运行测试
- [ ] 保持功能不变
- [ ] 更新文档
## 重构后检查
- [ ] 所有测试通过
- [ ] 性能提升验证
- [ ] 代码审查
- [ ] 更新 API 文档💡 最佳实践
开发流程
1. 项目启动流程
新项目开始
↓
[1] 创建 CLAUDE.md
→ 项目描述
→ 技术栈
→ 架构决策
→ 代码规范
↓
[2] 设置开发环境
→ 初始化项目
→ 配置 linter
→ 配置 testing
→ 设置 hooks
↓
[3] 创建基础结构
→ 文件夹结构
→ 配置文件
→ 示例代码
↓
[4] 开始开发2. 功能开发流程
需求 → 设计 → 实现 → 测试 → 审查 → 部署
详细流程:
你: 实现用户认证功能
Claude:
[设计阶段]
→ 使用规划模式
→ 设计数据模型
→ 设计 API 接口
→ 设计错误处理
[实现阶段]
→ 创建数据模型
→ 实现 API 端点
→ 添加验证
→ 添加错误处理
[测试阶段]
→ 单元测试
→ 集成测试
→ E2E 测试
[审查阶段]
→ 代码审查
→ 性能检查
→ 安全检查
[部署阶段]
→ 部署脚本
→ 验证部署
→ 监控设置代码质量
1. 编码规范
使用 CLAUDE.md 统一规范:
markdown
# CLAUDE.md
## 代码风格
### 命名约定
- 组件: PascalCase (UserCard.tsx)
- 工具函数: camelCase (formatDate.ts)
- 常量: UPPER_SNAKE_CASE (API_BASE_URL)
- 类型: PascalCase (UserProfile)
### 文件组织
- 每个文件一个主要导出
- 相关文件放在同一目录
- 使用 index.ts 简化导入
### 注释规范
- 公共 API 必须有 JSDoc
- 复杂逻辑需要解释
- 避免无意义的注释2. 测试策略
测试金字塔理论:
/\
/E2E\ 10% - 端到端测试
/------\
/ 集成 \ 30% - 集成测试
/----------\
/ 单元测试 \ 60% - 单元测试
/--------------\自动化测试工作流:
你: 创建测试套件
Claude:
→ 分析需要测试的场景
→ 生成单元测试
→ 生成集成测试
→ 设置测试覆盖率目标
→ 配置 CI/CD 集成
建议:
- 单元测试覆盖率 > 80%
- 关键路径必须有 E2E 测试
- 每次提交运行快速测试
- PR 运行完整测试套件性能优化
1. 识别性能瓶颈
你: 分析这个应用性能
Claude:
[分析工具]
→ 使用 profiler
→ 检查 bundle size
→ 分析渲染性能
→ 检查网络请求
[常见问题]
→ Bundle 体积过大
→ 不必要的重渲染
→ 未优化的图片
→ 缓存缺失
[优化建议]
→ Code splitting
→ React.memo
→ 图片懒加载
→ 添加缓存策略2. 性能优化清单
markdown
## 前端性能
- [ ] Bundle 分析和拆分
- [ ] 代码懒加载
- [ ] 图片优化
- [ ] CDN 配置
- [ ] 缓存策略
- [ ] SSR/SSG 评估
## 后端性能
- [ ] 数据库查询优化
- [ ] 索引优化
- [ ] 缓存层配置
- [ ] API 响应时间
- [ ] 并发处理
- [ ] 连接池配置
## 监控指标
- [ ] Core Web Vitals
- [ ] API 响应时间
- [ ] 错误率
- [ ] 资源使用率安全实践
1. 安全检查清单
你: 进行安全审查
Claude:
→ 检查依赖漏洞
→ 检查输入验证
→ 检查认证授权
→ 检查数据加密
→ 检查 CORS 配置
→ 检查敏感信息泄露
安全报告:
🔴 高危问题:
- SQL 注入风险: src/user/query.js:45
- 硬编码密钥: .env.example:3
🟡 中危问题:
- 缺少 CSRF 保护
- 跨域配置过于宽松
💡 修复建议:
[详细修复步骤...]2. 敏感信息保护
bash
# 使用 .env.example 模板
cat > .env.example << EOF
# 敏感配置示例 - 不要提交真实密钥
DATABASE_URL=postgresql://user:password@localhost/db
API_SECRET_KEY=your-secret-key-here
JWT_SECRET=your-jwt-secret
EOF
# Git hooks 防止提交敏感信息
cat > .git/hooks/pre-commit << 'EOF'
#!/bin/bash
# 检查是否有敏感信息
if git diff --cached | grep -q "password\|secret\|api_key"; then
echo "警告:可能包含敏感信息!"
exit 1
fi
EOF🚀 高级工作流
1. 多项目协作
项目 A (API) ←→ 项目 B (Frontend) ←→ 项目 C (Docs)
使用 Workspaces:
你: 在所有项目中更新依赖版本
Claude:
→ 检测 monorepo 结构
→ 识别所有工作空间
→ 批量更新依赖
→ 运行所有测试
→ 检查兼容性
→ 提交变更
✓ 已更新 15 个包
✓ 3 个项目测试通过2. 数据库迁移工作流
你: 创建数据库迁移
Claude:
[分析变更]
→ 对比 schema 变更
→ 生成迁移脚本
→ 评估数据影响
→ 创建回滚计划
[执行流程]
→ 开发环境测试
→ 生成测试数据
→ 验证迁移
→ 执行迁移
→ 验证结果
✓ 迁移完成
影响行数: 1,234,567
回滚脚本: migrations/rollback_2024_03_15.sql3. API 集成工作流
你: 集成第三方支付 API
Claude:
[调研阶段]
→ 阅读 API 文档
→ 分析接口规范
→ 评估认证方式
[实现阶段]
→ 创建类型定义
→ 实现客户端
→ 添加错误处理
→ 实现重试逻辑
[测试阶段]
→ Mock API 响应
→ 单元测试
→ 集成测试
→ 沙箱测试
[文档阶段]
→ API 使用指南
→ 错误码说明
→ 示例代码
✓ 集成完成
文档: docs/payment-api.md
测试: 覆盖率 95%📊 效率提升技巧
1. 快捷命令
创建常用 Skills:
bash
# .claude/skills/quick-test/skill.json
{
"name": "quick-test",
"displayName": "快速测试",
"description": "运行快速测试套件"
}
# .claude/skills/quick-test/instructions.md
# 快速测试
仅运行单元测试,跳过 E2E:
```bash
npm test -- --testPathPattern="unit"
### 2. 批量操作你: 批量重构所有组件的导入
Claude: → 扫描所有组件文件 → 识别导入模式 → 规划重构策略 → 批量执行重构 → 运行测试验证
✓ 已重构 47 个文件 导入方式统一为: @/components
### 3. 自动化工作流
```bash
# 创建 hooks 自动化流程
# .claude/hooks/pre-skill
#!/bin/bash
# Skill 执行前自动保存工作区
git add -A
git stash save "pre-skill-$(date +%s)"
# .claude/hooks/post-skill
#!/bin/bash
# Skill 执行后自动运行测试
npm test -- --silent🎓 学习路径
初级 → 中级
[初级]
→ 学习基本命令
→ 掌握文件操作
→ 理解三种模式
↓
[中级]
→ 掌握规划模式
→ 使用 Skills
→ 代码审查
→ 调试技巧中级 → 高级
[中级]
→ 性能优化
→ 安全实践
→ 测试策略
↓
[高级]
→ SubAgent 并行处理
→ Plugin 开发
→ CI/CD 集成
→ 团队协作📚 下一步
掌握工作流和最佳实践后,继续学习 22. 企业部署
🔗 相关资源
💡 API 推荐:https://apipro.maynor1024.live/ - 一站式接入各种AI服务,注册即送0.2刀