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

Posted 2023-02-22

【中文标题】ESLint - 覆盖来自 eslint-plugin-prettier 的规则

【英文标题】：ESLint - Override rules from 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。

【参考方案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,
      ,
    ],
  

【讨论】：

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