更漂亮+ Airbnb的ESLint配置

时间:2017-09-13 15:38:05

标签: javascript visual-studio eslint eslint-config-airbnb prettier

最近,我开始在我的编辑器中使用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。

5 个答案:

答案 0 :(得分:31)

我认为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"]
}

答案 1 :(得分:9)

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

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

答案 2 :(得分: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"
  ]
}

答案 3 :(得分:1)

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

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

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

答案 4 :(得分:0)

这里是一些互动的CLI tool,我是用Prettier设置ESLint的。只需安装并运行:

npx eslint-prettier-init

这将解决您的问题。