在前端项目中，统一的代码风格是很重要的。eslint-plugin-prettier 可以帮助我们自动化地格式化代码，并让各位开发者使用不同的编辑器时仍能保持代码格式的一致性。但是，在使用 eslint-plugin-prettier 时，有时会遇到代码格式没有改变的问题。本文将介绍这个问题出现的原因，并提供解决方案。
1. 问题原因
eslint-plugin-prettier 和 prettier 之间存在冲突。如果 prettier 的规则与 eslint 的规则相冲突，那么 eslint-plugin-prettier 就无法正确地格式化代码。该插件只能修复 ESLint 中可自动修复的问题，而不会覆盖 Prettier 中的规则。
举个例子，如果 ESLint 规则和 Prettier 规则中针对缩进的配置不一致，则在运行 eslint --fix 命令时，eslint-plugin-prettier 将无法正确地格式化代码。这是因为 eslint-plugin-prettier 是通过 ESLint 规则来对代码进行格式化的，所以如果 ESLint 规则与 Prettier 规则冲突，则无法得到正确的结果。
2. 解决方案
要解决这个问题，可以选择以下两种方法：
2.1. 方法一：禁用 ESLint 中与 Prettier 冲突的规则
可以在 .eslintrc.* 配置文件中禁用 ESLint 中与 Prettier 冲突的规则，例如下面的代码：
-
---------- ---------------------- -------------------------------
-------- -
------- ------
---------------- ------
--------- ------
-------------------- -------
-
-在上面的例子中，我们禁用了 semi、no-extra-semi 和 quotes 这三个 ESLint 规则，因为它们与 Prettier 规则中有所冲突。同时，我们开启了 prettier/prettier 规则，并将其设置为 error，这样如果代码格式不符合 Prettier 规则，就会提示错误。
2.2. 方法二：使用 eslint-config-prettier
eslint-config-prettier 可以让你自动禁用所有与 Prettier 冲突的 ESLint 规则。只需在项目中安装该包并在 .eslintrc.* 文件的 extends 中引入，即可让 ESLint 忽略与 Prettier 冲突的规则，例如下面的代码：
- ---------- ---------------------- ------------------------------ ----------- -
3. 结论
在项目中，我们应该选择一种方法来解决 ESLint 和 Prettier 的规则冲突，以确保代码的格式化和一致性。在两种方法中，自己禁用冲突规则或使用 eslint-config-prettier 都是很好的选择。
最后，为了避免上述问题，我们需要更加注意配置 ESLint 和 Prettier 规则时的冲突问题，尽量让它们之间的配置保持一致。
参考文献：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672868ce2e7021665e201aa9