原文链接 www.robinwieruch.de/prettier-es…

对于我个人项目而言，默认设置则是：Prettier + ESLint。Prettier能够自动化的编译为固定的代码格式，而Eslint能够确保代码样式是规范且正确的，下面我将介绍如何将Prettier和Eslint结合使用。

优势

如前所述，虽然Prettier会处理您的代码格式，但ESLint会处理您的代码样式。如果您已设置Prettier，则可以将其配置为在保存文件时格式化文件，这样，您再也不用担心代码格式了。由于Prettier是高度集成化的，你只能做一些小配置。而ESLint并不自动进行执行代码样式修复，而是会警告你代码样式哪里有问题。例如，您可能会从其他文件导入某些内容，但不会使用当前文件中导入的内容。 ESLint会警告您未使用的导入。与Prettier相比，ESLint具有高度可配置性，因为它没有预先配置的规则。一旦安装了ESLint，您就可以自己配置它，或者使用几种预先配置的ESLint配置（例如Airbnb样式指南）中的一种来获得固定代码风格，而无需考虑自己的代码风格。

使用

首先，确保安装了Prettier和ESLint。您可以在每个项目的基础上安装它们，也可以使用npm install -g prettier eslint在全局安装它们。我喜欢全局内安装它们，因为我在每个项目中都使用它们，这样我不需要为每个项目安装它们。但是，如果您以团队形式开展项目，那么安装到独立的项目中也是有意义的。

注意：如果全局安装ESLint一次，则仍需要在项目的命令行上运行eslint --init。它在命令行上为您提供安装提示，以逐个项目逐步执行动态ESLint配置。此外，它还为您的项目提供了ESLint的本地安装。如果您想了解有关ESLint及其配置的更多信息，请浏览此ESLint教程，而无需担心Webpack的部分内容。

其次，为编辑器或IDE安装Prettier和ESLint扩展/插件。例如，在VSCode中，您可以在其扩展中找到Prettier和ESLint。

第三，安装两个负责组合Prettier和ESLint使用的插件：npm install --save-dev eslint-config-prettier eslint-plugin-prettier。前者关闭了可能与Prettier冲突的所有ESLint规则，后者将Prettier规则集成到ESLint规则中。

最后，在ESLint配置中设置Prettier规则。因此，在项目的根目录中创建.eslintrc.json文件，并为其提供以下配置：

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}

现在，您已准备好在项目中使用Prettier和ESLint了，而不必担心任何冲突。 ESLint通过集成由其强制执行的所有规则并删除可能与之冲突的所有规则来了解所有Prettier规则。现在不应该有任何改进代码风格和结构的方法。如果需要从ESLint规则中排除文件夹/文件，可以将它们添加到.eslintignore文件中（例如node_modules / *）。

配置

如前所述，Prettier和ESLint可以在一定程度上进行配置（Prettier的配置选项不多，但ESLint的选项更多）。例如之前在VSCode中设置Prettier的教程向您展示了如何设置Prettier以便在保存文件时进行格式化，并在项目根目录的.prettierrc文件中使用以下配置：

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70,
}

Prettier确保强制执行尾随分号和逗号，仅使用单引号，并将行长度设置为给定的字符数。相比之下，ESLint需要你自定义许多配置，因为它不像Prettier那样高度集成。因此，我们可以使用Airbnb发布的最流行的JavaScript代码样式指南，而不是自己添加所有ESLint规则。您可以使用其所有依赖项来安装它：npx install-peerdeps --dev eslint-config-airbnb。然后，将其集成到.eslintrc.json文件中：

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

Prettier和ESLint的两个配置文件都可以根据您的需要进行调整。如果需要添加规则，可以使用这两个文件。如果您需要禁用来自Airbnb样式指南的规则，则可以在ESLint配置中执行此操作。

上一篇如何在VS Code中集成Prettier(译)

Prettier + ESLint 使用教程(译)

优势

使用

配置