42

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

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

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

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

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

4

5 回答 5

42

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

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

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

{
  "extends": ["airbnb", "prettier"]
}
于 2017-10-01T18:12:34.690 回答
14

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

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",
    ...
  }
}
于 2017-10-25T17:31:03.317 回答
10

更清洁的方法是：

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

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

做三plugin:prettier/recommended 件事：

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

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

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react"
  ]
}
于 2018-10-30T13:28:09.957 回答
3

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

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

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

于 2017-09-13T15:47:57.497 回答
3

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

npx eslint-prettier-init

这将解决您的问题。

于 2019-03-23T09:56:20.267 回答