前端工程化最佳实践：ESLint+Prettier+Git Hooks 统一开发规范

pnpm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue eslint-plugin-react eslint-plugin-import eslint-plugin-simple-import-sort
pnpm i -D prettier eslint-config-prettier eslint-plugin-prettier
pnpm i -D husky lint-staged @commitlint/cli @commitlint/config-conventional

{
  "scripts": {
    "lint": "eslint --ext .ts,.tsx,.js,.vue src",
    "lint:fix": "eslint --ext .ts,.tsx,.js,.vue src --fix",
    "format": "prettier --write .",
    "test": "vitest run || jest"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx,js,vue}": ["eslint --fix", "prettier --write"],
    "src/**/*.{css,scss,md}": ["prettier --write"]
  }
}

module.exports = {
  root: true,
  env: { browser: true, es2021: true, node: true },
  parser: '@typescript-eslint/parser',
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  plugins: ['@typescript-eslint', 'import', 'simple-import-sort', 'prettier'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:import/recommended',
    'plugin:import/typescript',
    'prettier'
  ],
  settings: { react: { version: 'detect' } },
  rules: {
    'prettier/prettier': ['error'],
    'import/order': ['off'],
    'simple-import-sort/imports': ['error'],
    'simple-import-sort/exports': ['error'],
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    'vue/multi-word-component-names': 'off'
  },
  overrides: [
    { files: ['**/*.vue'], rules: { 'react/jsx-uses-react': 'off', 'react/react-in-jsx-scope': 'off' } },
    { files: ['**/*.tsx'], rules: { 'vue/no-unused-components': 'off' } }
  ]
}

{ "semi": false, "singleQuote": true, "printWidth": 100, "trailingComma": "es5" }

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

npx husky init

npx lint-staged

npx commitlint --edit "$1"

pnpm test

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

feat(auth): 支持短信验证码登录
fix(router): 修复刷新后白屏问题
chore(deps): 升级 eslint 到最新版本

name: Quality
on: { pull_request: { branches: [main] }, push: { branches: [main] } }
jobs:
  lint_test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'pnpm' }
      - run: corepack enable
      - run: pnpm i --frozen-lockfile
      - run: pnpm lint
      - run: pnpm test -- --coverage

dist
node_modules
coverage
*.min.js

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue" ]
}

{
  "lint-staged": {
    "src/**/*.{ts,tsx,js,vue}": ["eslint --fix --cache", "prettier --write"],
    "*.{css,scss,md}": ["prettier --write"]
  }
}

{
  "coverageThreshold": { "global": { "branches": 70, "functions": 70, "lines": 70 } }
}

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', ['feat','fix','chore','docs','refactor','perf','test','build','ci','revert']],
    'scope-enum': [2, 'always', ['app','ui','api','deps','lint','release']],
    'subject-case': [2, 'never', ['sentence-case','start-case','pascal-case','upper-case']],
    'header-max-length': [2, 'always', 72]
  }
}

rules: {
  'simple-import-sort/imports': ['error', {
    groups: [
      ['^react', '^vue', '^@?\w'],
      ['^(@/)(.*)$'],
      ['^\.\.(?!/?$)', '^\.'],
      ['^.+\.s?css$']
    ]
  }]
}

* text=auto eol=lf

{
  "lint-staged": {
    "src/**/*.{ts,tsx,js,vue}": ["eslint --fix --cache", "prettier --write"],
    "*.{css,scss,md}": ["prettier --write"]
  }
}