xiaoniuge36/code-review

Code Review Skill

代码审查指导，帮助 AI 完成代码质量检查、潜在问题发现、性能优化建议、安全漏洞识别等任务。

核心能力

| 能力 | 说明 | |------|------| | 🔍 规范检查 | 代码风格、命名规范、目录结构 | | 🐛 Bug 发现 | 潜在 bug、边界情况、异常处理 | | ⚡ 性能分析 | 性能瓶颈、渲染优化、内存泄漏 | | 🔒 安全审查 | XSS、敏感信息、权限校验 | | 📐 架构评估 | 组件设计、代码复用、可维护性 |

---

审查流程

标准审查流程

1. 理解变更目的        → 阅读 PR 描述、commit 信息
2. 检查代码规范        → 命名、格式、注释
3. 审查业务逻辑        → 正确性、边界情况
4. 检查性能问题        → 渲染、请求、内存
5. 审查安全风险        → XSS、敏感数据
6. 评估可维护性        → 复杂度、可测试性
7. 输出审查报告        → 问题分类、优先级

审查报告模板

## 代码审查报告

### 📊 概览
- 文件数：X 个
- 问题数：X 个（严重 X / 警告 X / 建议 X）

### 🔴 严重问题（必须修复）
1. [文件名:行号] 问题描述
   - 原因：...
   - 建议：...

### 🟡 警告问题（建议修复）
1. [文件名:行号] 问题描述
   - 建议：...

### 🔵 优化建议（可选改进）
1. [文件名:行号] 建议描述

### ✅ 亮点
- 做得好的地方

---

审查清单

1. 代码规范检查

| 检查项 | 说明 | 严重程度 | |--------|------|----------| | 命名规范 | 变量/函数/组件命名是否清晰 | 警告 | | 代码格式 | 缩进、空格、换行是否一致 | 建议 | | 注释完整 | 复杂逻辑是否有注释说明 | 建议 | | 类型定义 | TypeScript 类型是否完整 | 警告 | | 文件组织 | 目录结构是否合理 | 建议 |

// ❌ 不规范的命名
const d = new Date();
const fn = (x) => x * 2;
function handleClick() { /* 处理搜索 */ }

// ✅ 规范的命名
const currentDate = new Date();
const double = (value: number) => value * 2;
function handleSearch() { /* 处理搜索 */ }

2. 业务逻辑审查

| 检查项 | 说明 | 严重程度 | |--------|------|----------| | 边界条件 | 空值、零值、极值处理 | 严重 | | 错误处理 | try-catch、错误提示 | 严重 | | 异步处理 | Promise 错误、竞态条件 | 严重 | | 状态管理 | 状态更新的正确性 | 警告 | | 数据校验 | 输入数据的有效性检查 | 警告 |

// ❌ 缺少边界处理
function getUserName(user) {
  return user.name.toUpperCase();
}

// ✅ 完善的边界处理
function getUserName(user: User | null): string {
  if (!user?.name) {
    return '';
  }
  return user.name.toUpperCase();
}

3. 性能问题检查

| 检查项 | 说明 | 严重程度 | |--------|------|----------| | 不必要渲染 | 组件无效 re-render | 警告 | | 内存泄漏 | 事件监听未清理 | 严重 | | 大数据处理 | 大数组/对象操作 | 警告 | | 重复请求 | 相同请求未缓存 | 警告 | | Bundle 大小 | 不必要的依赖引入 | 建议 |

// ❌ 性能问题
function UserList({ users }) {
  // 每次渲染都创建新函数和新对象
  const handleClick = (id) => console.log(id);
  const style = { color: 'red' };
  
  return users.map(user => (
    <div key={user.id} style={style} onClick={() => handleClick(user.id)}>
      {user.name}
    </div>
  ));
}

// ✅ 优化后
const style = { color: 'red' }; // 提升到组件外

function UserList({ users }) {
  const handleClick = useCallback((id: number) => {
    console.log(id);
  }, []);

  return users.map(user => (
    <UserItem key={user.id} user={user} onClick={handleClick} />
  ));
}

const UserItem = memo(({ user, onClick }) => (
  <div style={style} onClick={() => onClick(user.id)}>
    {user.name}
  </div>
));

4. 安全问题检查

| 检查项 | 说明 | 严重程度 | |--------|------|----------| | XSS 风险 | dangerouslySetInnerHTML、v-html | 严重 | | 敏感信息 | 密码、token 暴露 | 严重 | | SQL 注入 | 动态拼接 SQL | 严重 | | CSRF | 跨站请求伪造 | 严重 | | 权限校验 | 前端权限绕过 | 警告 |

// ❌ XSS 风险
<div dangerouslySetInnerHTML={{ __html: userInput }} />

// ✅ 安全处理
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />

// ❌ 敏感信息暴露
const API_KEY = 'sk-xxxxx'; // 硬编码在前端

