vue.js - 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"]

  }
};

有什么线索吗？

标签： vue.jsvisual-studio-codeeslintprettier

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