Eslint no-extra-parens 规则不起作用

Question

我有一个带有 ESLint 和更漂亮配置的 vue 项目，如下所示：

"@typescript-eslint/eslint-plugin": "^4.26.1",
"@typescript-eslint/parser": "^4.26.1",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"eslint": "^7.28.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.9.0",
"prettier": "^2.3.1",

所有包都应该是最新的。

我在 VSCode 和控制台中收到此错误，我想取消它，因为我想允许这样的括号以便更好地阅读：

据我所知，这就是 no-extra-parens 规则的用途，但我无法让它发挥作用。文档 (https://eslint.org/docs/rules/no-extra-parens) 指出它有一个对象选项，对此规则进行了多项调整。例如，如果我尝试以下任一选项：

"no-extra-parens": "0",

或

"no-extra-parens" :{
            "returnAssign": false,
            "nestedBinaryExpressions": false,
            "ignoreJSX": "none|all|multi-line|single-line",
            "enforceForArrowConditionals": false,
            "enforceForSequenceExpressions": false,
            "enforceForNewInMemberExpressions": false,
            "enforceForFunctionPrototypeMethods": false
        },

...VSCode 中的错误消失了，一切似乎都正常。但是在服务控制台抛出这个错误：

我试过

"no-extra-parens": 0,

如控制台所说，但随后规则将被忽略并显示第一个规则中断错误。

我尝试用数组和对象以多种不同方式定义规则，将其设置为“关闭”等。但是规则在 VSCode 中不起作用，或者控制台状态规则定义无效。

这是我的 .eslintrc.js 文件：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint"
  ],
  parserOptions: {
        ecmaVersion: 2020,
        ecmaFeatures: {
            "jsx": false
        },
  },
  rules: {      
        "no-extra-parens": 0,               
    "no-console": ["warn", { allow: ["warn", "error"] }],
        "no-debugger": "warn",   
        "curly": "error", 
    "quotes": [
      "error",
      "single"
        ],
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/no-non-null-assertion": "off",      
        "@typescript-eslint/no-inferrable-types": "off",
        "@typescript-eslint/no-use-before-define" : "off",
        "@typescript-eslint/consistent-type-assertions" : "off",
    "@typescript-eslint/no-empty-function": "warn",     
        "@typescript-eslint/interface-name-prefix": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/no-var-requires" : "off",
        "@typescript-eslint/no-extra-parens": ["error"]

  }
};

有线索吗？

Answer 1

ESLint 使用 @typescript-eslint/no-extra-parens 而不需要 no-extra-parens，@typescript-eslint/* 应该聚合具有相同名称的 * 规则，并添加特定于 TypeScript 的功能.

影响这段代码的是 Prettier，在不禁用 Prettier 的情况下更改 ESLint 规则不会改变它的工作方式。

这段代码中括号的使用是多余的，as any as ...是TypeScript中的常见构造，可以不带括号读取和处理：

const foo = bar as any as Foo;

在这种情况下可以避免双重 as：

const foo: Foo = bar as any;

当类型断言用作表达式的一部分时，括号是必需的，在这种情况下，它们将由 Prettier 保留：

(bar as any as Foo).baz()

Prettier 提供了一种一致的方式来格式化代码，几乎没有可配置性，这就是它的目的，不应期望针对特定样式进行微调。

如果按原样格式化代码很重要，并且设置通过 ESLint 使用 Prettier，则可以在需要时禁用它：

// eslint-disable-next-line prettier/prettier

Eslint no-extra-parens 规则不起作用

Eslint no-extra-parens rule does not work

eslint

vue.js

visual-studio-code

prettier