no-extra-parens

不允許不必要的括號

🔧

此規則回報的某些問題可透過 --fix 命令列選項自動修正

此規則在 ESLint v8.53.0 中已棄用。請使用 @stylistic/eslint-plugin-js 中對應的規則。

此規則限制括號的使用，僅限於必要時。

規則詳情

此規則始終忽略以下情況下多餘的括號

RegExp 字面值，例如 (/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

相關規則

版本

延伸閱讀

資源