我的JavaScript项目的默认设置。Prettier + ESLint。Prettier用于自动格式化我的代码，以执行有主见的代码格式，而ESLint则确保我的代码风格保持在一个良好的状态。在这个简短的设置指南中，我想告诉你如何把Prettier和ESLint结合起来，而不浪费任何眼泪。如果你还没有设置好Prettier，请按照前面的教程让它在VSCode中运行。对于其他IDE/编辑器来说，应该没有什么不同，因为只有Prettier在IDE/编辑器中的扩展名会改变。Prettier配置文件本身和 "保存时的格式 "功能在大多数环境中应该是非常相似的。
使用Prettier和ESLint的好处
如前所述，Prettier负责处理你的代码格式，而ESLint负责处理你的代码风格。前者会自动为你做一切。如果你已经设置了Prettier，你可以配置它在保存文件时对其进行格式化。这样，你就再也不需要担心你的代码格式了。由于Prettier的意见很大，你只能做一些小的配置。
后者，ESLint，虽然不是为了自动执行代码风格修复。相反，ESLint对你的代码气味发出警告。例如，可能发生的情况是，你从另一个文件中导入了一些东西，但在你当前的文件中并没有使用导入的东西。ESLint会警告你有一个未使用的导入。与Prettier相比，ESLint是高度可配置的，因为它没有预先配置的规则。一旦你安装了ESLint，你可以自己配置它，或者使用几个预配置的ESLint配置之一（例如Airbnb风格指南），以获得一个有主见的代码风格，而不需要自己思考一个好的代码风格。
如何结合ESLint和Prettier
我们将首先为你的编辑器/IDE安装Prettier和ESLint扩展/插件。例如，在VSCode中，你可以在VS Code Marketplace中找到Prettier和ESLint扩展。对于你所选择的IDE/编辑器来说，这可能是非常类似的。
然后再安装两个软件包，它们负责结合Prettier和ESLint。
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
前者关闭所有可能与Prettier冲突的ESLint规则，后者将Prettier规则整合到ESLint规则中。
最后但并非最不重要的是，在你的ESLint配置中设置Prettier规则。因此，在你项目的根目录下创建一个*.eslintrc*文件，并给它以下配置。
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
},
}
就这样了。你已经准备好在你的项目中使用Prettier和ESLint而不用担心任何冲突。ESLint通过整合所有由它执行的规则和删除所有可能与它冲突的规则，了解你所有的Prettier规则。现在不应该有任何东西妨碍你改进代码风格和结构。如果你需要从你的ESLint规则中排除文件夹/文件，你可以在一个*.eslintignore*文件中添加这些。
奖励：Prettier和ESLint配置
如前所述，Prettier和ESLint可以在一定程度上进行配置（Prettier的配置选项不多，但ESLint的选项反而更多）。例如，前面在VSCode中设置Prettier的教程已经告诉你如何设置Prettier在保存文件时的格式化，并在项目根目录下的*.prettierrc*文件中使用以下配置。
{
"singleQuote": false,
"printWidth": 120,
}
Prettier确保只使用单引号，并且行长被设置为给定的字符数。相比之下，ESLint需要从你这边进行大量的配置，因为它不像Prettier那样有主见。因此，我们可以使用Airbnb发布的最流行的JavaScript代码风格指南，而不是自己添加所有ESLint规则。你可以安装它和它的所有依赖项：
npx install-peerdeps --dev eslint-config-airbnb
之后，在你的*.eslintrc*文件中整合它：
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
}
}
这就是了。Prettier和ESLint的两个配置文件都可以根据你的需要进行调整。如果你需要添加规则，你可以用这两个文件来做。如果你需要禁用一个来自Airbnb风格指南的规则，你可以在ESLint的配置中完成。
