`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/arrow-parens: ["error", "always"]*/
/*eslint-env es6*/

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

incorrect

デフォルトの `"always"` オプションを使用したこのルールに対する **正しい** コードの例

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

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

correct

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/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;

incorrect

`"as-needed"` オプションを使用したこのルールに対する **正しい** コードの例

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

correct

requireForBlockBody

`{ "requireForBlockBody": true }` オプションに対する **不正な** コードの例

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

incorrect

`{ "requireForBlockBody": true }` オプションに対する **正しい** コードの例

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

correct

arrow-parens ​

ルール詳細 ​

オプション ​

always ​

if 文 ​

as-needed ​

requireForBlockBody ​

`arrow-parens`

ルール詳細

オプション

always

if 文

as-needed

requireForBlockBody