使用ESLint+Prettier來統一前端代碼風格 - 學而時習詳情 - 代碼規範,typescript,json,代碼規範,HarmonyOS,後端開發 mob64ca140d2323 博客

ESLint + Prettier 代碼規範統一指南

文章目錄

ESLint + Prettier 代碼規範統一指南

代碼規範的重要性

為什麼需要代碼規範？

🎯 **核心價值**
📊 **數據支撐**

ESLint 詳細介紹

什麼是 ESLint？
基礎安裝和配置

1. 安裝 ESLint
2. 初始化配置
3. 基礎配置文件

高級配置選項

1. 自定義規則配置
2. 插件使用
3. 環境特定配置

Prettier 詳細介紹

什麼是 Prettier？
基礎安裝和配置

1. 安裝 Prettier
2. 基礎配置文件
3. 忽略文件配置

高級配置選項

1. 文件類型特定配置
2. 編輯器集成

ESLint + Prettier 集成配置

解決衝突問題

1. 安裝集成插件
2. 配置 ESLint
3. 統一配置文件

工作流集成

1. Package.json 腳本
2. 自動化腳本

團隊協作最佳實踐

Git Hooks 集成

1. 使用 Husky
2. 完整的 Git Hooks 配置

CI/CD 集成

1. GitHub Actions 配置
2. GitLab CI 配置

編輯器配置統一

1. EditorConfig
2. VS Code 工作區配置

不同項目類型配置方案

React 項目配置

1. 依賴安裝
2. ESLint 配置
3. Prettier 配置

Vue 項目配置

1. 依賴安裝
2. ESLint 配置

TypeScript 項目配置

1. 完整的 TypeScript 配置

Node.js 項目配置

1. 服務端配置

常見問題和解決方案

問題 1：ESLint 和 Prettier 規則衝突
問題 2：編輯器格式化不一致
問題 3：Git Hooks 不生效
問題 4：性能問題
問題 5：TypeScript 項目配置問題
故障排除清單

🔍 **診斷步驟**
🛠️ **常用調試命令**

實際案例分享

案例 1：大型電商項目代碼規範實施

項目背景
實施過程

案例 2：開源組件庫規範化

項目背景
配置策略

案例 3：微前端架構規範統一

項目背景
統一配置策略
實施效果

最佳實踐總結

🎯 **實施建議**
📊 **成功指標**

總結

核心要點回顧
下一步行動

代碼規範的重要性

為什麼需要代碼規範？

在現代前端開發中，代碼規範不僅僅是"好看"的問題，它關係到：

🎯 核心價值

提高代碼質量

減少潛在 bug
提升代碼可讀性
統一編碼風格

提升團隊效率

降低代碼審查成本
減少溝通成本
提高開發效率

降低維護成本

便於代碼重構
易於新人上手
減少技術債務

📊 數據支撐

統計數據顯示：
- 規範化的代碼可以減少 40% 的 bug 率
- 團隊協作效率提升 30%
- 代碼審查時間減少 50%

ESLint 詳細介紹

什麼是 ESLint？

ESLint 是一個開源的 JavaScript 代碼檢查工具，用於識別和報告代碼中的模式匹配問題。

基礎安裝和配置

1. 安裝 ESLint

# 全局安裝
npm install -g eslint

# 項目本地安裝（推薦）
npm install --save-dev eslint

# 使用 yarn
yarn add --dev eslint

# 使用 pnpm
pnpm add -D eslint

2. 初始化配置

# 交互式初始化
npx eslint --init

# 或者使用
npm init @eslint/config

3. 基礎配置文件

創建 .eslintrc.js 文件：

module.exports = {
  // 環境配置
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true
  },
  
  // 繼承的配置
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended'
  ],
  
  // 解析器配置
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  
  // 插件
  plugins: [
    '@typescript-eslint',
    'react',
    'react-hooks'
  ],
  
  // 自定義規則
  rules: {
    // 基礎規則
    'no-console': 'warn',
    'no-debugger': 'error',
    'no-unused-vars': 'error',
    
    // 代碼風格
    'indent': ['error', 2],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always'],
    
    // React 相關
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  },
  
  // 忽略配置
  ignorePatterns: [
    'dist/',
    'build/',
    'node_modules/',
    '*.min.js'
  ]
};

