10.团队管理与技术债务 - 标准答案

原则: 新代码高标准,老代码不动(除非必须改)

具体做法:
1. 制定《新代码规范》(ESLint + Prettier + Git Hooks)
2. 新功能必须符合新规范,老代码暂不强制
3. 修改老代码时,同步重构该模块(限定范围)
4. 逐步推进,避免大爆炸式重构

每完成 3 个业务需求,团队获得 1 个"技术债券"
可兑换:
- 1 天重构时间
- 引入 1 个新工具
- 优化 1 个性能瓶颈

目的: 让技术投入可视化、可量化

# 安装依赖
pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-vue @vue/eslint-config-typescript

# .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    'prettier' // 关闭与 Prettier 冲突的规则
  ],
  rules: {
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-explicit-any': 'warn'
  }
}

# .prettierrc.json
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

# 安装
pnpm add -D husky lint-staged

# package.json
{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

# 添加 pre-commit hook
npx husky add .husky/pre-commit "npx lint-staged"

# .github/workflows/ci.yml
name: CI

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install
        run: pnpm install
      - name: Lint
        run: pnpm lint
      - name: Type Check
        run: pnpm type-check

# 安装
pnpm add -D @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog

# commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional']
}

# package.json
{
  "scripts": {
    "commit": "cz"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }
}

# 添加 commit-msg hook
npx husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

# 不再使用 git commit -m "xxx"
# 而是运行
pnpm commit

# 自动弹出交互式提示
? Select the type of change: (Use arrow keys)
❯ feat:     A new feature
  fix:      A bug fix
  docs:     Documentation only changes
  style:    Changes that do not affect code meaning
  refactor: A code change that neither fixes a bug nor adds a feature
  perf:     A code change that improves performance
  test:     Adding missing tests

# Code Review 检查清单

## 功能性 (Functionality)
- [ ] 代码实现是否符合需求?
- [ ] 是否有遗漏的边界条件?
- [ ] 错误处理是否完善?

## 可读性 (Readability)
- [ ] 变量/函数命名是否清晰?
- [ ] 是否有必要的注释?(复杂逻辑、业务规则)
- [ ] 代码结构是否清晰?

## 性能 (Performance)
- [ ] 是否有不必要的重复计算?
- [ ] 是否有内存泄漏风险?
- [ ] 大数据量场景是否考虑分页/虚拟滚动?

## 安全性 (Security)
- [ ] 是否有 XSS/CSRF 风险?
- [ ] 敏感信息是否加密?
- [ ] API 调用是否有权限校验?

## 可维护性 (Maintainability)
- [ ] 是否遵循 DRY 原则(Don't Repeat Yourself)?
- [ ] 是否有过度设计?
- [ ] 是否需要补充单元测试?

## 架构一致性 (Consistency)
- [ ] 是否符合团队代码风格?
- [ ] 是否复用已有组件/工具?
- [ ] 新增依赖是否合理?

<!-- .github/pull_request_template.md -->
## 变更说明
简述本次改动的目的和内容

## 自测清单
- [ ] 本地测试通过
- [ ] ESLint/类型检查通过
- [ ] 已添加/更新单元测试

## Reviewer 检查点
请 Reviewer 重点关注:
- [ ] XX 模块的性能优化是否合理
- [ ] XX 函数的错误处理是否完善

提交 PR
  ↓
CI 自动检查(Lint/Test)
  ↓ (通过)
指定 2 名 Reviewer
  ↓
Reviewer 1 审查 → 提意见 → Author 修改
  ↓
Reviewer 2 审查 → Approve
  ↓
Reviewer 1 再次审查 → Approve
  ↓
合并到主分支

# .github/CODEOWNERS
# 自动指定 Reviewer
*.vue @frontend-team
*.ts @frontend-team
/server/** @backend-team

// dangerfile.js
import { danger, warn, fail } from 'danger'

// PR 描述不能为空
if (danger.github.pr.body.length < 10) {
  fail('请填写 PR 描述')
}

// 大 PR 警告(超过 500 行)
const bigPRThreshold = 500
if (danger.github.pr.additions + danger.github.pr.deletions > bigPRThreshold) {
  warn(`本次 PR 改动较大(${danger.github.pr.additions + danger.github.pr.deletions} 行),建议拆分`)
}

// 必须有测试
const hasTests = danger.git.modified_files.some(f => f.includes('.spec.') || f.includes('.test.'))
if (!hasTests) {
  warn('请补充单元测试')
}

# ❌ 不好的评论
这代码写得不对

# ✅ 好的评论
🚨 **MUST FIX**: 这里缺少空值校验,如果 `user.profile` 为 null 会导致报错

建议修改为:
\`\`\`javascript
const avatar = user.profile?.avatar ?? '/default-avatar.png'
\`\`\`