在对前端代码进行格式化的过程中，使用 prettier 可以帮助开发者更好的规范代码。然而，如果我们的代码中存在 ESLint 规则，使用 prettier 进行格式化时会出现 ESLint 规则和 prettier 规则的冲突，造成格式化错误。那么，如何避免这种冲突呢？
@the-/eslint-config-prettier 这个 npm 包可以为你的代码设定一个用于避免 prettier 和 ESLint 规则冲突的配置，并且这个配置也符合 prettier 的规则。本文将会介绍如何使用 @the-/eslint-config-prettier 进行前端开发，并且会提供示例代码供读者参考。
安装 @the-/eslint-config-prettier
@the-/eslint-config-prettier 这个 npm 包是一个针对 ESLint 和 prettier 进行整合使用的配置包，可以让 prettier 和 ESLint 规则互不干扰，实现更加规范的代码格式化。
你需要在你的项目中先安装 ESLint 和 Prettier：
npm install --save-dev eslint prettier
接下来再安装 @the-/eslint-config-prettier：
npm install --save-dev @the-/eslint-config-prettier
特别提醒：安装好@the-/eslint-config-prettier 后请务必将其置于 ESLint 配置的前面，以确保它优先读取。
配置文件
在你的 ESLint 的配置文件中，引入 @the-/eslint-config-prettier 即可，例如：
-- -------------------- ---- -------
-------------- - -
-------- ---------------------------------
------ -
-- -------
-- ----------------------------------------
-------------------- --------
--
-------- -------------
-值得注意的是，你需要启用 prettier 插件。如果你还不了解 eslint 的配置，请先学习 ESLint 的基础使用。
示例
在代码中，如果 prettier 和 ESLint 的规则发生冲突，@the-/eslint-config-prettier 会优先采用 prettier 的规则，如下：
const foo = ()=>{
console.log('hello world');
}在使用 prettier 进行格式化后，这里的代码变成：
const foo = () => {
console.log('hello world')
}如果你在 .eslintrc 中设置了如下规则：
{
"rules": {
"semi": [2, "always"]
}
}如此改写后，执行 npm run eslint 时会强制进行分号的检查并且可能会出现分号错误提示，格式化后如下：
const foo = () => {
console.log('hello world');
};如上所示，在只使用 Prettier 时，句末必须是分号，但却违反了 ESLint 的规则。 在使用 @the-/eslint-config-prettier 后，代码会以 prettier 规则为准，去除分号。
总结
@the-/eslint-config-prettier 这个 npm 包有效地解决了 Prettier 和 ESLint 规则冲突的问题。在开发中，它能让我们避免一些错误，并且提高代码规范性。 这个 npm 包非常简单易用，通过本文的讲解和示例代码，相信大家都可以快速上手使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/191074