关于javascript：更漂亮的Airbnb的ESLint配置

Prettier + Airbnb's ESLint config

最近，我开始为编辑器使用Visual Studio Code，并找到了Prettier-JavaScript格式化程序。我认为这是一个很棒的插件，因为它可以帮助我保持代码的美观。

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

这是要抓住的地方。我当前正在运行的Airbnb ESLint配置在Prettier中不能很好地使用。例如，对于JavaScript字符串，Prettier的格式设置为包括双刻度和Airbnb的ESLint(如单刻度)。当我使用Prettier格式化代码时，Airbnb的ESLint就不同意了。

我知道Kent Dodds已经使用ESLint配置完成了一些工作，例如此处的示例。

但是我似乎找不到能够让我使用Prettier的魔力将代码格式化为Airbnb的ESLint的解决方案。

我认为eslint-config-prettier就是为此目的而创建的：https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules

基本上，它会关闭所有与代码样式有关的规则，因为prettier仍然会处理它。

因此，您只需将此配置与任何其他所需的eslint配置(例如eslint-config-airbnb)一起安装，并在eslint配置文件中将其添加到extends字段即可。例如：

1
2
3

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

相关讨论

按照推荐的顺序，有几种方法可以这样做。我希望采用第一种方法，因为您将不必再为将来可能会发生冲突的其他规则而烦恼。

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

1
2
3
4
5
6

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

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

1
2
3
4

{
"singleQuote": true,
...
}

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

1	$ prettier --single-quote ...

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

1
2
3
4
5
6

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

相关讨论

更清洁的方法是：

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

1
2
3
4

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

plugin:prettier/recommended做三件事：

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

1
2
3
4
5
6
7

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

因此，您拥有.eslintrc文件，其属性为"extends":"airbnb"
添加另一个属性，规则，您将在其中编写的规则将覆盖从airbnb

继承的规则

1
2
3
4
5

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

现在这里我只是覆盖两个随机规则，您将需要查找所需的规则：)

这是我用来用Prettier设置ESLint的一些交互式CLI工具。只需安装并运行：

1	npx eslint-prettier-init

这将解决您的问题。