ESLint

Question

我正在使用更漂亮的 ESLint plugin and configuration:

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

这项工作很好，但我想禁用某个更漂亮的规则，即删除 "unneeded" 括号（删除它们实际上会破坏我的代码）：

// 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 禁用该特定规则，但可以覆盖 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"
    }
  }
]

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

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

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

ESLint - Override rules from eslint-plugin-prettier

prettier