为什么Prettier和ESLint配置后代码格式还是不一致？

你这问题太典型了，我上周刚帮同事搞完类似的配置，头发都快掉光了。Prettier和ESLint确实容易打架，因为它们都管代码格式，但分工不同：ESLint主要是检查代码质量，比如有没有未使用的变量、语法错误这些；Prettier是专门做代码格式化的，比如引号、分号、换行这种视觉层面的东西。

你现在遇到的“linebreaks”报错，其实是ESLint在用自己的规则校验换行符，而Prettier虽然格式化了，但它不会关闭ESLint里那些和格式冲突的规则。所以哪怕你加了"prettier"到extends里，也还得做更多事。

具体来说，有三个关键点你漏了：

第一，eslint-config-prettier 是必须的，它会关掉所有和Prettier冲突的ESLint规则。你虽然写了 extends 里有 "prettier"，但你得先安装这个包，不然它不起作用。很多人以为 extend 写了就行，其实 npm 包没装等于白搭。

第二，你只用了 prettier 配置块在 package.json 里，但 ESLint 不会自动读取它，除非你在 .eslintrc 里明确告诉 ESLint 使用 Prettier 的配置。或者更好的方式是统一写在一个地方，避免分散。

第三，你的编辑器保存时可能只跑了 Prettier，没让 ESLint --fix 跟上，或者顺序不对，导致格式被反复覆盖。

下面是正确的解决方案步骤：

第一步：安装必要的依赖

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier 用来禁用掉 ESLint 中与 Prettier 冲突的规则，比如 semi、quotes、linebreak-style 等。
eslint-plugin-prettier 是把 Prettier 当成一个 ESLint 规则来运行，这样你执行 ESLint --fix 的时候，就能自动调用 Prettier 格式化。

第二步：调整 .eslintrc 配置（建议换成 .eslintrc.js 或 .eslintrc.json）

如果你还在用 package.json 里的 eslintConfig，可以继续用，但为了清晰，我建议拆出来成单独文件。这里以 .eslintrc.js 为例：

module.exports = {

  // 设置环境

  env: {

    browser: true,

    es2021: true,

  },

  extends: [

    'eslint:recommended',

    'plugin:react-hooks/recommended',

    'plugin:prettier/recommended', // 这个会自动启用 prettier 规则，并整合修复

  ],

  parserOptions: {

    ecmaVersion: 'latest',

    sourceType: 'module',

  },

  plugins: ['react'],

  rules: {

    // 可以在这里覆盖个别规则

    // 比如你想强制使用 ===

    eqeqeq: ['error', 'always'],

  },

};

注意关键点：我们用了 plugin:prettier/recommended，而不是你自己写的 "prettier"。这个 recommended 配置会自动帮你做三件事：
- 启用 eslint-plugin-prettier
- 把 Prettier 的错误作为 ESLint 错误抛出
- 自动应用 eslint-config-prettier 来关闭冲突规则

比你自己手动配要完整得多。

第三步：确保 Prettier 配置能被正确读取

你可以保留 package.json 里的 "prettier" 字段，也可以新建 .prettierrc 文件，内容一样：

{

  "semi": false,

  "singleQuote": true,

  "tabWidth": 2,

  "trailingComma": "es5",

  "lineBreakStyle": "unix"

}

重点来了：你之前报的 linebreak-style 错误，是因为 Windows 默认是 CRLF，而 ESLint 推荐的是 LF（unix）。现在你在 Prettier 配置里加上 "lineBreakStyle": "unix"，然后通过 eslint-plugin-prettier 让 ESLint 尊重这个设置，就不会再报错了。

第四步：编辑器设置要一致

VS Code 用户最容易踩坑的地方就是保存行为。你需要确保保存时先跑 ESLint --fix，或者至少 Prettier 和 ESLint 不互相覆盖。

在 .vscode/settings.json 加上：

{

  "editor.formatOnSave": false,

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

  },

  "eslint.validate": ["javascript", "javascriptreact"]

}

这样做的原理是：不让编辑器默认格式化（避免 Prettier 单独跑），而是让 ESLint 在保存时统一修复所有问题，包括由 eslint-plugin-prettier 触发的 Prettier 格式化。这样流程就串起来了。

第五步：验证是否生效

写一段测试代码：

const greet = (name) => console.log(Hello ${name});

保存后，应该不会出现任何关于分号、引号或换行的警告。如果有，打开命令行跑一下：

npx eslint src/ --fix

看有没有残留错误。如果还有 linebreak-style 报错，说明你 Git 或编辑器还在用 CRLF，可以在项目根目录加个 .gitattributes 文件：

# 统一换行符

* text=auto eol=lf

然后重新克隆或执行：

git config core.autocrlf input

这样从源头解决换行符混乱的问题。

总结一下你原来的问题在哪：
- 缺少 eslint-plugin-prettier，导致 Prettier 没接入 ESLint 流程
- 仅用 "prettier" extend 不够，要用 plugin:prettier/recommended 才完整
- 没统一换行符配置，ESLint 和 Prettier 各自为政
- 编辑器保存逻辑没对齐，格式化顺序乱套

把这些补上，基本就能告别格式战争了。说实话这套配置我调了整整两天才稳下来，现在终于能专心写业务了……

问题出在你的配置还不够彻底，导致ESLint和Prettier之间还是有冲突。别担心，这种情况很常见，优化一下就能搞定。

首先，确保你已经安装了这些依赖：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

然后修改你的 .eslintrc 文件，像这样：

{

  "extends": [

    "eslint:recommended",

    "plugin:react-hooks/recommended",

    "plugin:prettier/recommended"

  ],

  "rules": {

    "prettier/prettier": "error"

  }

}

注意两点：
1. 把 "plugin:prettier/recommended" 加到 extends 里。
2. 在 rules 里明确指定 prettier/prettier 规则为 error。

接下来是 .prettierrc 文件（不要放在 package.json 里），内容如下：

{

  "semi": false,

  "singleQuote": true,

  "endOfLine": "lf"

}

重点来了：加一个 .editorconfig 文件，统一换行符格式：

root = true



[*]

indent_style = space

indent_size = 2

end_of_line = lf

charset = utf-8

trim_trailing_whitespace = true

insert_final_newline = true

最后，确保你的 IDE 或编辑器正确加载了这些配置文件。如果用 VSCode，装个 ESLint 和 Prettier 插件，再设置 "editor.codeActionsOnSave" 和 "editor.formatOnSave"。

这样配完应该就没问题了。记得清理下缓存：npx eslint --cache --cache-location ./.eslintcache . --fix，然后试试保存代码看效果。