no-extra-parens

禁止不必要的括号

🔧

此规则报告的一些问题可以通过--fix 命令行选项自动修复。

此规则已在 ESLint v8.53.0 中**弃用**。请在@stylistic/eslint-plugin-js中使用对应的规则。

此规则限制括号的使用，仅在必要时才使用。

规则详情

此规则始终忽略以下内容周围的多余括号

正则表达式字面量，例如(/abc/).test(var)，以避免与wrap-regex规则冲突。
立即调用的函数表达式（也称为 IIFE），例如var x = (function () {})();和var x = (function () {}());，以避免与wrap-iife规则冲突。
箭头函数参数，以避免与arrow-parens规则冲突。

此规则报告的问题可以自动修复，除非删除括号会创建新的指令，因为这可能会改变代码的语义。例如，以下脚本将object打印到控制台，但是如果删除"use strict"周围的括号，它将改为打印undefined。

<!--
// this is a script
// -->

("use strict");

function test() {
    console.log(typeof this);
}

test();
1
2
3
4
5
6
7
8
9
10
11

在这种情况下，规则不会尝试删除"use strict"周围的括号，但仍会将其报告为问题。

选项

此规则有一个字符串选项

"all"（默认）禁止任何表达式周围的不必要括号。
"functions"仅禁止函数表达式周围的不必要括号。

此规则有一个对象选项，用于"all"选项的例外情况。

"conditionalAssign": false允许在条件测试表达式中的赋值周围使用额外的括号。
"returnAssign": false允许在return语句中的赋值周围使用额外的括号。
"nestedBinaryExpressions": false允许在嵌套的二元表达式中使用额外的括号。
"ternaryOperandBinaryExpressions": false允许在作为三元?:操作数的二元表达式周围使用额外的括号。
"ignoreJSX": "none|all|multi-line|single-line"允许在没有/所有/多行/单行 JSX 组件周围使用额外的括号。默认为none。
"enforceForArrowConditionals": false允许在作为箭头函数主体的三元表达式周围使用额外的括号。
"enforceForSequenceExpressions": false允许在序列表达式周围使用额外的括号。
"enforceForNewInMemberExpressions": false允许在成员表达式中的new表达式周围使用额外的括号。
"enforceForFunctionPrototypeMethods": false允许在函数表达式上的立即.call和.apply方法调用以及同一上下文中的函数表达式周围使用额外的括号。
"allowParensAfterCommentPattern": "any-string-pattern"允许在由与正则表达式匹配的注释前置的额外括号。

all

使用默认"all"选项的此规则的错误代码示例

在游乐场中打开

/* eslint no-extra-parens: "error" */

a = (b * c);

(a * b) + c;

for (a in (b, c));

for (a in (b));

for (a of (b));

typeof (a);

(Object.prototype.toString.call());

class A {
    [(x)] = 1;
}

class B {
    x = (y + z);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用默认"all"选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: "error" */

(0).toString();

({}.toString.call());

(function(){}) ? a() : b();

(/^a$/).test(x);

for (a of (b, c));

for (a of b);

for (a in b, c);

for (a in b);

class A {
    [x] = 1;
}

class B {
    x = y + z;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

conditionalAssign

使用"all"和{ "conditionalAssign": false }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { "conditionalAssign": false }] */

while ((foo = bar())) {}

if ((foo = bar())) {}

do; while ((foo = bar()))

for (;(a = b););
1
2
3
4
5
6
7
8
9

returnAssign

使用"all"和{ "returnAssign": false }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { "returnAssign": false }] */

function a1(b) {
  return (b = 1);
}

function a2(b) {
  return b ? (c = d) : (c = e);
}

b => (b = 1);

b => b ? (c = d) : (c = e);
1
2
3
4
5
6
7
8
9
10
11
12
13

nestedBinaryExpressions

使用"all"和{ "nestedBinaryExpressions": false }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { "nestedBinaryExpressions": false }] */

x = a || (b && c);
x = a + (b * c);
x = (a * b) / c;
1
2
3
4
5

ternaryOperandBinaryExpressions

使用"all"和{ "ternaryOperandBinaryExpressions": false }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { "ternaryOperandBinaryExpressions": false }] */

(a && b) ? foo : bar;

(a - b > a) ? foo : bar;

