no-extra-parens

禁止不必要的括号

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

🌐 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)，以避免与 wrap-regex 规则冲突
• 立即调用的函数表达式（也称为 IIFE），例如 var x = (function () {})(); 和 var x = (function () {}());，以避免与 wrap-iife 规则冲突
• 箭头函数参数以避免与 arrow-parens 规则冲突

此规则报告的问题可以自动修复，除非移除括号会创建一个新的指令，因为那可能会改变代码的语义。 例如，下面的脚本会在控制台打印 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"（默认）不允许在任何表达式周围使用不必要的括号。
• "functions" 仅禁止出现在函数表达式周围的不必要的圆括号。

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

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

• "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" 选项时，该规则的错误代码示例：

🌐 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
developer.mozilla.org

资源

• 规则源码
• 测试源码