`arrow-parens`

アロー関数は、パラメータが1つだけの場合は括弧を省略できます。それ以外のすべての場合、パラメータは括弧で囲む必要があります。このルールは、アロー関数で括弧を一貫して使用することを強制します。

ルールの詳細

このルールは、アリティに関係なく、アロー関数のパラメータを括弧で囲むことを強制します。例えば

/*eslint-env es6*/

// Bad
a => {}

// Good
(a) => {}

このスタイルに従うことで、`>=` などの比較が意図されていた場合に、誤って条件に含まれている可能性のあるアロー関数 (`=>`) を見つけるのに役立ちます。

/*eslint-env es6*/

// Bad
if (a => 2) {
}

// Good
if (a >= 2) {
}

ルールは、括弧が不要な場合に括弧の使用を推奨しないように設定することもできます。

/*eslint-env es6*/

// Bad
(a) => {}

// Good
a => {}

オプション

このルールには、文字列オプションとオブジェクトオプションがあります。

文字列オプションは次のとおりです。

"always" (デフォルト) は、すべての場合で引数を括弧で囲む必要があります。
"as-needed" は、省略できる場合は括弧を使用しないようにします。

`"as-needed"` オプションのバリアントのオブジェクトプロパティ

`"requireForBlockBody": true` は、関数本体が命令ブロック（中括弧で囲まれている）にある場合に括弧を必須とするように、as-needed ルールを変更します。

always

デフォルトの `"always"` オプションでこのルールに違反しているコードの例

/*eslint @stylistic/js/arrow-parens: ["error", "always"]*/
/*eslint-env es6*/

a
 => {};
a
 => a;
a
 => {'\n'};
a.then(foo
 => {});
a.then(foo
 => a);
a(foo
 => { if (true) {} });

誤り

デフォルトの `"always"` オプションでこのルールに準拠しているコードの例

/*eslint @stylistic/js/arrow-parens: ["error", "always"]*/
/*eslint-env es6*/

() => {};
(a) => {};
(a) => a;
(a) => {'\n'}
a.then((foo) => {});
a.then((foo) => { if (true) {} });

正しい

if 文

このオプションの利点の1つは、条件式でアロー関数を誤って使用することを防ぐことです。

/*eslint-env es6*/

var a = 1;
var b = 2;
// ...
if (a => b) {
 console.log('bigger');
} else {
 console.log('smaller');
}
// outputs 'bigger', not smaller as expected

`if` 文の内容は、比較ではなくアロー関数です。

アロー関数が意図的なものである場合、あいまいさをなくすために括弧で囲む必要があります。

/*eslint-env es6*/

var a = 1;
var b = 0;
// ...
if ((a) => b) {
 console.log('truthy value returned');
} else {
 console.log('falsy value returned');
}
// outputs 'truthy value returned'

以下は、この動作の別の例です。

/*eslint-env es6*/

var a = 1, b = 2, c = 3, d = 4;
var f = a => b ? c: d;
// f = ?

`f` は、`a` を引数に取り、`b ? c : d` の結果を返すアロー関数です。

これは次のように書き直す必要があります。

/*eslint-env es6*/

var a = 1, b = 2, c = 3, d = 4;
var f = (a) => b ? c: d;

as-needed

`"as-needed"` オプションでこのルールに違反しているコードの例

/*eslint @stylistic/js/arrow-parens: ["error", "as-needed"]*/
/*eslint-env es6*/

(a
) => {};
(a
) => a;
(a
) => {'\n'};
a.then((foo
) => {});
a.then((foo
) => a);
a((foo
) => { if (true) {} });
const f = /** @type {number} */(a
) => a + a;
const g = /* comment */ (a
) => a + a;
const h = (a
) /* comment */ => a + a;

誤り

`"as-needed"` オプションでこのルールに準拠しているコードの例

/*eslint @stylistic/js/arrow-parens: ["error", "as-needed"]*/
/*eslint-env es6*/

() => {};
a => {};
a => a;
a => {'\n'};
a.then(foo => {});
a.then(foo => { if (true) {} });
(a, b, c) => a;
(a = 10) => a;
([a, b]) => a;
({a, b}) => a;
const f = (/** @type {number} */a) => a + a;
const g = (/* comment */ a) => a + a;
const h = (a /* comment */) => a + a;

正しい

requireForBlockBody

`{ "requireForBlockBody": true }` オプションでこのルールに違反しているコードの例

/*eslint @stylistic/js/arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/
/*eslint-env es6*/

(a
) => a;
a
 => {};
a
 => {'\n'};
a.map((x
) => x * x);
a.map(x
 => {
  return x * x;
});
a.then(foo
 => {});

誤り

`{ "requireForBlockBody": true }` オプションでこのルールに準拠しているコードの例

/*eslint @stylistic/js/arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/
/*eslint-env es6*/

(a) => {};
(a) => {'\n'};
a => ({});
() => {};
a => a;
a.then((foo) => {});
a.then((foo) => { if (true) {} });
a((foo) => { if (true) {} });
(a, b, c) => a;
(a = 10) => a;
([a, b]) => a;
({a, b}) => a;

正しい

arrow-parens ​

ルールの詳細 ​

オプション ​

always ​

if 文 ​

as-needed ​

requireForBlockBody ​