更漂亮+ 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

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

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

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

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

{
  "singleQuote": true,
  ...
}

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

$ prettier --single-quote ...

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

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

Answer 3

一个cleaner way is：

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

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

plugin:prettier/recommended does three things：

• 启用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 tool，我是用Prettier设置ESLint的。只需安装并运行：

npx eslint-prettier-init

这将解决您的问题。