18-code-review.md

Code Review 代码审查

什么是代码审查？

代码审查（Code Review）是团队协作开发中的重要环节，让其他人检查你的代码。

好处：

• 提高代码质量
• 分享知识
• 发现潜在问题
• 统一代码风格
• 团队协作

审查流程

1. 审查前准备

1. 阅读 PR 描述和关联 Issue
2. 了解变更的上下文
3. 在本地测试代码（可选）

2. 审查要点

类别	检查项
功能	逻辑是否正确，边界情况
设计	架构是否合理
可读性	命名、注释、结构
性能	有无性能问题
安全	有无安全漏洞
测试	测试是否充分
文档	是否需要更新文档

在 GitHub 网页审查代码（图文详解）

请求审查

第 1 步：在 PR 中添加审查者

1. 打开 PR 页面
2. 在右侧找到 Reviewers
3. 点击齿轮图标
4. 选择审查者

┌─────────────────────────────────────────────┐
│  Reviewers                                   │
│                                             │
│  👤 @reviewer1  ← 审查者                     │
│                                             │
│  [Request reviews from...]  ← 点击添加       │
└─────────────────────────────────────────────┘

审查代码

第 1 步：查看代码差异

1. 点击 PR 页面的 Files changed 标签
2. 查看代码变更

┌─────────────────────────────────────────────┐
│  #1 feat: 添加新按钮                         │
│                                             │
│  [Conversation] [Commits] [Checks] [Files]  │
│                                     ↑       │
│                              点击这里查看    │
├─────────────────────────────────────────────┤
│                                             │
│  Files changed (3)                           │
│                                             │
│  ─ src/button.ts (+5 -2)                    │
│                                             │
│     1  │ const button = () => {             │
│  -   2  │   return <button>Click</button>;  │
│  +   2  │   return <button className="new"> ││
│  +   3  │     Click                         │
│  +   4  │   </button>;                      │
│     5  │ };                                 │
│                                             │
└─────────────────────────────────────────────┘

第 2 步：添加行内评论

1. 将鼠标悬停在代码行号旁边
2. 点击出现的 + 按钮

     1  │ const button = () => {        [+]  ← 点击这个
     2  │   return <button>Click</button>;
     3  │ };

3. 在弹出框中输入评论

┌─────────────────────────────────────┐
│  💬 Leave a comment                  │
│                                     │
│  这里建议使用更具体的类名              │
│  而不是简单的 "new"                   │
│                                     │
│  ┌─────────────────────────────┐    │
│  │ 💡 Suggestion  ← 点击添加    │    │
│  └─────────────────────────────┘    │
│                                     │
│  ☐ Add to review                    │
│                                     │
│     [Start review]                  │
└─────────────────────────────────────┘

第 3 步：使用代码建议

点击 Suggestion 按钮后，可以提供修改建议：

┌─────────────────────────────────────┐
│  💬 Leave a comment                  │
│                                     │
│  建议修改类名：                       │
│                                     │
│  ```suggestion                      │
│  return <button className="primary">││
│  ```                                │
│                                     │
│  ☑ Add to review                    │
│                                     │
│     [Start review]                  │
└─────────────────────────────────────┘

这样被审查者可以直接接受你的修改建议！

第 4 步：提交审查

审查完成后，点击页面右上角的 Review changes：

┌─────────────────────────────────────┐
│  Review changes                      │
│                                     │
│  Leave a comment:                   │
│  ┌─────────────────────────────┐    │
│  │ 代码看起来不错，但建议修改    │    │
│  │ 类名的命名方式               │    │
│  └─────────────────────────────┘    │
│                                     │
│  ○ Comment  ← 仅评论，不阻止合并    │
│  ○ Approve  ← 批准 PR              │
│  ○ Request changes ← 要求修改       │
│                                     │
│     [Submit review]                 │
└─────────────────────────────────────┘

三种审查结果：

选项	说明	何时使用
Comment	仅评论	不反对合并，只是提建议
Approve	批准	代码质量好，可以合并
Request changes	要求修改	有问题需要修复

查看审查状态

在 PR 页面可以看到审查状态：

┌─────────────────────────────────────────────┐
│  #1 feat: 添加新按钮                         │
│                                             │
│  Reviewers                                   │
│  ✅ @reviewer1 approved  ← 审查通过          │
│                                             │
│  Checks                                     │
│  ✅ CI / test  ← 测试通过                    │
│  ✅ CI / lint  ← 代码检查通过                │
│                                             │
│  Ready to merge  ← 可以合并                  │
└─────────────────────────────────────────────┘

提供好的反馈

好的反馈示例

✅ 具体指出问题位置
✅ 解释为什么有问题
✅ 提供改进建议
✅ 使用代码建议

示例：

这里的类名 "new" 不够描述性，建议改为 "primary"
以表示这是一个主要按钮。

```suggestion
className="primary"

### 不好的反馈示例

❌ "代码不好" ❌ "这有问题" ❌ 没有建设性的批评 ❌ 语气太强硬

## 自动化审查

### Linter 集成

```yaml
# .github/workflows/lint.yml
name: Lint
on: pull_request
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm run lint

测试检查

name: Test
on: pull_request
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm test

代码审查最佳实践

作为审查者

1. 及时审查：不要拖延
2. 保持友好：建设性的批评
3. 区分优先级：必须修改 vs 建议修改
4. 指出优点：不要只挑毛病

作为被审查者

1. 不要个人化：审查是针对代码，不是针对人
2. 认真考虑：每条反馈都有价值
3. 及时响应：不要让 PR 放太久
4. 可以讨论：不同意可以讨论

---

实践练习

练习：进行代码审查

任务 1：创建测试 PR

1. 创建一个仓库
2. 创建功能分支并修改代码
3. 推送到远程
4. 创建 PR

任务 2：审查代码

1. 打开 PR 的 Files changed 页面
2. 找到要评论的代码行
3. 点击 + 按钮添加评论
4. 使用 Suggestion 功能
5. 点击 Start review

任务 3：提交审查

1. 点击 Review changes
2. 选择 Approve 或 Comment
3. 点击 Submit review

验证方法：

• PR 页面显示你的审查评论
• 审查状态显示你的决定

下一步

GitHub Actions 自动化 →