// ✅ 使用环境变量（仅限公开 key）
const API_KEY = import.meta.env.VITE_PUBLIC_API_KEY;

5. React 特定检查

| 检查项 | 说明 | 严重程度 | |--------|------|----------| | Hooks 规则 | 条件调用 hooks | 严重 | | Key 属性 | 列表 key 不合理 | 警告 | | 依赖数组 | useEffect 依赖不完整 | 警告 | | 状态更新 | 异步更新竞态 | 警告 | | Ref 使用 | 直接操作 DOM | 建议 |

// ❌ Hooks 规则违反
function Component({ condition }) {
  if (condition) {
    const [state, setState] = useState(false); // 条件调用
  }
}

// ❌ 依赖不完整
useEffect(() => {
  fetchData(userId);
}, []); // 缺少 userId 依赖

// ✅ 正确写法
useEffect(() => {
  fetchData(userId);
}, [userId]);

6. Vue 特定检查

| 检查项 | 说明 | 严重程度 | |--------|------|----------| | 响应式丢失 | 解构 reactive 对象 | 严重 | | v-for key | key 使用 index | 警告 | | 双向绑定 | v-model 滥用 | 建议 | | 组件通信 | props 直接修改 | 严重 | | 生命周期 | onUnmounted 清理 | 警告 |

// ❌ 响应式丢失
const state = reactive({ count: 0 });
const { count } = state; // count 不再是响应式

// ✅ 保持响应式
const state = reactive({ count: 0 });
const count = toRef(state, 'count');
// 或使用 ref
const count = ref(0);

// ❌ 修改 props
const props = defineProps<{ value: string }>();
props.value = 'new'; // 错误！

// ✅ 使用 emit
const emit = defineEmits<{ (e: 'update:value', v: string): void }>();
emit('update:value', 'new');

---

常见问题模式

问题模式速查

| 模式 | 问题 | 解决方案 | |------|------|----------| | 魔法数字 | 硬编码数字 | 定义常量 | | 过长函数 | 函数超过50行 | 拆分函数 | | 深层嵌套 | if/else 超过3层 | 提前返回 | | 重复代码 | 相同逻辑多处出现 | 抽取函数 | | 过大组件 | 组件超过300行 | 拆分组件 | | Props Drilling | 多层传递props | Context/Store |

审查评语模板

// 严重问题
🔴 **[严重]** 这里存在内存泄漏风险，useEffect 中的事件监听未在清理函数中移除。
建议：添加 cleanup 函数移除监听器。

// 警告问题
🟡 **[警告]** useEffect 依赖数组缺少 `userId`，可能导致数据不同步。
建议：将 `userId` 添加到依赖数组中。

// 优化建议
🔵 **[建议]** 这个函数可以抽取为自定义 hook，提高复用性。

// 肯定反馈
✅ **[亮点]** 错误处理做得很完善，考虑了多种边界情况。

---

自动化检查

配合工具使用

| 工具 | 用途 | 检查范围 | |------|------|----------| | ESLint | 代码规范 | 语法、规范 | | TypeScript | 类型检查 | 类型安全 | | Prettier | 代码格式 | 格式一致性 | | SonarQube | 代码质量 | 复杂度、重复 |

MCP 工具集成

如果项目配置了 codegen-engine MCP，可以调用：

// 检查代码规范
CallMcpTool({
  server: "codegen-engine",
  toolName: "check_code_compliance",
  arguments: {
    generatedFiles: ["src/pages/user/index.tsx"]
  }
})

// TSC + ESLint 验证
CallMcpTool({
  server: "codegen-engine",
  toolName: "validate_code",
  arguments: {
    projectPath: "D:/project",
    files: ["src/pages/user/index.tsx"]
  }
})

---

触发关键词

| 类型 | 关键词示例 | |------|-----------| | 代码审查 | "审查代码"、"review代码"、"检查代码" | | 质量检查 | "代码质量"、"代码问题"、"代码规范" | | 性能分析 | "性能问题"、"优化代码"、"渲染慢" | | 安全检查 | "安全问题"、"XSS"、"漏洞" | | 最佳实践 | "最佳实践"、"改进建议"、"如何改进" |

---

注意事项

审查原则

✅ 审查时应该：
- 保持客观，就事论事
- 提供具体的改进建议
- 区分必须修复和建议优化
- 肯定代码中的亮点

❌ 审查时避免：
- 主观偏好强加于人
- 只批评不给建议
- 忽视上下文和背景
- 吹毛求疵、过度追求完美

优先级排序

修复优先级：
1. 🔴 安全问题 - 立即修复
2. 🔴 严重 Bug - 必须修复
3. 🟡 性能问题 - 建议修复
4. 🟡 代码规范 - 建议修复
5. 🔵 优化建议 - 可选改进