高級配置選項

1. 自定義規則配置

module.exports = {
  rules: {
    // 錯誤級別：off/0, warn/1, error/2
    
    // 變量相關
    'no-undef': 'error',
    'no-unused-vars': ['error', { 
      vars: 'all',
      args: 'after-used',
      ignoreRestSiblings: false 
    }],
    
    // 代碼質量
    'complexity': ['warn', 10],
    'max-depth': ['warn', 4],
    'max-lines': ['warn', 300],
    'max-params': ['warn', 4],
    
    // 最佳實踐
    'eqeqeq': ['error', 'always'],
    'no-eval': 'error',
    'no-implied-eval': 'error',
    'prefer-const': 'error',
    'no-var': 'error',
    
    // ES6+ 特性
    'arrow-spacing': 'error',
    'prefer-arrow-callback': 'error',
    'prefer-template': 'error'
  }
};

2. 插件使用

module.exports = {
  plugins: [
    // TypeScript 支持
    '@typescript-eslint',
    
    // React 支持
    'react',
    'react-hooks',
    
    // Vue 支持
    'vue',
    
    // 導入檢查
    'import',
    
    // JSX a11y
    'jsx-a11y',
    
    // 安全檢查
    'security'
  ],
  
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:import/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:security/recommended'
  ]
};

3. 環境特定配置

module.exports = {
  // 覆蓋配置
  overrides: [
    {
      // 測試文件配置
      files: ['**/*.test.js', '**/*.spec.js'],
      env: {
        jest: true
      },
      rules: {
        'no-console': 'off'
      }
    },
    {
      // TypeScript 文件配置
      files: ['**/*.ts', '**/*.tsx'],
      parser: '@typescript-eslint/parser',
      rules: {
        '@typescript-eslint/no-unused-vars': 'error',
        '@typescript-eslint/explicit-function-return-type': 'warn'
      }
    }
  ]
};

Prettier 詳細介紹

什麼是 Prettier？

Prettier 是一個代碼格式化工具，支持多種語言，能夠自動格式化代碼以保持一致的風格。

基礎安裝和配置

1. 安裝 Prettier

# 項目本地安裝
npm install --save-dev prettier

# 使用 yarn
yarn add --dev prettier

# 使用 pnpm
pnpm add -D prettier

2. 基礎配置文件

創建 .prettierrc.js 文件：

module.exports = {
  // 基礎配置
  printWidth: 80,           // 每行最大字符數
  tabWidth: 2,              // 縮進空格數
  useTabs: false,           // 使用空格而不是 tab
  semi: true,               // 語句末尾添加分號
  singleQuote: true,        // 使用單引號
  quoteProps: 'as-needed',  // 對象屬性引號
  
  // JSX 配置
  jsxSingleQuote: true,     // JSX 中使用單引號
  jsxBracketSameLine: false, // JSX 標籤閉合位置
  
  // 數組和對象
  trailingComma: 'es5',     // 尾隨逗號
  bracketSpacing: true,     // 對象字面量空格
  
  // 箭頭函數
  arrowParens: 'avoid',     // 箭頭函數參數括號
  
  // 其他
  endOfLine: 'lf',          // 換行符
  embeddedLanguageFormatting: 'auto', // 嵌入語言格式化
  
  // HTML 配置
  htmlWhitespaceSensitivity: 'css',
  
  // Vue 配置
  vueIndentScriptAndStyle: false
};

3. 忽略文件配置

創建 .prettierignore 文件：

# 依賴
node_modules/
package-lock.json
yarn.lock
pnpm-lock.yaml

# 構建產物
dist/
build/
coverage/

# 配置文件
.env
.env.local
.env.production

# 其他
*.min.js
*.min.css
public/

高級配置選項

1. 文件類型特定配置

module.exports = {
  // 全局配置
  printWidth: 80,
  tabWidth: 2,
  
  // 覆蓋配置
  overrides: [
    {
      files: '*.json',
      options: {
        tabWidth: 4
      }
    },
    {
      files: '*.md',
      options: {
        printWidth: 100,
        proseWrap: 'always'
      }
    },
    {
      files: '*.{css,scss,less}',
      options: {
        singleQuote: false
      }
    }
  ]
};

