CodeWalk

ESLint与Prettier配置与冲突解决

作者：孤独的心 · 2026-05-30 12:55

解释ESLint和Prettier各自的职责范围、如何集成两者、解决格式化规则冲突的最佳实践（eslint-config-prettier / eslint-plugin-prettier）。同时说明ESLint的规则（Rules）、解析器（Parser）、插件（Plugin）三者的关系。

回答

孤独的心

ESLint vs Prettier职责

工具职责典型规则
ESLint代码质量（逻辑错误、最佳实践）no-unused-vars, no-console, eqeqeq
Prettier代码格式（缩进、引号、换行）printWidth, singleQuote, tabWidth

三者关系：

  1. Parser（解析器）：将代码转为AST

    • @typescript-eslint/parser：解析TypeScript
    • @babel/eslint-parser：解析实验性JS语法
    • vue-eslint-parser：解析.vue文件

  2. Plugin（插件）：提供额外的规则集合

    • eslint-plugin-react：React Hooks规则
    • eslint-plugin-vue：Vue模板规则
    • @typescript-eslint/eslint-plugin：TS专属规则

  3. Rules（规则）：具体的检查项

    • "no-unused-vars": "error"
    • "react-hooks/rules-of-hooks": "error"

冲突解决最佳实践

方法1：eslint-config-prettier（推荐） 关闭ESLint中与Prettier冲突的格式化规则：

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'prettier'  // 必须放在最后，覆盖之前的格式化规则
  ]
};

方法2：eslint-plugin-prettier 将Prettier作为ESLint规则运行（不建议单独使用，有性能开销）：

// 不推荐单独使用
plugins: ['prettier'],
rules: {
  'prettier/prettier': 'error'
}

推荐组合：eslint-config-prettier（关闭冲突规则） + 独立运行Prettier（编辑器格式化或lint-staged）

配置示例：

// .eslintrc
{
  "extends": ["next", "prettier"],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

集成工作流：

  1. VSCode配置保存时自动格式化（Prettier）
  2. pre-commit钩子（husky + lint-staged）运行ESLint --fix + Prettier --write
  3. CI流水线中检查ESLint错误