前端代码审查详细检查清单
快速评估清单
项目识别
- 框架类型：React / Vue / Angular / 原生 JS/TS
- 项目规模：单组件 / 功能模块 / 完整应用
- 无明显语法错误
- 无明显导入错误
- 无明显格式问题
代码质量检查清单
命名规范
- 变量命名语义化且一致
- 函数命名清晰表达意图
- 组件命名遵循框架约定
- 常量使用大写下划线命名
- 布尔值命名使用 is/has/should 前缀
代码结构
- 无明显代码重复（DRY 原则）
- 函数长度合理（<50 行为佳）
- 组件职责单一（单一职责原则）
- 文件组织清晰合理
- 导入语句分组有序
注释质量
- 关键逻辑有清晰注释
- 注释内容准确且时效
- 无冗余或过时注释
- 复杂算法有说明文档
功能实现检查清单
业务逻辑
- 业务逻辑实现正确
- 数据流向清晰可追踪
- 状态更新符合预期
- 副作用处理恰当
错误处理
- 边界情况已处理
- 异常情况有捕获
- 错误信息对用户友好
- 错误日志记录完善
异步操作
- Promise 使用正确
- async/await 使用恰当
- 异步错误已捕获
- 竞态条件已处理
- 加载状态有反馈
用户反馈
- 加载状态有展示
- 错误状态有提示
- 成功操作有反馈
- 空状态有占位
性能优化检查清单
渲染优化
- 无不必要的组件重渲染
- 列表渲染使用正确的 key
- 大列表使用虚拟滚动
- 条件渲染使用恰当
- 使用 memo/useMemo/useCallback（React）
- 使用 computed/watch（Vue）
资源优化
- 图片格式选择合理（WebP/AVIF 优先）
- 图片尺寸适配屏幕
- 图片懒加载实现
- 大型资源按需加载
- 无冗余依赖引入
网络优化
- API 请求有缓存策略
- 避免重复请求
- 使用防抖节流
- 数据预加载恰当
- 使用 HTTP/2 多路复用
打包优化
- 代码分割合理
- Tree-shaking 生效
- 无冗余第三方库
- 打包体积在合理范围
安全性检查清单
XSS 防护
- 用户输入已转义
- dangerouslySetInnerHTML 使用谨慎
- URL 参数已验证
- 动态内容已净化
数据安全
- 输入验证完善
- 敏感数据不存 localStorage
- API 令牌安全存储
- 密码不明文传输
- 表单数据有验证
CSRF 防护
- 关键操作有 CSRF token
- 跨域请求有验证
- Cookie 设置 SameSite
依赖安全
- 第三方依赖无已知漏洞
- 依赖版本定期更新
- 使用可信赖的库
可访问性检查清单
语义化 HTML
- 使用正确的 HTML 标签
- 表单元素有关联 label
- 按钮使用 button 标签
- 链接使用 a 标签
ARIA 支持
- ARIA 属性使用正确
- role 属性使用恰当
- aria-label 描述清晰
- aria-hidden 使用合理
键盘导航
- 所有交互元素可键盘访问
- Tab 顺序符合逻辑
- 焦点状态清晰可见
- 快捷键不冲突
视觉辅助
- 颜色对比度 >= 4.5:1
- 图片有 alt 文本
- 图标有文字说明
- 字体大小可调整
框架特定检查清单
React 检查项
Hooks 使用
- useEffect 依赖数组完整
- 无 Hook 调用顺序问题
- 自定义 Hook 命名以 use 开头
- 无闭包陷阱问题
组件设计
- 受控/非受控组件使用正确
- Props 类型定义完整
- Context 使用恰当（非过度使用）
- 组件拆分合理
状态管理
- 本地状态 vs 全局状态选择合理
- 状态提升恰当
- 状态更新不可变
- 派生状态使用 useMemo
Vue 3 检查项
Composition API
- ref/reactive 使用合理
- computed 无副作用
- watch 使用正确
- watchEffect 使用恰当
组件通信
- props/emit 使用规范
- provide/inject 使用恰当
- v-model 自定义组件实现正确
- 事件命名遵循 kebab-case
生命周期
- onMounted/onUnmounted 使用正确
- 无内存泄漏（事件监听器清理）
- 异步操作在正确的生命周期执行
Composables
- 组合函数职责单一
- 返回值结构清晰
- 副作用有清理
- 命名以 use 开头
TypeScript 检查项
类型定义
- 类型定义准确完整
- 避免过度使用 any
- interface/type 使用恰当
- 泛型使用合理
类型安全
- 无类型断言滥用
- 类型守卫使用正确
- 联合类型处理完整
- 可选链使用恰当
类型复用
- 类型定义可复用
- 工具类型使用恰当
- 类型导入导出规范
浏览器兼容性检查清单
特性支持
- 目标浏览器支持所用 API
- CSS 特性有浏览器兼容
- ES 特性有 polyfill（如需）
- Flexbox/Grid 使用有降级
CSS 兼容
- 供应商前缀已添加（或使用 autoprefixer）
- 渐进增强策略
- 降级方案完善
响应式设计
- 移动端适配良好
- 断点设置合理
- 触摸事件处理正确
- 视口设置恰当
常用审查工具推荐
代码质量工具
| 工具 | 用途 | 推荐场景 |
|---|---|---|
| ESLint | 代码质量和风格检查 | 所有项目必备 |
| Prettier | 代码格式化 | 团队协作项目 |
| TypeScript | 类型安全检查 | 中大型项目 |
| Stylelint | CSS/SCSS 代码检查 | 样式代码较多的项目 |
性能分析工具
| 工具 | 用途 | 推荐场景 |
|---|---|---|
| Lighthouse | 性能、可访问性、SEO 审计 | 正式发布前检查 |
| Chrome DevTools Performance | 运行时性能分析 | 性能优化阶段 |
| Webpack Bundle Analyzer | 打包体积分析 | 打包优化阶段 |
| React DevTools Profiler | React 渲染性能分析 | React 性能优化 |
| Vue DevTools Performance | Vue 组件性能分析 | Vue 性能优化 |
可访问性工具
| 工具 | 用途 | 推荐场景 |
|---|---|---|
| axe DevTools | 可访问性自动检测 | 可访问性审查 |
| WAVE | 网页可访问性评估 | 快速可访问性检查 |
| Lighthouse a11y | 可访问性评分 | 综合审查 |
安全检查工具
| 工具 | 用途 | 推荐场景 |
|---|---|---|
| npm audit | 依赖漏洞扫描 | 定期安全检查 |
| Snyk | 依赖安全分析 | CI/CD 集成 |
| OWASP ZAP | Web 应用安全测试 | 安全审计 |
类型检查工具
| 工具 | 用途 | 推荐场景 |
|---|---|---|
| TypeScript | 静态类型检查 | TypeScript 项目 |
| Flow | JavaScript 类型检查 | Flow 项目 |
| Prop-Types | React 运行时类型检查 | 非 TypeScript React 项目 |
审查优先级指南
时间充裕（全面审查）
- 安全性检查（必须）
- 功能实现检查（必须）
- 性能优化检查（重要）
- 代码质量检查（重要）
- 可访问性检查（推荐）
- 浏览器兼容性检查（推荐）
- 代码风格检查（可选）
时间紧张（快速审查）
- 安全性：XSS、输入验证、敏感数据
- 功能：业务逻辑、错误处理
- 性能：明显的性能问题
- 代码质量：严重的代码异味
不同场景优先级
生产环境代码： 安全 > 功能 > 性能 > 质量 > 可访问性 > 风格
原型/MVP： 功能 > 安全 > 性能 > 其他
开源项目： 质量 > 功能 > 安全 > 可访问性 > 性能 > 风格