第 6 章:代码审查 — 质量把关

⏱ 预计阅读 12 分钟 更新于 2026/5/15
💡 进群学习加 wx: agentupdate
(申请发送: agentupdate)

代码审查是软件质量保证的关键环节。在开发番茄钟应用的过程中,每次添加新功能后都应该进行代码审查,确保代码质量、安全性和可维护性。Claude Code 提供了一套完整的代码审查工具链,从本地的差异查看到深度的云端审查,帮助你在发布前把控代码质量。

6.1 发布前的检查清单

在将番茄钟应用部署或分享给用户之前,建立一套代码审查流程非常重要。代码审查不仅能发现 bug,还能:

  • 提高代码质量和可读性
  • 发现潜在的安全漏洞
  • 确保遵循最佳实践
  • 促进团队成员之间的知识分享
  • 减少 bug 修复成本

Claude Code 提供的审查工具分为四个层次:

  1. diff 查看 - 快速查看代码改动
  2. 本地审查 - 在本地会话中进行代码质量审查
  3. 安全审查 - 专门扫描安全漏洞
  4. 深度云审查 - 利用云端多 agent 进行深度审查

建议的审查流程:/diff/review/security-review/simplify

6.2 /diff — 查看代码改动

命令名

/diff

语法

/diff

功能说明

交互式差异查看器,显示当前会话中所有未提交的更改和每个工具调用的具体差异。使用键盘导航在不同的视图之间切换。

实际使用示例

在添加了 Todo List 功能并实现 localStorage 持久化后:

# 进入 diff 查看器
/diff

查看器界面操作:

  • 左箭头:查看 git diff(所有未提交的更改)
  • 右箭头:查看单个 Claude 轮次的差异
  • 上/下箭头:在不同文件之间导航

注意事项/技巧

  • 每次准备提交代码前都应该运行 /diff 检查改动
  • 使用右箭头可以追溯到具体的某个工具调用,了解 Claude 是如何修改代码的
  • 如果发现意外的改动,可以在提交前进行修正
  • /diff 只显示未暂存和未提交的更改,已提交的内容不会显示

6.3 /review — 本地 PR 审查

命令名

/review

语法

/review [PR]

功能说明

在当前会话中本地审查 pull request。自动检测当前分支的 PR,也可以指定 PR URL 或编号进行审查。审查内容包括代码质量、潜在 bug、最佳实践遵循情况等。

实际使用示例

假设你已经为 Todo List 功能创建了一个 PR:

# 审查当前分支的 PR(自动检测)
/review

# 或者直接指定 PR 编号
/review 42

# 或者使用 PR URL
/review https://github.com/yourusername/my-pomodoro/pull/42

Claude Code 会分析 PR 中的所有更改,并提供:

  • 代码质量评估
  • 潜在 bug 提示
  • 最佳实践建议
  • 可改进之处

注意事项/技巧

  • 需要在 git 仓库中使用
  • 审查会在本地完成,不需要远程服务
  • 适合在合并 PR 前进行最后一道检查
  • 如果 PR 很大,可以先使用 /diff 快速浏览,再用 /review 深入分析

6.4 /security-review — 安全漏洞扫描

命令名

/security-review

语法

/security-review

功能说明

分析当前分支的待处理更改,审查 git diff 识别安全风险。检查项目包括注入攻击、身份验证问题、数据泄露、XSS 攻击等常见安全漏洞。

实际使用示例

在实现了 localStorage 存储 Todo List 功能后:

# 运行安全审查
/security-review

Claude Code 会检查:

  • localStorage 操作是否存在 XSS 风险
  • 用户输入是否经过适当的验证和转义
  • 是否有敏感数据暴露风险
  • 是否存在注入攻击的可能性

审查结果可能包括:

发现 1 个潜在安全问题:

1. XSS 漏洞风险
   位置: src/components/TodoList.tsx 第 45 行
   问题: 用户输入直接渲染到 DOM,未经过滤
   建议: 使用 React 的自动转义或手动转义用户输入

注意事项/技巧

  • 对于涉及用户输入、认证、数据存储的改动,一定要运行安全审查
  • localStorage 存储的数据可能被恶意脚本读取,审查会提示相关风险
  • 安全审查专注于安全问题,不会进行代码质量评估(应配合 /review 使用)
  • 发现的问题应立即修复,不能拖延

6.5 /simplify — 代码质量优化

命令名

/simplify

语法

/simplify [focus]

功能说明

这是一个基于提示的高级 Skill。审阅最近更改的文件,检查代码重用、质量、效率问题,然后并行生成 3 个审查 agent,聚合所有发现,并自动应用修复。不同于其他审查工具,/simplify 不仅指出问题,还会直接修复。

实际使用示例

在完成 Todo List 功能后:

# 运行代码简化和优化
/simplify

Claude Code 会:

  1. 审查最近更改的文件
  2. 启动 3 个并行的审查 agent
  3. 聚合所有发现的问题
  4. 自动应用优化和修复

可以指定审查焦点:

# 专注于内存效率
/simplify focus on memory efficiency

# 专注于代码可读性
/simplify focus on readability

# 专注于性能优化
/simplify focus on performance