2. 編輯器集成

VS Code 配置 (.vscode/settings.json)：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

WebStorm 配置：

打開 Settings → Tools → File Watchers
添加 Prettier 文件監聽器
配置自動格式化

ESLint + Prettier 集成配置

解決衝突問題

ESLint 和 Prettier 在某些規則上可能存在衝突，需要正確配置來避免。

1. 安裝集成插件

# 安裝 eslint-config-prettier（禁用衝突規則）
npm install --save-dev eslint-config-prettier

# 安裝 eslint-plugin-prettier（將 Prettier 作為 ESLint 規則運行）
npm install --save-dev eslint-plugin-prettier

2. 配置 ESLint

更新 .eslintrc.js：

module.exports = {
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended', // 必須放在最後
  ],
  
  plugins: [
    '@typescript-eslint',
    'react',
    'prettier'
  ],
  
  rules: {
    // Prettier 相關
    'prettier/prettier': 'error',
    
    // 禁用與 Prettier 衝突的規則
    'indent': 'off',
    'quotes': 'off',
    'semi': 'off',
    'comma-dangle': 'off',
    'max-len': 'off',
    
    // 保留非格式化相關的規則
    'no-console': 'warn',
    'no-debugger': 'error',
    'no-unused-vars': 'error'
  }
};

3. 統一配置文件

創建 prettier-eslint 配置：

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'prettier' // 禁用所有與 Prettier 衝突的規則
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        printWidth: 80,
        tabWidth: 2,
        useTabs: false,
        semi: true,
        singleQuote: true,
        trailingComma: 'es5',
        bracketSpacing: true,
        arrowParens: 'avoid'
      }
    ]
  }
};

工作流集成

1. Package.json 腳本

{
  "scripts": {
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "code-check": "npm run lint && npm run format:check",
    "code-fix": "npm run lint:fix && npm run format"
  }
}

2. 自動化腳本

創建 scripts/code-quality.js：

const { execSync } = require('child_process');
const chalk = require('chalk');

function runCommand(command, description) {
  console.log(chalk.blue(`🔍 ${description}...`));
  try {
    execSync(command, { stdio: 'inherit' });
    console.log(chalk.green(`✅ ${description} 完成`));
  } catch (error) {
    console.log(chalk.red(`❌ ${description} 失敗`));
    process.exit(1);
  }
}

// 代碼質量檢查流程
console.log(chalk.yellow('🚀 開始代碼質量檢查...'));

runCommand('npm run lint', 'ESLint 檢查');
runCommand('npm run format:check', 'Prettier 格式檢查');
runCommand('npm run test', '單元測試');

console.log(chalk.green('🎉 所有檢查通過！'));

團隊協作最佳實踐

Git Hooks 集成

1. 使用 Husky

安裝和配置：

# 安裝 husky
npm install --save-dev husky

# 安裝 lint-staged
npm install --save-dev lint-staged

# 初始化 husky
npx husky install

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

