Javascript Prettier + Airbnb 的 ESLint 配置

Prettier + Airbnb's ESLint config

提问by Jiovan Melendez

Recently, I've started using Visual Studio Code for my editor and found the Prettier - JavaScript formatter. I think it's a great plugin because it helps me keep my code looking nice.

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

I set up Airbnb's ESLint config and have found that to be super helpful.

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

Here's the catch. The Airbnb ESLint config I'm currently running doesn't play nice with Prettier. For example, for JavaScript string, Prettier is formatted to include double ticks and Airbnb's ESLint like single ticks. When I format the code using Prettier, then Airbnb's ESLint doesn't agree.

这是问题所在。我目前运行的 Airbnb ESLint 配置与 Prettier 不兼容。例如，对于 JavaScript 字符串，Prettier 被格式化为包含双刻度和 Airbnb 的 ESLint，就像单刻度一样。当我使用 Prettier 格式化代码时，Airbnb 的 ESLint 不同意。

I know Kent Dodds has done some work with ESLint configs, among others, example here.

我知道 Kent Dodds 已经使用 ESLint 配置完成了一些工作，其中包括这里的示例。

But I can't seem to find a solution that lets me use the magic of Prettier to format my code to Airbnb's ESLint.

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

回答by timetowonder

I think eslint-config-prettierwas created just for this purpose: https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules

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

Basically it turns offall rules that have to do with code styling because prettierwill take care of it anyway.

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

So you just install this config along with any other desired eslint config (like eslint-config-airbnb) and in your eslint configuration file you just add it to the extendsfield. For example:

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

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

回答by Yangshun Tay

Here are a few ways to do it, in order of recommendation. I would prefer the first approach as you won't ever have to bother with other rules that might conflict in future.

这里有几种方法可以做到，按推荐顺序。我更喜欢第一种方法，因为您不必担心将来可能会发生冲突的其他规则。

i) Install eslint-config-prettierand extend from it in .eslintrc. Doing this turns off some of the formatting-related rules within ESLint that might conflict with Prettier:

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

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

ii) Adding "singleQuote": trueto the .prettierrcconfig file:

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

{
  "singleQuote": true,
  ...
}

iii) Adding a --single-quotecommand line option when you invoke Prettier:

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

$ prettier --single-quote ...

iv) Turn off ESLint's quotesrule within your .eslintrcconfig file (and potentially others that might conflict):

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

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

回答by kyw

A cleaner way is:

一个更清洁的方式是：

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

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

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

The plugin:prettier/recommendeddoes three things:

在plugin:prettier/recommended做了三两件事：

• Enables eslint-plugin-prettier.
• Sets the prettier/prettier rule to "
• Extends the eslint-config-prettier configuration.

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

And then if you are on react, you could add prettier/reacttoo:

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

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

回答by Fabio Lolli

So, you have your .eslintrc file, with the property "extends": "airbnb"Add another property, rules, and the rules that you will write in there will overwrite the ones inherited from airbnb

所以，你有你的 .eslintrc 文件，带有属性"extends": "airbnb"Add another property, rules，你将在那里写的规则将覆盖从 airbnb 继承的规则

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

Now here I'm just overwriting two random rules, you will need to look for the one you need :)

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

回答by Philip Sch?nholzer

Here is a little interactive CLI toolI built to setup ESLint with Prettier. Just install it and run:

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

npx eslint-prettier-init

Which will resolve your issue.

这将解决您的问题。