Cao Note

外观

代码规范-工程配置最佳实践 ​

项目根目录配置文件一览 ​

my-project/
├── .eslint/                    # ESLint 规则拆分
│   ├── base.js
│   ├── ts.js
│   └── vue.js
├── .husky/
│   ├── pre-commit
│   └── commit-msg
├── .vscode/
│   └── settings.json           # 团队统一编辑器配置
├── eslint.config.js            # ESLint 配置
├── .prettierrc                 # Prettier 配置
├── .prettierignore
├── commitlint.config.js        # Commit 规范
├── .editorconfig               # 跨编辑器配置
├── .npmrc                      # npm/pnpm 配置
└── tsconfig.json               # TypeScript 配置
my-project/
├── .eslint/                    # ESLint 规则拆分
│   ├── base.js
│   ├── ts.js
│   └── vue.js
├── .husky/
│   ├── pre-commit
│   └── commit-msg
├── .vscode/
│   └── settings.json           # 团队统一编辑器配置
├── eslint.config.js            # ESLint 配置
├── .prettierrc                 # Prettier 配置
├── .prettierignore
├── commitlint.config.js        # Commit 规范
├── .editorconfig               # 跨编辑器配置
├── .npmrc                      # npm/pnpm 配置
└── tsconfig.json               # TypeScript 配置

editorconfig ​

跨编辑器统一基础设置（缩进、编码、换行符）。

ini
# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

VS Code 团队配置 ​

json
// .vscode/settings.json — 提交到仓库，团队共享
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.tabSize": 2,
  "files.eol": "\n",
  "typescript.tsdk": "node_modules/typescript/lib",
  "css.lint.unknownAtRules": "ignore"
}

// .vscode/extensions.json — 推荐插件
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "vue.volar",
    "bradlc.vscode-tailwindcss"
  ]
}
// .vscode/settings.json — 提交到仓库，团队共享
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.tabSize": 2,
  "files.eol": "\n",
  "typescript.tsdk": "node_modules/typescript/lib",
  "css.lint.unknownAtRules": "ignore"
}

// .vscode/extensions.json — 推荐插件
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "vue.volar",
    "bradlc.vscode-tailwindcss"
  ]
}

package.json scripts ​

json
{
  "scripts": {
    "lint": "eslint . --max-warnings=0",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "typecheck": "tsc --noEmit",
    "prepare": "husky",
    "commit": "cz"
  }
}
{
  "scripts": {
    "lint": "eslint . --max-warnings=0",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "typecheck": "tsc --noEmit",
    "prepare": "husky",
    "commit": "cz"
  }
}

Monorepo 中的规范配置 ​

my-monorepo/
├── .eslintrc.js              # root ESLint，各包可覆盖
├── .prettierrc                # 统一格式
├── .husky/                    # 全局 Git Hooks
├── packages/
│   ├── eslint-config/         # 共享 ESLint 配置
│   │   └── index.js
│   └── tsconfig/              # 共享 tsconfig
│       └── base.json
├── apps/
│   ├── web/
│   │   └── .eslintrc.js       # 继承 root + 项目特有规则
│   └── admin/
│       └── .eslintrc.js
my-monorepo/
├── .eslintrc.js              # root ESLint，各包可覆盖
├── .prettierrc                # 统一格式
├── .husky/                    # 全局 Git Hooks
├── packages/
│   ├── eslint-config/         # 共享 ESLint 配置
│   │   └── index.js
│   └── tsconfig/              # 共享 tsconfig
│       └── base.json
├── apps/
│   ├── web/
│   │   └── .eslintrc.js       # 继承 root + 项目特有规则
│   └── admin/
│       └── .eslintrc.js
js
// packages/eslint-config/index.js
module.exports = {
  rules: {
    'no-console': 'warn',
    '@typescript-eslint/no-unused-vars': 'error',
  },
}

// apps/web/.eslintrc.js
module.exports = {
  root: true,
  extends: ['@my/eslint-config', 'plugin:vue/vue3-recommended'],
}
// packages/eslint-config/index.js
module.exports = {
  rules: {
    'no-console': 'warn',
    '@typescript-eslint/no-unused-vars': 'error',
  },
}

// apps/web/.eslintrc.js
module.exports = {
  root: true,
  extends: ['@my/eslint-config', 'plugin:vue/vue3-recommended'],
}

CI 阶段质量检查 ​

yaml
# .github/workflows/quality.yml
name: Code Quality
on: [pull_request]

jobs:
  lint:
    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
      - run: pnpm lint
      - run: pnpm typecheck
      - run: pnpm test
# .github/workflows/quality.yml
name: Code Quality
on: [pull_request]

jobs:
  lint:
    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
      - run: pnpm lint
      - run: pnpm typecheck
      - run: pnpm test

Copyright © 2024-present xiaocao