前端工程化实战：从代码规范、测试体系到 CI/CD 的全链路指南

// eslint.config.js
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import prettier from 'eslint-config-prettier';

export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  react.configs.flat.recommended,
  prettier, // 放最后，关闭冲突规则
  {
    rules: {
      'no-console': 'warn',
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    },
  },
];

// package.json
{
  "scripts": { "prepare": "husky" },
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{css,scss}": ["stylelint --fix", "prettier --write"],
    "*.{json,md}": ["prettier --write"]
  }
}

# .husky/pre-commit
npx lint-staged

# .husky/commit-msg
npx commitlint --edit $1

// commitlint.config.js
export default {
  extends: ['@commitlint/config-conventional'],
  // feat: 新功能 | fix: 修复 | docs: 文档 | style: 格式
  // refactor: 重构 | perf: 性能 | test: 测试 | chore: 构建/工具
};

传统金字塔（Google）        测试奖杯（Kent C. Dodds）
    △ E2E (少)                  ▽ E2E (少)
   ██ 集成 (中)               ████ 集成 (最多)  ← 投入产出比最高
  ████ 单元 (多)              ██ 单元 (中)
                              █ 静态分析 (TypeScript/ESLint)

现代前端推荐奖杯模型：集成测试（Testing Library 模拟用户操作）性价比最高

// utils.test.ts — 单元测试
import { describe, it, expect } from 'vitest';
import { formatPrice } from './utils';

describe('formatPrice', () => {
  it('formats cents to dollar string', () => {
    expect(formatPrice(1999)).toBe('$19.99');
  });
  it('handles zero', () => {
    expect(formatPrice(0)).toBe('$0.00');
  });
});

// LoginForm.test.tsx — 组件集成测试
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it('submits login form with credentials', async () => {
  const onSubmit = vi.fn();
  render(<LoginForm onSubmit={onSubmit} />);
  await userEvent.type(screen.getByLabelText('Email'), 'test@example.com');
  await userEvent.type(screen.getByLabelText('Password'), '123456');
  await userEvent.click(screen.getByRole('button', { name: 'Login' }));
  expect(onSubmit).toHaveBeenCalledWith({ email: 'test@example.com', password: '123456' });
});

name: CI
on: [push, pull_request]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: pnpm }
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint          # ESLint + Stylelint
      - run: pnpm type-check    # tsc --noEmit
      - run: pnpm test --coverage
      - run: pnpm build
      - uses: codecov/codecov-action@v3
        with: { fail_ci_if_error: true }

  deploy:
    needs: quality
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - run: pnpm build
      - run: pnpm deploy:prod