frontend-code-review

name	frontend-code-review
description	对前端代码进行全面的代码审查，包括代码规范、性能优化、可访问性、安全性、TypeScript类型检查、React/Vue等框架最佳实践。在以下场景使用：(1) 审查前端代码质量，(2) 检查性能问题，(3) 验证可访问性，(4) 发现安全漏洞，(5) TypeScript类型检查，(6) 框架特定最佳实践检查

前端代码审查

概览

对前端代码进行全面的代码审查，确保代码质量、性能、可访问性、安全性和最佳实践符合行业标准。

审查维度

1. 代码规范与质量

命名规范

• 变量/函数命名：使用有意义的名称，避免单字母变量（循环索引除外）
• 组件命名：React/Vue组件使用PascalCase，hooks使用camelCase并以use开头
• 常量命名：使用UPPER_SNAKE_CASE
• 布尔变量：使用is/has/should/can等前缀

代码结构

• 单一职责：每个函数/组件只负责一件事
• 代码长度：函数不超过50行，文件不超过300行
• 圈复杂度：避免深层嵌套（不超过3层）
• 重复代码：检查DRY原则，提取公共逻辑

注释规范

• JSDoc注释：公共API必须添加JSDoc
• TODO/FIXME：标记需要后续处理的问题
• 避免冗余注释：代码自解释优于注释

2. TypeScript类型检查

类型定义

• 避免any类型：使用unknown或具体类型
• 显式返回类型：公共函数应声明返回类型
• 接口vs类型别名：接口用于可扩展的对象，类型别名用于联合类型/元组
• 泛型约束：使用extends约束泛型参数

类型安全

• 严格模式检查：确保开启strict模式
• 空值检查：使用?.、??等操作符处理null/undefined
• 类型收窄：使用类型守卫（typeof/instanceof/in）
• 避免类型断言：优先使用类型守卫而非as

3. React最佳实践

组件设计

• 函数组件优先：使用函数组件+Hooks
• Props类型定义：使用interface定义props
• 默认Props：通过解构赋值设置默认值
• Key属性：列表渲染必须提供稳定唯一的key

Hooks使用

• 规则遵守：只在最顶层调用，不在循环/条件中调用
• 依赖数组：正确使用useEffect/useCallback/useMemo依赖
• 自定义Hooks：复用逻辑提取为自定义Hook
• 避免过度优化：不要过早使用useMemo/useCallback

状态管理

• 状态最小化：只将必要数据存入state
• 派生状态：使用useMemo计算派生值
• 状态提升：共享状态提升到最近公共父组件
• 避免冗余状态：能从props计算的值不存入state

4. Vue最佳实践

组件规范

• 选项式vs组合式：优先使用组合式API（script setup）
• Props定义：使用类型定义，设置required/默认值
• Emits定义：显式声明 emits
• 组件名：多词命名避免与HTML冲突

响应式系统

• ref vs reactive：基本类型用ref，对象用reactive
• 解构响应式对象：使用toRefs保持响应性
• 避免直接修改props：通过emit或v-model
• 计算属性：缓存昂贵的计算

生命周期

• onMounted/onUnmounted：清理副作用（事件监听、定时器）
• watch/watchEffect：正确处理依赖和清理

5. 性能优化

渲染优化

• 条件渲染：使用&&或三元运算符，避免不必要的渲染
• 列表优化：虚拟滚动处理大数据列表
• 懒加载：组件/路由/图片懒加载
• 避免匿名函数：事件处理函数提取为命名函数

资源优化

• 图片优化：使用适当格式（WebP）、尺寸、懒加载
• 代码分割：路由级别和组件级别代码分割
• Tree Shaking：确保ESM导出支持tree shaking
• 资源压缩：Gzip/Brotli压缩

缓存策略

• Memoization：合理使用React.memo/Vue的v-memo
• 状态缓存：避免重复计算
• HTTP缓存：合理使用Cache-Control

6. 可访问性 (A11y)

语义化HTML

• 正确使用标签：button用于点击，a用于导航，form用于表单
• 标题层级：正确使用h1-h6，保持层级关系
• Landmark元素：使用main、nav、aside、header、footer

ARIA属性

• role属性：必要时添加role
• aria-label：为无文本元素添加描述
• aria-expanded/aria-controls：展开/折叠组件
• 避免冗余：优先使用语义化HTML而非ARIA

键盘导航

• 焦点管理：确保可交互元素可获得焦点
• Tab顺序：合理的tabindex设置
• 焦点陷阱：模态框等需要管理焦点
• 快捷键：提供键盘快捷键支持

视觉可访问性

• 颜色对比度：文本对比度至少4.5:1
• 不依赖颜色：使用图标+文字，不只靠颜色传达信息
• 字体大小：支持浏览器字体缩放
• 动画控制：尊重prefers-reduced-motion

7. 安全性检查

XSS防护

• 危险API：避免使用innerHTML/dangerouslySetInnerHTML
• 输入验证：所有用户输入必须验证和转义
• URL处理：验证URL来源，避免javascript:伪协议
• Content Security Policy：配置合适的CSP

