ESLint - 覆盖来自 eslint-plugin-prettier 的规则答案

【问题标题】：ESLint - Override rules from eslint-plugin-prettierESLint - 覆盖来自 eslint-plugin-prettier 的规则
【发布时间】：2019-09-07 20:46:07
【问题描述】：

我将 ESLint 与更漂亮的 plugin 和 configuration 一起使用：

// eslintrc.js
extends: [
  `eslint:recommended`,
  `plugin:react/recommended`,
  `plugin:@typescript-eslint/recommended`,
  `plugin:prettier/recommended`,
  `prettier/react`,
  `prettier/@typescript-eslint`
]

这很好用，但我想禁用某个更漂亮的规则，即删除“不需要的”括号（删除它们实际上会破坏我的代码）：

// Replace `(state.counter)` with `state.counter` eslint(prettier/prettier)
return <div>{(state.counter)}</div>

正如您从上面的消息中看到的那样，它没有说明究竟是哪个规则导致了这种行为，因此我不知道要覆盖哪个规则。

我已尝试覆盖在eslint-prettier-config 中找到的所有规则，但没有任何效果，我不想继续使用// eslint-disable-next-line prettier/prettier。

【问题讨论】：

标签： eslint prettier

【解决方案1】：

目前无法通过配置从 prettier 禁用该特定规则，但要覆盖 eslint 中来自 extends 块的规则，您可以写成这样的规则：

"rules": {
  "prettier/prettier": "off"
  "@typescript-eslint/no-use-before-define": [
    "error",
    { "functions": false, "variables": true, "classes": true },
  ],
}

或者仅针对特定文件模式覆盖它，您可以在 overrides 块中覆盖它。

"overrides": [
  {
    "files": ["*.html"],
    "rules": {
      "prettier/prettier": "off",
      "@typescript-eslint/unbound-method": "off"
    }
  }
]

在这里，我展示了您正在寻找的配置，以及从嵌套包中继承的规则，以向未来的访问者展示如何做到这一点。

【讨论】：

在overrides 部分，您怎么知道应该输入"prettier/prettier"？为什么不只是prettier，这在任何地方都有记录吗？我正在尝试对 cypress 插件做同样的事情，但不知道到底该放什么

【解决方案2】：

Prettier 不是那么可配置的。你可以试试他们的配置：https://prettier.io/docs/en/configuration.html

把.prettierrc文件，或者eslint配置如下：

{
  rules: {
   'prettier/prettier': [
      'error',
      {
        trailingComma: 'all',
        tabWidth: 2,
        semi: false,
        singleQuote: true,
        bracketSpacing: true,
        eslintIntegration: true,
        printWidth: 120,
      },
    ],
  }
}

【讨论】：

谢谢，为我节省了很多时间