更漂亮的+Airbnb的ESLint配置

Question

最近，我开始使用Visual Studio Code作为我的编辑器，并发现了更漂亮的- JavaScript格式化程序。我认为这是一个很棒的插件，因为它让我的代码看起来很漂亮。

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

这就是问题所在。我目前正在运行的Airbnb ESLint配置在更漂亮的环境下运行得并不好。例如，对于JavaScript字符串，Prettier的格式设置为包含双刻度，Airbnb的ESLint类似于单刻度。当我使用Prettier格式化代码时，Airbnb的ESLint不同意。

我知道肯特·多兹在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)在.eslintrc中安装eslint-config-prettier并对其进行扩展。这样做会关闭ESLint中的一些与格式相关的规则，这些规则可能会与Prettier冲突：

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

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

{
  "singleQuote": true,
  ...
}

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

$ prettier --single-quote ...

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

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

Answer 3

一个cleaner way is

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

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

The plugin:prettier/recommended does three things

• 启用更漂亮/更漂亮的规则来扩展eslint-

-

• -更漂亮的配置

如果你使用的是react，你也可以添加prettier/react：

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