集成 ESLint 和 Prettier

Prettier 和 ESLint 相互补充。我们可以将 Prettier 集成到 ESLint 的工作流程中。这允许你使用 Prettier 格式化你的代码，同时让 ESLint 专注于检查你的代码。因此，要集成它们，首先，我们需要 ESLint 的 eslint-plugin-prettier 插件，以便在 ESLint “之下” 使用 Prettier。然后我们可以像往常一样使用 Prettier 添加格式化代码的规则。

然而，ESLint 包含一些与格式相关的规则，这些规则可能与 Prettier 冲突，例如 arrow-parens 和 space-before-function-paren，当一起使用它们时可能会导致一些问题。为了解决这些冲突问题，我们需要 eslint-config-prettier 配置来关闭与 Prettier 冲突的 ESLint 规则。让我们看看如何在以下步骤中实现这一点：

  1. 通过 npm 安装 eslint-plugin-prettier 和 eslint-config-prettier：

    $ npm i eslint-plugin-prettier --save-dev
$ npm i eslint-config-prettier --save-dev

  2. 在 .eslintrc.json 文件中启用 eslint-plugin-prettier 的插件和规则：

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

  3. 通过在 .eslintrc.json 文件中使用 eslint-config-prettier 扩展 Prettier 的配置来覆盖 ESLint 的规则：

    {
  "extends": ["prettier"]
}

    请注意，值 "prettier" 应该放在 extends 数组的最后，以便 Prettier 的配置可以覆盖 ESLint 的配置。此外，我们可以使用 .eslintrc.js 文件而不是 JSON 文件进行上述配置，因为我们可以在 JavaScript 文件中添加注释，这可能很有用。因此，以下是我们使用 ESLint 下的 Prettier 的配置：

    // .eslintrc.js
module.exports = {
  //...
  'extends': ['prettier'],
  'plugins': ['prettier'],
  'rules': {
    'prettier/prettier': 'error'
  }
}

  4. 在 package.json 文件（或在 prettier.config.js 文件中）中配置 Prettier，以便 Prettier 不会在我们的代码中打印分号并始终使用单引号：

    {
  "scripts": {
    "lint": "eslint --ignore-path .gitignore .",
    "lint-fix": "eslint --fix --ignore-path .gitignore ."
  },
  "prettier": {
    "semi": false,
    "singleQuote": true
  }
}

  5. 在终端上运行 npm run lint-fix 以一次性修复和格式化我们的代码。之后，你可以使用 npx prettier 命令单独再次检查代码，如下所示：

    $ npx prettier --c "src/**/*"

    然后你将在终端上得到以下结果：

    Checking formatting...
All matched files use Prettier code style!

这意味着我们的代码没有格式问题，并且成功地符合 Prettier 代码风格。将这两个工具结合起来以满足我们的需求和偏好是非常酷的，不是吗？但是你仍然只完成了一半——让我们在下一节中将这些配置应用于 Vue 和 Nuxt 应用程序。

你可以在我们的 GitHub 仓库中的 /chapter-14/eslint+prettier/ 找到此集成示例。