代码规范

代码规范概述

代码规范是团队协作的基础，主要包括：

代码风格：ESLint、Prettier
代码质量：TypeScript、代码审查
Git 规范：Commit 规范、分支管理
文档规范：注释、README

ESLint

配置 ESLint

安装：

npm install --save-dev eslint

配置文件 .eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'error',
    'react/prop-types': 'off',
  },
};

常用规则

代码质量：

rules: {
  'no-console': 'warn',           // 禁止 console
  'no-debugger': 'error',         // 禁止 debugger
  'no-unused-vars': 'error',      // 禁止未使用变量
  'no-undef': 'error',            // 禁止未定义变量
  'eqeqeq': ['error', 'always'],  // 必须使用 ===
}

代码风格：

rules: {
  'indent': ['error', 2],         // 缩进 2 空格
  'quotes': ['error', 'single'],  // 单引号
  'semi': ['error', 'always'],    // 必须分号
  'comma-dangle': ['error', 'always-multiline'], // 尾随逗号
}

Prettier

配置 Prettier

安装：

npm install --save-dev prettier

配置文件 .prettierrc：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid"
}

与 ESLint 集成

安装插件：

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

配置：

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'prettier', // 必须放在最后
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

Git Hooks

Husky

安装：

npm install --save-dev husky
npx husky install

配置：

// package.json
{
  "scripts": {
    "prepare": "husky install"
  }
}

Pre-commit Hook：

# .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint
npm run test

lint-staged

安装：

npm install --save-dev lint-staged

配置：

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

Pre-commit：

# .husky/pre-commit
npx lint-staged

Commit 规范

Conventional Commits

格式：

<type>(<scope>): <subject>

<body>

<footer>

类型：

feat：新功能
fix：修复 bug
docs：文档变更
style：代码格式（不影响代码运行）
refactor：重构
perf：性能优化
test：测试
chore：构建过程或辅助工具的变动

示例：

feat(user): 添加用户登录功能

实现了用户登录、注册功能，包括表单验证和错误处理

Closes #123

Commitizen

安装：

npm install -g commitizen
npm install --save-dev cz-conventional-changelog

配置：

// package.json
{
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }
}

使用：

git cz

代码审查

Code Review 清单

功能：

[ ] 功能是否按需求实现
[ ] 边界情况是否处理
[ ] 错误处理是否完善

代码质量：

[ ] 代码是否清晰易读
[ ] 是否有重复代码
[ ] 命名是否规范
[ ] 注释是否充分

性能：

[ ] 是否有性能问题
[ ] 是否有内存泄漏
[ ] 是否有不必要的渲染

安全：

[ ] 是否有安全漏洞
[ ] 输入验证是否充分
[ ] 敏感信息是否泄露

Monorepo

Lerna

安装：

npm install -g lerna

初始化：

lerna init

结构：

packages/
  package-a/
  package-b/

命令：

lerna bootstrap  # 安装依赖
lerna run test   # 运行所有包的测试
lerna publish    # 发布包

Nx

安装：

npx create-nx-workspace@latest

特点：

更快的构建
更好的缓存
依赖图可视化

Turborepo

安装：

npm install -g turbo

配置 turbo.json：

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["build"],
      "outputs": []
    }
  }
}

组件库开发

项目结构

packages/
  components/        # 组件库
  utils/            # 工具函数
  theme/            # 主题
  docs/             # 文档

构建配置

Rollup 配置：

// rollup.config.js
export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.esm.js',
      format: 'es',
    },
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
    },
  ],
  external: ['react', 'react-dom'],
};