配置 package.json：

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "*.{json,css,md}": [
      "prettier --write",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

2. 完整的 Git Hooks 配置

.husky/pre-commit：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo "🔍 Running pre-commit checks..."

# 運行 lint-staged
npx lint-staged

# 運行類型檢查
npm run type-check

# 運行測試
npm run test:staged

echo "✅ Pre-commit checks passed!"

.husky/commit-msg：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# 提交信息規範檢查
npx commitlint --edit $1

CI/CD 集成

1. GitHub Actions 配置

創建 .github/workflows/code-quality.yml：

name: Code Quality Check

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  code-quality:
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        node-version: [16.x, 18.x]
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Run ESLint
      run: npm run lint
    
    - name: Check Prettier formatting
      run: npm run format:check
    
    - name: Run type check
      run: npm run type-check
    
    - name: Run tests
      run: npm run test:coverage
    
    - name: Upload coverage to Codecov
      uses: codecov/codecov-action@v3
      with:
        file: ./coverage/lcov.info

2. GitLab CI 配置

創建 .gitlab-ci.yml：

stages:
  - quality
  - test
  - build

variables:
  NODE_VERSION: "18"

cache:
  paths:
    - node_modules/

before_script:
  - npm ci

lint:
  stage: quality
  script:
    - npm run lint
  only:
    - merge_requests
    - main

format-check:
  stage: quality
  script:
    - npm run format:check
  only:
    - merge_requests
    - main

type-check:
  stage: quality
  script:
    - npm run type-check
  only:
    - merge_requests
    - main

test:
  stage: test
  script:
    - npm run test:coverage
  coverage: '/Lines\s*:\s*(\d+\.\d+)%/'
  artifacts:
    reports:
      coverage_report:
        coverage_format: cobertura
        path: coverage/cobertura-coverage.xml

編輯器配置統一

1. EditorConfig

創建 .editorconfig：

# EditorConfig is awesome: https://EditorConfig.org

root = true

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

[*.{js,jsx,ts,tsx,vue}]
indent_size = 2

[*.{json,yml,yaml}]
indent_size = 2

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

2. VS Code 工作區配置

創建 .vscode/settings.json：

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  
  "typescript.preferences.importModuleSpecifier": "relative",
  "javascript.preferences.importModuleSpecifier": "relative",
  
  "files.associations": {
    "*.css": "css",
    "*.scss": "scss"
  },
  
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  }
}

創建 .vscode/extensions.json：

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig",
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next"
  ]
}

不同項目類型配置方案

React 項目配置

1. 依賴安裝

npm install --save-dev \
  eslint \
  prettier \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-jsx-a11y \
  eslint-config-prettier \
  eslint-plugin-prettier

2. ESLint 配置

.eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
    'prettier'
  ],
  
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  
  plugins: [
    'react',
    'react-hooks',
    '@typescript-eslint',
    'jsx-a11y',
    'prettier'
  ],
  
  rules: {
    'prettier/prettier': 'error',
    
    // React 相關
    'react/react-in-jsx-scope': 'off', // React 17+
    'react/prop-types': 'off', // 使用 TypeScript
    'react/jsx-props-no-spreading': 'warn',
    'react/jsx-key': 'error',
    
    // React Hooks
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    
    // TypeScript
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'warn',
    
    // 可訪問性
    'jsx-a11y/anchor-is-valid': 'warn',
    'jsx-a11y/click-events-have-key-events': 'warn'
  },
  
  settings: {
    react: {
      version: 'detect'
    }
  }
};

3. Prettier 配置

.prettierrc.js：

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
  endOfLine: 'lf'
};

Vue 項目配置

1. 依賴安裝

npm install --save-dev \
  eslint \
  prettier \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  eslint-plugin-vue \
  @vue/eslint-config-typescript \
  @vue/eslint-config-prettier \
  eslint-config-prettier \
  eslint-plugin-prettier

2. ESLint 配置

.eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    'prettier'
  ],
  
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  
  plugins: [
    'vue',
    '@typescript-eslint',
    'prettier'
  ],
  
  rules: {
    'prettier/prettier': 'error',
    
    // Vue 相關
    'vue/multi-word-component-names': 'off',
    'vue/no-v-html': 'warn',
    'vue/require-default-prop': 'error',
    'vue/require-prop-types': 'error',
    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
    
    // TypeScript
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/explicit-function-return-type': 'off'
  }
};

TypeScript 項目配置

1. 完整的 TypeScript 配置

.eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    '@typescript-eslint/recommended-requiring-type-checking',
    'prettier'
  ],
  
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json'
  },
  
  plugins: [
    '@typescript-eslint',
    'prettier'
  ],
  
  rules: {
    'prettier/prettier': 'error',
    
    // TypeScript 嚴格規則
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/explicit-function-return-type': 'warn',
    '@typescript-eslint/no-explicit-any': 'error',
    '@typescript-eslint/no-unsafe-assignment': 'error',
    '@typescript-eslint/no-unsafe-call': 'error',
    '@typescript-eslint/no-unsafe-member-access': 'error',
    '@typescript-eslint/no-unsafe-return': 'error',
    
    // 命名規範
    '@typescript-eslint/naming-convention': [
      'error',
      {
        selector: 'interface',
        format: ['PascalCase'],
        prefix: ['I']
      },
      {
        selector: 'typeAlias',
        format: ['PascalCase']
      },
      {
        selector: 'enum',
        format: ['PascalCase']
      }
    ]
  }
};

