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

Question

我正在使用 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 .

Answer 1

目前无法通过配置从更漂亮的方式禁用该特定规则，但可以覆盖来自 extends 的 eslint 中的规则。块，你可以这样写规则:

"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"
    }
  }
]

在这里，我展示了您正在寻找的配置，以及从嵌套包中继承的规则，以向 future 的访问者展示如何执行此操作。