no-extra-parens
このルールは、必要な場合にのみ括弧の使用を制限します。
ルールの詳細
このルールは、常に以下の周りの余分な括弧を無視します。
- wrap-regexルールとの競合を避けるため、
(/abc/).test(var)のようなRegExpリテラル - wrap-iifeルールとの競合を避けるため、
var x = (function () {})();やvar x = (function () {}());のような即時実行関数式（IIFEとも呼ばれる） - arrow-parensルールとの競合を避けるためのアロー関数の引数
このルールによって報告された問題は、括弧を削除すると新しいディレクティブが作成され、コードの意味が変わる可能性がある場合を除き、自動的に修正できます。たとえば、次のスクリプトはコンソールにobjectを出力しますが、"use strict"の周りの括弧を削除すると、代わりにundefinedが出力されます。
<!--
// 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"オプションを使用した、このルールに違反するコードの不正な例
/* eslint @stylistic/js/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);
}デフォルトの"all"オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/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;
}conditionalAssign
"all"および{ "conditionalAssign": false }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { "conditionalAssign": false }] */
while ((foo = bar())) {}
if ((foo = bar())) {}
do; while ((foo = bar()))
for (;(a = b););returnAssign
"all"および{ "returnAssign": false }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/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);nestedBinaryExpressions
"all"および{ "nestedBinaryExpressions": false }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { "nestedBinaryExpressions": false }] */
x = a || (b && c);
x = a + (b * c);
x = (a * b) / c;ternaryOperandBinaryExpressions
"all"および{ "ternaryOperandBinaryExpressions": false }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { "ternaryOperandBinaryExpressions": false }] */
(a && b) ? foo : bar;
(a - b > a) ? foo : bar;
foo ? (bar || baz) : qux;
foo ? bar : (baz || qux);ignoreJSX
allおよび{ "ignoreJSX": "all" }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { ignoreJSX: "all" }] */
const ThisComponent = (<div />)
const ThatComponent = (
<div
prop={true}
/>
)allおよび{ "ignoreJSX": "multi-line" }オプションを使用した、このルールに違反するコードの不正な例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { ignoreJSX: "multi-line" }] */
const ThisComponent = (<div />)
const ThatComponent = (<div><p /></div>)allおよび{ "ignoreJSX": "multi-line" }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { ignoreJSX: "multi-line" }] */
const ThisComponent = (
<div>
<p />
</div>
)
const ThatComponent = (
<div
prop={true}
/>
)allおよび{ "ignoreJSX": "single-line" }オプションを使用した、このルールに違反するコードの不正な例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { ignoreJSX: "single-line" }] */
const ThisComponent = (
<div>
<p />
</div>
)
const ThatComponent = (
<div
prop={true}
/>
)allおよび{ "ignoreJSX": "single-line" }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { ignoreJSX: "single-line" }] */
const ThisComponent = (<div />)
const ThatComponent = (<div><p /></div>)enforceForArrowConditionals
"all"および{ "enforceForArrowConditionals": false }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { "enforceForArrowConditionals": false }] */
const b = a => 1 ? 2 : 3;
const d = c => (1 ? 2 : 3);enforceForSequenceExpressions
"all"および{ "enforceForSequenceExpressions": false }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { "enforceForSequenceExpressions": false }] */
(a, b);
if ((val = foo(), val < 10)) {}
while ((val = foo(), val < 10));enforceForNewInMemberExpressions
"all"および{ "enforceForNewInMemberExpressions": false }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { "enforceForNewInMemberExpressions": false }] */
const foo = (new Bar()).baz;
const quux = (new Bar())[baz];
(new Bar()).doSomething();enforceForFunctionPrototypeMethods
"all"および{ "enforceForFunctionPrototypeMethods": false }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/no-extra-parens: ["error", "all", { "enforceForFunctionPrototypeMethods": false }] */
const foo = (function () {}).call();
const bar = (function () {}).apply();
const baz = (function () {}.call());
const quux = (function () {}.apply());allowParensAfterCommentPattern
このルールで特定のコメントの前に余分な括弧を許可するには、このオプションをRegExpコンストラクタに渡される文字列パターンに設定します。
"all"および{ "allowParensAfterCommentPattern": "@type" }オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/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;
}functions
"functions"オプションを使用した、このルールに違反するコードの不正な例
/* eslint @stylistic/js/no-extra-parens: ["error", "functions"] */
((function foo() {}))();
var y = (function () {return 1;});"functions"オプションを使用した、このルールに準拠するコードの正しい例
/* eslint @stylistic/js/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);