升级Prettier 2.3后ESLint --fix触发prettier换行冲突如何解决？

问题根因 #

你遇到的循环报错本质是ESLint集成的Prettier校验逻辑与你升级的Prettier 2.3版本规则、配置加载链路不一致导致的，可按照以下步骤调整配置完成兼容：

1. 对齐依赖版本 #

首先确保所有关联依赖都适配Prettier 2.3版本，执行以下命令更新依赖：

npm install eslint-plugin-prettier@latest eslint-config-prettier@latest prettier@2.3.x --save-dev

执行完成后运行npx prettier -v确认版本为2.3.x即可，避免调用全局其他版本的Prettier导致不一致。

2. 调整ESLint配置 #

你当前的配置存在两个常见问题：

• extends数组中的prettier必须放在所有扩展的最后一位，才能覆盖前面扩展中自带的格式类规则，避免冲突
• 不建议将Prettier的配置参数直接写在ESLint规则中，最好单独抽离为Prettier专属配置文件，保证两边加载的配置完全一致

修改后的.eslintrc.js参考如下：

module.exports = {
  extends: [
    // 其他所有扩展配置（如eslint:recommended、框架专属规则等）全部放在此处
    'prettier' // 必须放在extends数组的最后一位
  ],
  plugins: [
    // 其他插件
    'prettier'
  ],
  rules: {
    // 其他自定义业务规则
    'prettier/prettier': 'error' // 移除内联的Prettier参数配置
  }
}

3. 新增独立Prettier配置文件 #

在项目根目录新建.prettierrc文件，统一管理所有Prettier格式规则：

{
  "endOfLine": "auto"
  // 其余你需要自定义的Prettier规则（如printWidth、semi、singleQuote等）都放在此处
}

4. 排查残留冲突规则 #

如果调整后仍有报错，检查你ESLint的rules配置中是否手动开启了和换行相关的规则，比如operator-linebreak、implicit-arrow-linebreak、function-paren-newline等，这类规则已经被eslint-config-prettier默认关闭，如果你手动重新开启就会和Prettier 2.3的新赋值换行规则冲突，删除这些规则的自定义配置即可。

5. 验证修复 #

配置全部调整完成后，先删除项目的node_modules文件夹和包管理lock文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新安装依赖。之后执行npx prettier --write .全量格式化一次项目代码，再运行eslint --fix .就不会再出现循环报错的问题。

内容的提问来源于stack exchange，提问作者Matt Stobbs