Prettier + Airbnb 的 ESLint 配置

Question

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

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

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

我知道 Kent Dodds 已经用 ESLint 配置做了一些工作，其中包括这里的例子。

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

Answer 1

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

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

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

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

Answer 2

这里有几种方法可以做到，按推荐顺序。 我更喜欢第一种方法，因为您不必担心将来可能会发生冲突的其他规则。

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",
    ...
  }
}

Answer 3

更清洁的方法是：

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

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

plugin:prettier/recommended 做了三件事：

• 启用 eslint-plugin-prettier。
• 将更漂亮/更漂亮的规则设置为“
• 扩展 eslint-config-prettier 配置。

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

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

Answer 4

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

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

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

Answer 5

这是我构建的一个小的交互式CLI 工具，用于使用 Prettier 设置 ESLint。 只需安装并运行：

npx eslint-prettier-init

这将解决您的问题。