第 6 章:代码审查 — 质量把关
(申请发送: agentupdate)
代码审查是软件质量保证的关键环节。在开发番茄钟应用的过程中,每次添加新功能后都应该进行代码审查,确保代码质量、安全性和可维护性。Claude Code 提供了一套完整的代码审查工具链,从本地的差异查看到深度的云端审查,帮助你在发布前把控代码质量。
6.1 发布前的检查清单
在将番茄钟应用部署或分享给用户之前,建立一套代码审查流程非常重要。代码审查不仅能发现 bug,还能:
- 提高代码质量和可读性
- 发现潜在的安全漏洞
- 确保遵循最佳实践
- 促进团队成员之间的知识分享
- 减少 bug 修复成本
Claude Code 提供的审查工具分为四个层次:
- diff 查看 - 快速查看代码改动
- 本地审查 - 在本地会话中进行代码质量审查
- 安全审查 - 专门扫描安全漏洞
- 深度云审查 - 利用云端多 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 会:
- 审查最近更改的文件
- 启动 3 个并行的审查 agent
- 聚合所有发现的问题
- 自动应用优化和修复
可以指定审查焦点:
# 专注于内存效率
/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
注意事项/技巧
- 需要提前配置好
ghCLI 并完成认证 - 需要网络版 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 的调试工具来定位和解决复杂问题。