foo ? (bar || baz) : qux;

foo ? bar : (baz || qux);
1
2
3
4
5
6
7
8
9

ignoreJSX

使用all和{ "ignoreJSX": "all" }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { ignoreJSX: "all" }] */
const ThisComponent = (<div />)
const ThatComponent = (
    <div
        prop={true}
    />
)
1
2
3
4
5
6
7

使用all和{ "ignoreJSX": "multi-line" }选项的此规则的错误代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { ignoreJSX: "multi-line" }] */
const ThisComponent = (<div />)
const ThatComponent = (<div><p /></div>)
1
2
3

使用all和{ "ignoreJSX": "multi-line" }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { ignoreJSX: "multi-line" }] */
const ThisComponent = (
    <div>
        <p />
    </div>
)
const ThatComponent = (
    <div
        prop={true}
    />
)
1
2
3
4
5
6
7
8
9
10
11

使用all和{ "ignoreJSX": "single-line" }选项的此规则的错误代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { ignoreJSX: "single-line" }] */
const ThisComponent = (
    <div>
        <p />
    </div>
)
const ThatComponent = (
    <div
        prop={true}
    />
)
1
2
3
4
5
6
7
8
9
10
11

使用all和{ "ignoreJSX": "single-line" }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { ignoreJSX: "single-line" }] */
const ThisComponent = (<div />)
const ThatComponent = (<div><p /></div>)
1
2
3

enforceForArrowConditionals

使用"all"和{ "enforceForArrowConditionals": false }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { "enforceForArrowConditionals": false }] */

const b = a => 1 ? 2 : 3;
const d = c => (1 ? 2 : 3);
1
2
3
4

enforceForSequenceExpressions

使用"all"和{ "enforceForSequenceExpressions": false }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { "enforceForSequenceExpressions": false }] */

(a, b);

if ((val = foo(), val < 10)) {}

while ((val = foo(), val < 10));
1
2
3
4
5
6
7

enforceForNewInMemberExpressions

使用"all"和{ "enforceForNewInMemberExpressions": false }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { "enforceForNewInMemberExpressions": false }] */

const foo = (new Bar()).baz;

const quux = (new Bar())[baz];

(new Bar()).doSomething();
1
2
3
4
5
6
7

enforceForFunctionPrototypeMethods

使用"all"和{ "enforceForFunctionPrototypeMethods": false }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { "enforceForFunctionPrototypeMethods": false }] */

const foo = (function () {}).call();

const bar = (function () {}).apply();

const baz = (function () {}.call());

const quux = (function () {}.apply());
1
2
3
4
5
6
7
8
9

allowParensAfterCommentPattern

要使此规则允许由特定注释前置的额外括号，请将此选项设置为将传递给RegExp构造函数的字符串模式。

使用"all"和{ "allowParensAfterCommentPattern": "@type" }选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "all", { "allowParensAfterCommentPattern": "@type" }] */

const span = /**@type {HTMLSpanElement}*/(event.currentTarget);

if (/** @type {Foo | Bar} */(options).baz) console.log('Lint free');

foo(/** @type {Bar} */ (bar), options, {
    name: "name",
    path: "path",
});

if (foo) {
    /** @type {Bar} */
    (bar).prop = false;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

functions

使用"functions"选项的此规则的错误代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "functions"] */

((function foo() {}))();

var y = (function () {return 1;});
1
2
3
4
5

使用"functions"选项的此规则的正确代码示例

在游乐场中打开

/* eslint no-extra-parens: ["error", "functions"] */

(0).toString();

(Object.prototype.toString.call());

({}.toString.call());

(function(){} ? a() : b());

(/^a$/).test(x);

a = (b * c);

(a * b) + c;

typeof (a);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

版本

此规则是在 ESLint v0.1.4 中引入的。

进一步阅读

运算符优先级 - JavaScript | MDN
developer.mozilla.org

资源

编辑此页面

no-extra-parens

规则详情

选项

all

conditionalAssign

returnAssign

nestedBinaryExpressions

ternaryOperandBinaryExpressions

ignoreJSX

enforceForArrowConditionals

enforceForSequenceExpressions

enforceForNewInMemberExpressions

enforceForFunctionPrototypeMethods

allowParensAfterCommentPattern

functions

相关规则

版本

进一步阅读

资源