注意事项/技巧

  • /simplify 会自动修改代码,建议先使用 /diff 确认更改
  • 如果不希望自动修改,可以先用 /review/security-review 检查,再手动修复
  • 3 个并行的 agent 提供多角度的审查,发现单一 agent 可能遗漏的问题
  • 适合在功能开发完成后进行整体优化

6.6 /ultrareview — 深度云端审查

命令名

/ultrareview

语法

/ultrareview

功能说明

在云沙箱中运行多 agent 深度代码审查。利用云端计算资源进行更全面、更深入的代码分析。Pro 和 Max 计划用户每月包含 3 次免费运行。

实际使用示例

在发布番茄钟应用的重要版本前:

# 运行深度云端审查
/ultrareview

云端审查会提供:

  • 多 agent 并行分析
  • 深度代码质量评估
  • 架构层面的问题分析
  • 长期维护性建议
  • 性能瓶颈识别

注意事项/技巧

  • 适合关键变更或重要版本的最终把关
  • 每月免费次数有限,建议在重要时刻使用
  • 云端审查时间较长,可能需要几分钟
  • 审查结果非常详细,适合团队级别的代码质量把控

6.7 /autofix-pr — 自动修复 PR

命令名

/autofix-pr

语法

/autofix-pr [prompt]

功能说明

生成网络版 Claude Code 会话监视指定的 PR。当 CI 失败或有人添加审查评论时,自动推送修复。需要 gh CLI 工具和网络版 Claude Code。

实际使用示例

在 PR 遇到 lint 或类型错误时:

# 只修复 lint 和类型错误
/autofix-pr only fix lint and type errors

# 修复所有审查评论
/autofix-pr fix all review comments

# 专注于性能问题
/autofix-pr fix performance issues mentioned in reviews

Claude Code 会:

  • 监视 PR 的状态
  • 检测 CI 失败或审查评论
  • 自动生成修复代码
  • 推送修复到 PR

注意事项/技巧

  • 需要提前配置好 gh CLI 并完成认证
  • 需要网络版 Claude Code 访问权限
  • 自动修复可能会推送多次提交,需要注意审查
  • 适合处理常规性的 lint 错误和类型错误
  • 对于复杂的逻辑问题,建议人工介入

6.8 动手做:审查番茄钟代码

现在你已经完成了 Todo List 功能和 localStorage 持久化,让我们用刚才学到的审查工具来检查代码质量。

步骤 1:查看所有改动

首先运行 /diff 查看所有未提交的更改:

/diff

使用方向键浏览文件:

  • 左箭头查看 git diff
  • 右箭头查看具体的轮次差异
  • 上/下箭头切换文件

确认所有改动符合预期,没有意外的修改。

步骤 2:运行本地代码审查

/review

Claude Code 会分析代码质量,可能发现类似以下问题:

  • 重复的代码可以抽取为公共函数
  • 某些函数过长,建议拆分
  • 缺少必要的类型注解
  • 组件可以进一步优化

根据审查结果,决定是否需要修改。

步骤 3:安全审查

/security-review

特别关注 localStorage 相关的安全问题:

  • 是否在存储前对用户输入进行了验证?
  • 是否有敏感信息(如密码)被不当存储?
  • localStorage 数据是否有被恶意脚本读取的风险?

如果发现问题,立即修复。例如,如果发现用户输入未经验证就直接存储:

// 修复前
const saveTodo = (text: string) => {
  const todos = JSON.parse(localStorage.getItem('todos') || '[]');
  todos.push({ text, completed: false });
  localStorage.setItem('todos', JSON.stringify(todos));
};

// 修复后
const saveTodo = (text: string) => {
  // 验证和清理用户输入
  const sanitizedText = text.trim().substring(0, 200);
  if (!sanitizedText) return;

  const todos = JSON.parse(localStorage.getItem('todos') || '[]');
  todos.push({ text: sanitizedText, completed: false });
  localStorage.setItem('todos', JSON.stringify(todos));
};

步骤 4:代码优化

/simplify

Claude Code 会启动 3 个并行 agent 进行审查,可能发现:

  • 重复的状态管理逻辑可以抽取为自定义 hook
  • localStorage 操作可以封装为独立的工具函数
  • 某些组件可以合并或拆分以提高复用性

修复完成后,再次运行 /diff 确认更改。

步骤 5:确认所有问题已修复

再次运行审查命令,确认所有问题都已解决:

/review
/security-review

如果没有新的问题发现,代码审查就完成了。

本章小结

代码审查是确保软件质量的关键环节。Claude Code 提供了一套完整的审查工具:

  • /diff - 查看代码改动,了解 Claude 具体修改了什么
  • /review - 本地 PR 审查,评估代码质量
  • /security-review - 安全漏洞扫描,特别关注 XSS、注入等安全问题
  • /simplify - 代码质量优化,自动修复发现的问题
  • /ultrareview - 深度云端审查,适合关键版本的最后把关
  • /autofix-pr - 自动修复 PR,处理 lint 和类型错误等常规问题

建议的审查流程:/diff/review/security-review/simplify

在开发番茄钟应用的过程中,每次添加新功能后都应该进行代码审查。这不仅有助于发现和修复 bug,还能提高代码质量,让应用更加健壮和安全。

下一章,我们将学习如何使用 Claude Code 的调试工具来定位和解决复杂问题。