CSRF防护

• Token验证：敏感操作使用CSRF token
• SameSite Cookie：设置SameSite属性
• 验证Referer：检查请求来源

敏感数据处理

• 密钥管理：不在前端硬编码密钥
• 本地存储：敏感信息不存入localStorage
• HTTPS：确保敏感数据传输使用HTTPS

8. 样式与CSS

CSS架构

• CSS Modules：组件级别样式隔离
• CSS-in-JS：styled-components/emotion等方案
• 预处理器：合理使用Sass/Less特性
• 原子CSS：Tailwind等原子类库合理使用

响应式设计

• 移动优先：媒体查询使用min-width
• 断点一致：使用预设断点系统
• 相对单位：使用rem/em/%而非固定像素
• 容器查询：适当使用容器查询

性能考虑

• 避免过度嵌套：CSS选择器不超过3层
• will-change：谨慎使用，动画结束后移除
• contain：使用contain属性优化渲染

审查流程

步骤1：文件范围确定

1. 确定需要审查的文件列表
2. 识别文件类型和框架
3. 了解业务上下文

步骤2：逐文件审查

按照上述8个维度逐项检查每个文件：

1. 代码规范与质量
2. TypeScript类型检查
3. 框架特定最佳实践（React/Vue/Angular等）
4. 性能优化
5. 可访问性
6. 安全性
7. 样式与CSS

步骤3：问题分级

• P0（阻塞）：安全风险、明显的bug、性能严重问题
• P1（严重）：影响功能的类型错误、明显的可访问性问题
• P2（一般）：代码风格问题、轻微的性能优化点
• P3（建议）：代码组织建议、文档改进

步骤4：输出审查报告

生成结构化的审查报告，包含：

• 审查概述（文件数、问题统计）
• 按文件的问题列表
• 优先级排序的问题
• 修复建议和代码示例

常见代码异味

高危问题

• 直接使用innerHTML：XSS风险
• eval()或new Function()：代码注入风险
• 未转义的用户输入：XSS风险
• 明文存储敏感信息：安全风险
• 内存泄漏：未清理的事件监听、定时器、订阅

中等问题

• prop drilling：过度传递props，考虑状态管理
• 过大的组件：需要拆分
• 重复的逻辑：需要提取复用
• 魔法数字：应提取为常量
• 过长的函数：需要拆分

低优先级

• 不一致的命名：保持命名规范
• 缺少注释：关键逻辑需要注释
• 未使用的导入/变量：清理代码
• console.log：生产代码中应移除

工具推荐

静态分析

• ESLint：代码规范检查
• TypeScript：类型检查
• Prettier：代码格式化

性能分析

• Lighthouse：性能、可访问性、SEO检查
• React DevTools Profiler：React性能分析
• Vue DevTools Performance：Vue性能分析

安全检查

• ESLint Security Plugin：安全规则检查
• npm audit：依赖安全检查
• Snyk：安全漏洞扫描

使用方式

审查单个文件：

请审查这个文件：/path/to/component.tsx

审查多个文件：

请审查以下文件：
- /path/to/component1.tsx
- /path/to/component2.vue
- /path/to/utils.ts

审查代码片段：

请审查这段代码：
[粘贴代码]

特定维度审查：

请重点检查这个组件的性能问题

示例审查输出

## 代码审查报告

### 概述
- 审查文件数：5
- 发现问题：12
- 阻塞问题：1
- 严重问题：3
- 一般问题：5
- 建议：3

### 组件：UserProfile.tsx

#### P0 - 阻塞
1. **安全风险**：第45行使用dangerouslySetInnerHTML渲染用户输入
   ```typescript
   // 问题代码
   <div dangerouslySetInnerHTML={{ __html: user.bio }} />
   
   // 建议修复
   <div>{user.bio}</div>
   // 或如果需要富文本，使用DOMPurify清理
   <div dangerouslySetInnerHTML={{ 
     __html: DOMPurify.sanitize(user.bio) 
   }} />

P1 - 严重

2. 性能问题：第30行useEffect缺少依赖数组

   // 问题代码
   useEffect(() => {
     fetchUserData();
   }); // 缺少依赖，每次渲染都会执行
   
   // 建议修复
   useEffect(() => {
     fetchUserData();
   }, [userId]);
   

P2 - 一般

3. 代码规范：第15行函数超过50行，建议拆分

P3 - 建议

4. 可访问性：建议为头像添加alt属性

## 参考资料

- [React官方文档 - 最佳实践](https://react.dev/learn)
- [Vue.js风格指南](https://vuejs.org/style-guide/)
- [TypeScript深度手册](https://basarat.gitbook.io/typescript/)
- [Web可访问性指南(WCAG)](https://www.w3.org/WAI/WCAG21/quickref/)
- [OWASP前端安全](https://owasp.org/www-project-web-security-testing-guide/)
- [Google Web性能优化](https://web.dev/performance-scoring/)