arrow-parens

要求箭頭函式引數周圍加上括號

🔧

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

重要

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

深入了解

當箭頭函式只有一個參數時，可以省略括號。在所有其他情況下，參數必須用括號括起來。此規則強制箭頭函式中括號使用的一致性。

規則詳細資訊

此規則強制箭頭函式參數周圍加上括號，無論其元數為何。例如

// Bad
a => {}

// Good
(a) => {}
1
2
3
4
5

遵循此樣式將幫助您找到可能錯誤地包含在條件中的箭頭函式 (=>)，當意圖是像 >= 這樣的比較時。

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

// Good
if (a >= 2) {
}
1
2
3
4
5
6
7

此規則也可以設定為不鼓勵使用不需要的括號

// Bad
(a) => {}

// Good
a => {}
1
2
3
4
5

選項

此規則有一個字串選項和一個物件選項。

字串選項為

"always"（預設）要求在所有情況下引數周圍都加上括號。
"as-needed" 強制在可以省略括號的地方不使用括號。

"as-needed" 選項變體的物件屬性

"requireForBlockBody": true 修改了 as-needed 規則，以便在函式主體位於指令區塊（用大括號括起來）中時要求使用括號。

always

使用預設 "always" 選項時，不正確程式碼範例

在 Playground 中開啟

/*eslint arrow-parens: ["error", "always"]*/

a => {};
a => a;
a => {'\n'};
a.then(foo => {});
a.then(foo => a);
a(foo => { if (true) {} });
1
2
3
4
5
6
7
8

使用預設 "always" 選項時，正確程式碼範例

在 Playground 中開啟

/*eslint arrow-parens: ["error", "always"]*/

() => {};
(a) => {};
(a) => a;
(a) => {'\n'}
a.then((foo) => {});
a.then((foo) => { if (true) {} });
1
2
3
4
5
6
7
8

If 陳述式

此選項的優點之一是它可以防止在條件式中錯誤地使用箭頭函式

var a = 1;
var b = 2;
// ...
if (a => b) {
 console.log('bigger');
} else {
 console.log('smaller');
}
// outputs 'bigger', not smaller as expected
1
2
3
4
5
6
7
8
9

if 陳述式的內容是一個箭頭函式，而不是比較。

如果箭頭函式是有意的，則應將其包在括號中以消除歧義。

var a = 1;
var b = 0;
// ...
if ((a) => b) {
 console.log('truthy value returned');
} else {
 console.log('falsy value returned');
}
// outputs 'truthy value returned'
1
2
3
4
5
6
7
8
9

以下是此行為的另一個範例

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

f 是一個箭頭函式，它將 a 作為引數，並傳回 b ? c: d 的結果。

應該像這樣重寫

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

as-needed

使用 "as-needed" 選項時，不正確程式碼範例

在 Playground 中開啟

/*eslint arrow-parens: ["error", "as-needed"]*/

(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;
1
2
3
4
5
6
7
8
9
10
11

使用 "as-needed" 選項時，正確程式碼範例

在 Playground 中開啟

/*eslint arrow-parens: ["error", "as-needed"]*/

() => {};
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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

requireForBlockBody

使用 { "requireForBlockBody": true } 選項時，不正確程式碼範例

在 Playground 中開啟

/*eslint arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/

(a) => a;
a => {};
a => {'\n'};
a.map((x) => x * x);
a.map(x => {
  return x * x;
});
a.then(foo => {});
1
2
3
4
5
6
7
8
9
10

使用 { "requireForBlockBody": true } 選項時，正確程式碼範例

在 Playground 中開啟

/*eslint arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/

(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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

版本

此規則在 ESLint v1.0.0-rc-1 中引入。

延伸閱讀

GitHub - airbnb/javascript: JavaScript 風格指南
github.com

資源

編輯此頁面