Node.js 項目配置

1. 服務端配置

.eslintrc.js：

module.exports = {
  env: {
    node: true,
    es2021: true
  },
  
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:security/recommended',
    'prettier'
  ],
  
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  
  plugins: [
    '@typescript-eslint',
    'security',
    'prettier'
  ],
  
  rules: {
    'prettier/prettier': 'error',
    
    // Node.js 相關
    'no-console': 'off', // 服務端允許 console
    'no-process-exit': 'error',
    
    // 安全相關
    'security/detect-object-injection': 'warn',
    'security/detect-non-literal-fs-filename': 'warn',
    
    // TypeScript
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/explicit-function-return-type': 'warn'
  }
};

常見問題和解決方案

問題 1：ESLint 和 Prettier 規則衝突

症狀：

error  Delete `⏎` prettier/prettier
error  Expected indentation of 2 spaces but found 4 indent

解決方案：

確保安裝了 eslint-config-prettier
在 ESLint 配置中正確使用：

module.exports = {
  extends: [
    'eslint:recommended',
    'prettier' // 必須放在最後
  ]
};

問題 2：編輯器格式化不一致

症狀：團隊成員保存文件時格式化結果不同

解決方案：

統一編輯器配置：

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.configPath": "./.prettierrc.js"
}

添加 EditorConfig：

# .editorconfig
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

問題 3：Git Hooks 不生效

症狀：提交代碼時沒有觸發代碼檢查

解決方案：

檢查 Husky 安裝：

# 重新安裝 husky
npm uninstall husky
npm install --save-dev husky
npx husky install

檢查 hook 文件權限：

chmod +x .husky/pre-commit

驗證 hook 配置：

# 測試 pre-commit hook
npx husky run pre-commit

問題 4：性能問題

症狀：ESLint 檢查速度很慢

解決方案：

使用緩存：

{
  "scripts": {
    "lint": "eslint --cache --cache-location .eslintcache src"
  }
}

忽略不必要的文件：

// .eslintrc.js
module.exports = {
  ignorePatterns: [
    'dist/',
    'build/',
    'node_modules/',
    '*.min.js',
    'coverage/'
  ]
};

使用並行處理：

npm install --save-dev eslint-parallel

問題 5：TypeScript 項目配置問題

症狀：TypeScript 文件 ESLint 檢查報錯

解決方案：

確保正確的解析器配置：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname
  }
};

檢查 tsconfig.json 包含路徑：

{
  "include": [
    "src/**/*",
    "tests/**/*"
  ]
}

故障排除清單

🔍 診斷步驟

檢查依賴版本：

npm ls eslint prettier

驗證配置文件：

npx eslint --print-config src/index.js

測試規則：

npx eslint --no-eslintrc --config .eslintrc.js src/

檢查 Prettier 配置：

npx prettier --check src/

🛠️ 常用調試命令

# 檢查 ESLint 配置
npx eslint --debug src/

# 檢查 Prettier 配置
npx prettier --check --debug-check src/

# 清除緩存
rm -rf .eslintcache
rm -rf node_modules/.cache

# 重新安裝依賴
rm -rf node_modules package-lock.json
npm install

實際案例分享

案例 1：大型電商項目代碼規範實施

項目背景

團隊規模：15+ 前端開發者
技術棧：React + TypeScript + Next.js
代碼庫：50+ 組件，200+ 頁面

實施過程

第一階段：基礎配置

// .eslintrc.js - 初始配置
module.exports = {
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier'
  ],
  
  rules: {
    // 漸進式規則，從警告開始
    '@typescript-eslint/no-explicit-any': 'warn',
    'react/prop-types': 'off',
    'no-console': 'warn'
  }
};

第二階段：嚴格化規則

