Web前端代码审查规范 - 快速开始指南

📦 已生成的文件

1. Skill包（可直接导入QoderWork）

• frontend-code-review.skill - 完整的Skill压缩包

2. 源文件（单独使用）

位于 frontend-code-review-skill/ 目录：

• SKILL.md - Skill主描述文件
• GUIDELINES.md - 详细代码审查规范（12KB）
• CHECKLIST.md - 可操作检查清单（7.2KB）
• .eslintrc.json - ESLint配置
• .prettierrc - Prettier配置
• stylelint.config.js - Stylelint配置
• package.json - 依赖说明
• README.md - 使用说明

🚀 三种使用方式

方式一：导入到QoderWork Skill市场（推荐）

1. 下载 frontend-code-review.skill 文件
2. 在QoderWork中打开Skill管理
3. 导入该skill文件
4. 在需要代码审查时使用此skill

优势：

• 一键导入，随时调用
• 与QoderWork深度集成
• 可在对话中直接引用规范

方式二：在项目中使用配置文件

# 1. 进入你的项目
cd your-project

# 2. 复制配置文件
cp /path/to/frontend-code-review-skill/.eslintrc.json .
cp /path/to/frontend-code-review-skill/.prettierrc .
cp /path/to/frontend-code-review-skill/stylelint.config.js .

# 3. 安装依赖
npm install --save-dev 
  eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin 
  eslint-plugin-react eslint-plugin-react-hooks 
  prettier stylelint stylelint-config-standard stylelint-config-prettier

# 4. 在package.json添加脚本
# （参考README.md中的示例）

# 5. 运行检查
npm run lint
npm run format
npm run stylelint

方式三：手动查阅文档进行Code Review

1. 打开 GUIDELINES.md 查看详细规范
2. 使用 CHECKLIST.md 作为审查模板
3. 逐项检查代码质量

📋 规范覆盖范围

✅ 核心内容

🔴 必查项（阻止合并的问题）

• TypeScript类型错误或使用any
• XSS安全风险（未净化的HTML）
• 敏感信息硬编码
• 未处理的异常和错误
• 内存泄漏风险
• 关键功能缺少测试

🟡 建议项（应该改进）

• 代码可读性和注释
• 性能优化机会
• 代码复用和DRY原则
• 适当的错误处理
• 测试覆盖率提升

💡 实际使用示例

场景1：Review一个React组件PR

1. 打开 CHECKLIST.md
2. 按以下顺序检查：
   - [ ] TypeScript类型是否完整？
   - [ ] Props定义是否清晰？
   - [ ] useEffect依赖是否正确？
   - [ ] 是否有潜在的性能问题？
   - [ ] 错误处理是否充分？
   - [ ] 是否有测试覆盖？
3. 在PR中记录发现的问题
4. 根据严重程度标记为 Must Fix / Should Fix

场景2：新项目初始化

# 1. 复制配置文件到项目根目录
# 2. 安装依赖
# 3. 配置pre-commit hooks
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

# 4. 在.lintstagedrc.json配置
{
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{css,scss}": ["stylelint --fix"]
}

场景3：团队培训

1. 分享 GUIDELINES.md 给团队成员
2. 组织代码规范学习会议
3. 使用 CHECKLIST.md 作为review模板
4. 定期回顾和改进规范

🎯 关键检查点速查

React特定

• ✅ 函数组件 + Hooks（非类组件）
• ✅ useEffect依赖数组完整
• ✅ 列表key使用唯一ID（非index）
• ✅ 适当的memoization（React.memo, useMemo, useCallback）

TypeScript特定

• ✅ 无any类型使用
• ✅ 公共API有明确类型
• ✅ 接口命名清晰
• ✅ 泛型使用得当

性能特定

• ✅ 图片lazy loading
• ✅ 大组件懒加载
• ✅ 避免不必要的重渲染
• ✅ API请求缓存和防抖

安全特定

• ✅ 无dangerouslySetInnerHTML滥用
• ✅ 用户输入转义
• ✅ 无硬编码密钥
• ✅ 依赖无高危漏洞

📊 质量指标建议

🔗 相关资源

• React官方文档
• Vue官方文档
• TypeScript手册
• ESLint规则
• WebAIM可访问性
• OWASP安全

❓ 常见问题

Q: 如何根据项目调整规范？ A: 修改.eslintrc.json等配置文件中的rules，根据团队共识调整严格程度。

Q: 如何处理规范冲突？ A: 优先遵循项目已有规范，新规范通过团队讨论后逐步引入。

Q: CI/CD如何集成？ A: 在CI流程中添加lint命令，失败则阻止部署。

Q: 新人如何快速上手？ A: 阅读GUIDELINES.md核心章节，使用CHECKLIST.md进行首次review练习。

祝你的代码审查工作顺利！ 🎉