ESLint 与 Prettier 的冲突终结方案

保存文件时 Prettier 刚格式化完，ESLint 又画满红线，「格式化器与 linter 打架」是新人配环境的头号拦路虎。这篇给出目前公认的最稳配置，讲清每个包为什么存在。

先理解冲突根源：ESLint 的部分规则（如缩进、引号）管「格式」，Prettier 也管格式，两边标准不一致时，满足一个必然违反另一个。

方案的核心是三个包。eslint-config-prettier：关闭 ESLint 里所有和 Prettier 冲突的格式规则，让格式权完全归 Prettier。eslint-plugin-prettier：把 Prettier 的输出作为 ESLint 规则运行，统一在一个命令里跑。

以 ESLint 9 的扁平配置为例：

// eslint.config.js
import js from '@eslint/js'
import prettierConfig from 'eslint-config-prettier' // 必须放最后
import prettierPlugin from 'eslint-plugin-prettier'

export default [
  js.configs.recommended,
  {
    plugins: { prettier: prettierPlugin },
    rules: {
      'prettier/prettier': 'error', // 格式问题走 ESLint 报出
    },
  },
  prettierConfig, // 关键：放在数组最后，覆盖前面的格式规则
]

配置顺序是第一个易错点：eslint-config-prettier 必须最后引入，它的工作方式是「关闭前面的格式规则」，放前面会被后引入的 recommended 重新打开。

.prettierrc 只留真正想定制的：

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

编辑器层两件事：VSCode 装 ESLint 和 Prettier 扩展；settings.json 设定 Prettier 为默认格式化器并开保存格式化：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

这样保存的动作链是：Prettier 先格式化 → ESLint 修可修的代码质量问题 → 剩余问题标红。

方案 B（更简，现在更推荐）：两个工具各司其职。Prettier 只在编辑器和 pre-commit 跑，ESLint 不碰格式（只装 eslint-config-prettier、不装 plugin）。package.json 里分开两个命令，CI 各查各的。少了插件胶水，速度快一点，心智也更清楚。

最后一个高频问题：团队里格式总是「来回横跳」。根因是有人本地有 .prettierrc 之外的自定义（编辑器全局配置）。解法是把 .editorconfig 一起进库（管缩进、换行符），pre-commit 用 lint-staged 强制格式化，个人习惯无法污染仓库。配完这一套，格式争议彻底退出 review 留言区。