// 3個月後升級配置
module.exports = {
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    '@typescript-eslint/recommended-requiring-type-checking',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
    'prettier'
  ],
  
  rules: {
    // 升級為錯誤級別
    '@typescript-eslint/no-explicit-any': 'error',
    '@typescript-eslint/explicit-function-return-type': 'warn',
    'react/jsx-key': 'error',
    'jsx-a11y/alt-text': 'error'
  }
};

效果統計：

代碼審查時間減少 60%
Bug 率降低 45%
新人上手時間縮短 40%

案例 2：開源組件庫規範化

項目背景

項目類型：Vue 3 組件庫
用户：1000+ 開發者
組件數量：80+ 個組件

配置策略

嚴格的代碼質量要求：

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    '@vue/typescript/recommended',
    'prettier'
  ],
  
  rules: {
    // 組件庫特殊要求
    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
    'vue/require-default-prop': 'error',
    'vue/require-prop-types': 'error',
    'vue/no-v-html': 'error', // 安全考慮
    
    // 文檔要求
    'jsdoc/require-description': 'error',
    'jsdoc/require-param': 'error',
    'jsdoc/require-returns': 'error'
  }
};

自動化文檔生成：

{
  "scripts": {
    "docs:lint": "eslint docs --ext .js,.vue",
    "docs:format": "prettier --write docs/**/*.{js,vue,md}",
    "build:docs": "npm run docs:lint && npm run docs:format && vitepress build docs"
  }
}

案例 3：微前端架構規範統一

項目背景

架構：微前端（qiankun）
子應用：8個獨立應用
技術棧：React、Vue、Angular 混合

統一配置策略

基礎配置包：

// packages/eslint-config-micro-frontend/index.js
module.exports = {
  extends: [
    'eslint:recommended',
    'prettier'
  ],
  
  env: {
    browser: true,
    es2021: true
  },
  
  rules: {
    // 微前端特殊規則
    'no-undef': 'error', // 防止全局變量污染
    'no-implicit-globals': 'error',
    
    // 命名規範
    'camelcase': ['error', { 
      properties: 'never',
      ignoreGlobals: true 
    }]
  },
  
  overrides: [
    {
      files: ['**/*.react.{js,jsx,ts,tsx}'],
      extends: ['plugin:react/recommended']
    },
    {
      files: ['**/*.vue'],
      extends: ['plugin:vue/vue3-recommended']
    }
  ]
};

子應用配置：

// 子應用 .eslintrc.js
module.exports = {
  extends: [
    '@company/eslint-config-micro-frontend',
    '@company/eslint-config-micro-frontend/react' // 或 vue
  ],
  
  rules: {
    // 子應用特定規則
  }
};

實施效果

量化指標：

配置統一率：100%
代碼風格一致性：95%+
跨應用代碼複用率：提升 30%

團隊反饋：

開發體驗顯著提升
代碼審查效率提高
新人培訓成本降低

最佳實踐總結

🎯 實施建議

漸進式推進

從警告開始，逐步升級為錯誤
先核心規則，再擴展規則
給團隊適應時間

工具鏈集成

編輯器插件統一
Git hooks 強制執行
CI/CD 流程集成

團隊培訓

規範文檔編寫
最佳實踐分享
定期規範回顧

持續優化

收集團隊反饋
定期更新規則
性能監控優化

📊 成功指標

代碼質量：Bug 率下降 > 30%
開發效率：代碼審查時間減少 > 50%
團隊協作：代碼風格統一率 > 95%
維護成本：重構時間減少 > 40%

總結

ESLint + Prettier 的組合為前端項目提供了強大的代碼質量保障。通過合理的配置和工作流集成，可以顯著提升團隊的開發效率和代碼質量。

核心要點回顧

正確處理衝突：使用 eslint-config-prettier 避免規則衝突
漸進式實施：從警告開始，逐步嚴格化規則
工具鏈集成：編輯器、Git hooks、CI/CD 全流程覆蓋
團隊協作：統一配置，規範文檔，持續優化

下一步行動

根據項目類型選擇合適的配置方案
設置 Git hooks 和 CI/CD 集成
團隊培訓和規範推廣
持續監控和優化

通過系統性的代碼規範實施，您的團隊將獲得更高的開發效率、更好的代碼質量和更愉快的協作體驗。

本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。

博客 / 詳情