跳至内容

@stylistic/

no-extra-parens

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

规则详情

此规则始终忽略以下情况下的多余括号

  • 正则表达式字面量,例如 (/abc/).test(var),以避免与 wrap-regex 规则冲突
  • 立即执行函数表达式(也称为 IIFE),例如 var x = (function () {})();var x = (function () {}());,以避免与 wrap-iife 规则冲突
  • 箭头函数参数,以避免与 arrow-parens 规则冲突

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

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

("use strict");

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

test();

在这种情况下,该规则不会尝试移除 "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" 选项时,此规则的不正确代码示例

js
/* eslint @stylistic/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);
}
incorrect

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

js
/* eslint @stylistic/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;
}
correct

conditionalAssign

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

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

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

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

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

for (;(a = b););
correct

returnAssign

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

js
/* eslint @stylistic/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);
correct

nestedBinaryExpressions

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

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

x = a || (b && c);
x = a + (b * c);
x = (a * b) / c;
correct

ternaryOperandBinaryExpressions

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

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

(a && b) ? foo : bar;

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

foo ? (bar || baz) : qux;

foo ? bar : (baz || qux);
correct

ignoreJSX

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

jsx
/* eslint @stylistic/no-extra-parens: ["error", "all", { ignoreJSX: "all" }] */
const ThisComponent = (<div />)
const ThatComponent = (
    <div
        prop={true}
    />
)
correct

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

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

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

jsx
/* eslint @stylistic/no-extra-parens: ["error", "all", { ignoreJSX: "multi-line" }] */
const ThisComponent = (
    <div>
        <p />
    </div>
)
const ThatComponent = (
    <div
        prop={true}
    />
)
correct

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

jsx
/* eslint @stylistic/no-extra-parens: ["error", "all", { ignoreJSX: "single-line" }] */
const ThisComponent = 
(
<div> <p /> </div> ) const ThatComponent =
(
<div prop={true} /> )
incorrect

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

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

enforceForArrowConditionals

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

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

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

enforceForSequenceExpressions

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

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

(a, b);

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

while ((val = foo(), val < 10));
correct

enforceForNewInMemberExpressions

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

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

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

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

(new Bar()).doSomething();
correct

enforceForFunctionPrototypeMethods

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

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

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

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

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

const quux = (function () {}.apply());
correct

allowParensAfterCommentPattern

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

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

js
/* eslint @stylistic/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;
}
correct

functions

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

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

(
(
function foo() {}))();
var y =
(
function () {return 1;});
incorrect

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

js
/* eslint @stylistic/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);
correct

TypeScript 特定

ts/no-extra-parens