Eslint 无额外括号规则不起作用

Question

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

\n

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

\n

所有软件包都应该是最新的。

\n

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

\n

\n

\n

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

\n

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

\n

或者

\n

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

\n

...VSCode 中的错误消失了，一切似乎都工作正常。但在服务时控制台会抛出此错误：

\n

\n

我\xc2\xb4ve尝试过

\n

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

\n

正如控制台所说，但随后该规则被忽略并显示第一个规则破坏错误。

\n

I\xc2\xb4ve 尝试使用数组和对象以多种不同方式定义规则，将其设置为“关闭”等。但要么该规则在 VSCode 中不起作用，要么控制台指出规则定义无效。

\n

这是我的 .eslintrc.js 文件：

\n

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

\n

有什么线索吗？

\n

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