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

Question

我将 ESLint 与更漂亮的插件和配置一起使用：

// 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

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

Answer 2

目前无法通过配置从更漂亮的角度禁用该特定规则，但要覆盖来自块的eslintextends中的规则，您可以像这样编写规则：

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

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