CodeWalk

ESLint 与 Prettier 集成配置与规则冲突解决

作者：屠龙少年 · 2026-05-30 12:55

请说明如何配置 ESLint 和 Prettier 在项目中协同工作，以及如何处理两者之间的规则冲突（如 indent、quotes、semi）。

回答

屠龙少年

ESLint vs Prettier 分工：

  • ESLint：代码质量规则（未使用变量、空判断、潜在 bug）
  • Prettier：代码格式化规则（缩进、引号、分号、换行）

集成配置：

1. 安装依赖：

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier

2. eslint-config-prettier：关闭所有可能与 Prettier 冲突的 ESLint 规则

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',  // 必须放在最后，覆盖前面可能冲突的规则
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',  // 将 Prettier 差异报告为 ESLint 错误
  },
};

3. 或者使用 eslint-plugin-prettier（一体化）：

module.exports = {
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error', {
      singleQuote: true,
      semi: true,
      tabWidth: 2,
      trailingComma: 'all',
      printWidth: 100,
    }],
  },
};

4. .prettierrc 配置：

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "endOfLine": "lf"
}

解决冲突的通用规则：

  • 优先在 .prettierrc 中配置格式（如 singleQuote: true）
  • ESLint 中不配置格式化规则（依赖 eslint-config-prettier 关闭）
  • 使用 eslint --fix 同时修复质量和格式问题
  • VSCode 中配置 editor.formatOnSave: true + editor.codeActionsOnSave: { "source.fixAll.eslint": true }