Visual Studio Prettier + Airbnb的ESLint配置

luaexgnf  于 2023-10-23  发布在  其他
关注(0)|答案(5)|浏览(115)

最近,我开始使用Visual Studio Code作为我的编辑器,并找到了Prettier - JavaScript格式化程序。我认为这是一个伟大的插件,因为它帮助我保持我的代码看起来不错。
我设置了Airbnb的ESLint配置,发现它非常有用。
有个问题我目前运行的Airbnb ESLint配置不适合Prettier。例如,对于JavaScript字符串,Prettier被格式化为包括双刻度和Airbnb的ESLint,如单刻度。当我使用Prettier格式化代码时,Airbnb的ESLint不同意。
我知道肯特多兹已经做了一些工作与ESLint插件,其中包括example here.
但我似乎找不到一个解决方案,让我使用Prettier的魔力将代码格式化为Airbnb的ESLint。

baubqpgj

baubqpgj1#

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

fhg3lkii2#

这里有几种方法来做到这一点,按照推荐的顺序。我更喜欢第一种方法,因为你永远不必为将来可能发生冲突的其他规则而烦恼。

1.使用eslint-config-prettier

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

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

2.修改Prettier的配置

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

{
  "singleQuote": true,
  ...
}

3.更漂亮的CLI配置

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

$ prettier --single-quote ...

4.修改ESLint配置

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

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

bq9c1y663#

一个更简单的方法是:
yarn add --dev eslint-plugin-prettier eslint-config-prettier

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

plugin:prettier/recommended做三件事:

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

然后如果你在react上,你也可以添加prettier/react

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

avkwfej44#

这是一个小的交互式CLI tool我建立设置ESLint与Prettier。安装并运行:

npx eslint-prettier-init

这将解决你的问题。

bwleehnv

bwleehnv5#

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

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

现在在这里,我只是随机选择两个规则,你需要寻找你需要的一个:)

相关问题