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" 選項時，此規則的不正確程式碼範例：

在線上編輯器中開啟

/*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" 選項時，此規則的正確程式碼範例：

在線上編輯器中開啟

/*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" 選項時，此規則的不正確程式碼範例：

在線上編輯器中開啟

/*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" 選項時，此規則的正確程式碼範例：

在線上編輯器中開啟

/*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 } 選項的不正確程式碼範例：

在線上編輯器中開啟

/*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 } 選項的正確程式碼範例：

在線上編輯器中開啟

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

資源

編輯此頁面