no-extra-parens

禁止不必要的括号

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

¥This rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js.

该规则将括号的使用限制在必要的地方。

¥This rule restricts the use of parentheses to only where they are necessary.

规则详情

¥Rule Details

此规则始终忽略以下内容周围的额外括号：

¥This rule always ignores extra parentheses around the following:

• (/abc/).test(var) 等 RegExp 字面，以避免与 wrap-regex 规则冲突

  ¥RegExp literals such as (/abc/).test(var) to avoid conflicts with the wrap-regex rule

• 立即调用的函数表达式（也称为 IIFE），例如 var x = (function () {})(); 和 var x = (function () {}());，以避免与 wrap-iife 规则冲突

  ¥immediately-invoked function expressions (also known as IIFEs) such as var x = (function () {})(); and var x = (function () {}()); to avoid conflicts with the wrap-iife rule

• 箭头函数参数以避免与 arrow-parens 规则冲突

  ¥arrow function arguments to avoid conflicts with the arrow-parens rule

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

¥Problems reported by this rule can be fixed automatically, except when removing the parentheses would create a new directive, because that could change the semantics of the code. For example, the following script prints object to the console, but if the parentheses around "use strict" were removed, it would print undefined instead.

<!--
// 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" 周围的括号，但仍会将其报告为问题。

¥In this case, the rule will not try to remove the parentheses around "use strict" but will still report them as a problem.

选项

¥Options

此规则有一个字符串选项：

¥This rule has a string option:

• "all"（默认）不允许在任何表达式周围使用不必要的括号

  ¥"all" (default) disallows unnecessary parentheses around any expression

• "functions" 仅在函数表达式周围不允许使用不必要的括号

  ¥"functions" disallows unnecessary parentheses only around function expressions

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

¥This rule has an object option for exceptions to the "all" option:

• "conditionalAssign": false 允许在条件测试表达式中的赋值周围使用额外的括号

  ¥"conditionalAssign": false allows extra parentheses around assignments in conditional test expressions

• "returnAssign": false 允许在 return 语句中的赋值周围使用额外的括号

  ¥"returnAssign": false allows extra parentheses around assignments in return statements

• "nestedBinaryExpressions": false 允许在嵌套二进制表达式中使用额外的括号

  ¥"nestedBinaryExpressions": false allows extra parentheses in nested binary expressions

• "ternaryOperandBinaryExpressions": false 允许在作为三元 ?: 操作数的二元表达式周围使用额外的括号

  ¥"ternaryOperandBinaryExpressions": false allows extra parentheses around binary expressions that are operands of ternary ?:

• "ignoreJSX": "none|all|multi-line|single-line" 允许在无/所有/多行/单行 JSX 组件周围使用额外的括号。默认为 none。

  ¥"ignoreJSX": "none|all|multi-line|single-line" allows extra parentheses around no/all/multi-line/single-line JSX components. Defaults to none.

• "enforceForArrowConditionals": false 允许在作为箭头函数主体的三元表达式周围使用额外的括号

  ¥"enforceForArrowConditionals": false allows extra parentheses around ternary expressions which are the body of an arrow function

• "enforceForSequenceExpressions": false 允许序列表达式周围有额外的括号

  ¥"enforceForSequenceExpressions": false allows extra parentheses around sequence expressions

• "enforceForNewInMemberExpressions": false 允许成员表达式中的 new 表达式周围有额外的括号

  ¥"enforceForNewInMemberExpressions": false allows extra parentheses around new expressions in member expressions

• "enforceForFunctionPrototypeMethods": false 允许在函数表达式上的直接 .call 和 .apply 方法调用周围以及同一上下文中的函数表达式周围使用额外的括号。

  ¥"enforceForFunctionPrototypeMethods": false allows extra parentheses around immediate .call and .apply method calls on function expressions and around function expressions in the same context.

• "allowParensAfterCommentPattern": "any-string-pattern" 允许在与正则表达式匹配的注释前面添加额外的括号。

  ¥"allowParensAfterCommentPattern": "any-string-pattern" allows extra parentheses preceded by a comment that matches a regular expression.

all

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

¥Examples of incorrect code for this rule with the default "all" option:

/* 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" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the default "all" option:

/* 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 } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "all" and { "conditionalAssign": false } options:

/* 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 } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "all" and { "returnAssign": false } options:

/* 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 } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "all" and { "nestedBinaryExpressions": false } options:

/* 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 } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "all" and { "ternaryOperandBinaryExpressions": false } options:

/* 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" } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the all and { "ignoreJSX": "all" } options:

/* 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" } 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the all and { "ignoreJSX": "multi-line" } options:

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

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

¥Examples of correct code for this rule with the all and { "ignoreJSX": "multi-line" } options:

/* 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" } 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the all and { "ignoreJSX": "single-line" } options:

/* 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" } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the all and { "ignoreJSX": "single-line" } options:

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

enforceForArrowConditionals

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

¥Examples of correct code for this rule with the "all" and { "enforceForArrowConditionals": false } options:

/* 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 } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "all" and { "enforceForSequenceExpressions": false } options:

/* 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 } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "all" and { "enforceForNewInMemberExpressions": false } options:

/* 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 } 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "all" and { "enforceForFunctionPrototypeMethods": false } options:

/* 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 构造函数 的字符串模式。

¥To make this rule allow extra parentheses preceded by specific comments, set this option to a string pattern that will be passed to the RegExp constructor.

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

¥Examples of correct code for this rule with the "all" and { "allowParensAfterCommentPattern": "@type" } options:

/* 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" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the "functions" option:

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

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

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

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

¥Examples of correct code for this rule with the "functions" option:

/* 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

相关规则

• arrow-parens
• no-cond-assign
• no-return-assign

版本

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

进阶读物

Operator precedence - JavaScript | MDN
web.nodejs.cn

资源

• 规则源码
• 测试源码