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

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

因此,您只需将此插件与任何其他所需的eslint插件(如eslint-config-airbnb)一起安装,并在您的eslint配置中将其添加到该extends字段中.例如:

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

@ user210757是的，问题和答案不是关于运行更漂亮，而是关于在使用更漂亮以及某些样式模板时避免出现冲突的结果。要将更漂亮的内容与您的编辑器集成，请参阅文档：https://prettier.io/docs/en/editors.html (3认同)

Answer 2

根据推荐顺序,以下是一些方法.我宁愿采用第一种方法,因为您将来不必担心可能会发生冲突的其他规则.

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

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

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

{
  "singleQuote": true,
  ...
}

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

$ prettier --single-quote ...

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

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

Answer 3

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

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

该plugin:prettier/recommended 做三件事：

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

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

Answer 4

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

npx eslint-prettier-init

这将解决您的问题。

Answer 5

因此，您拥有 .eslintrc 文件，其中包含属性"extends": "airbnb" “添加另一个属性”、“规则”，您将在其中写入的规则将覆盖从 airbnb 继承的规则

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

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