Prettier + Airbnb 的 ESLint 配置

Question

最近，我开始为我的编辑器使用 Visual Studio Code，并找到了 Prettier - JavaScript 格式化程序。我认为这是一个很棒的插件，因为它可以帮助我保持我的代码看起来不错。

我设置了 Airbnb 的 ESLint 配置，发现它非常有用。

这就是问题所在。我目前正在运行的 Airbnb ESLint 配置与 Prettier 不兼容。例如，对于 JavaScript 字符串，Prettier 被格式化为包含双引号和 Airbnb 的 ESLint，如单引号。当我使用 Prettier 格式化代码时，Airbnb 的 ESLint 不同意。

我知道 Kent Dodds 已经使用 ESLint 配置完成了一些工作，其中包括 example here.

但我似乎找不到一个解决方案，让我可以使用 Prettier 的魔力将我的代码格式化为 Airbnb 的 ESLint。

Answer 1

我认为eslint-config-prettier 就是为此目的而创建的：https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules

基本上它turns off所有与代码样式有关的规则，因为prettier无论如何都会处理它。

因此，您只需将此配置与任何其他所需的 eslint 配置（如 eslint-config-airbnb）一起安装，然后在您的 eslint 配置文件中将其添加到 extends 字段。例如：

{
  "extends": ["airbnb", "prettier"]
}

Answer 2

cleaner way is:

yarn add --dev eslint-plugin-prettier eslint-config-prettier

   // .eslintrc
   {
     "extends": ["airbnb", "plugin:prettier/recommended"]
   }

plugin:prettier/recommendeddoes three things:

• 启用 eslint-plugin-prettier。
• 将 prettier/prettier 规则设置为 "
• 扩展 eslint-config-prettier 配置。

然后，如果您正在响应，您也可以添加prettier/react：

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react"
  ]
}

Answer 3

这是我为使用 Prettier 设置 ESLint 而构建的一个小互动 CLI tool。只需安装并运行：

npx eslint-prettier-init

这将解决您的问题。

Answer 4

所以，你有你的 .eslintrc 文件，属性为"extends": "airbnb" 添加另一个属性、规则，您将在其中写入的规则将覆盖从 airbnb 继承的规则

"extends": "airbnb",
"rules": {
    "eqeqeq": 2,
    "comma-dangle": 1,
}

现在我只是覆盖了两个随机规则，你需要寻找你需要的那个:)

Answer 5

这里有几种方法，按推荐顺序排列。我更喜欢第一种方法，因为您不必为将来可能发生冲突的其他规则而烦恼。

i) 安装 eslint-config-prettier 并在 .eslintrc 中扩展它。这样做会关闭 ESLint 中一些可能与 Prettier 冲突的格式相关规则：

{
  "extends": [
    "airbnb",
    "prettier"
  ]
}

ii) 将"singleQuote": true 添加到.prettierrc 配置文件中：

{
  "singleQuote": true,
  ...
}

iii) 在调用 Prettier 时添加 --single-quote 命令行选项：

$ prettier --single-quote ...

iv) 在您的 .eslintrc 配置文件中关闭 ESLint 的 quotes 规则（以及可能发生冲突的其他规则）：

{
  "rules": {
    "quotes": "off",
    ...
  }
}