arrow-parens

箭头函数参数需要括号

此规则在 ESLint v8.53.0 中已弃用。请在 @stylistic/eslint-plugin-js 中使用 相应的规则。

¥This rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js.

箭头函数只有一个参数时可以省略括号。在所有其他情况下，参数必须用括号括起来。此规则强制在箭头函数中一致地使用括号。

¥Arrow functions can omit parentheses when they have exactly one parameter. In all other cases the parameter(s) must be wrapped in parentheses. This rule enforces the consistent use of parentheses in arrow functions.

规则详情

¥Rule Details

此规则在箭头函数参数周围强制使用括号，而不考虑数量。例如：

¥This rule enforces parentheses around arrow function parameters regardless of arity. For example:

// Bad
a => {}

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

遵循这种风格将帮助你找到箭头函数 (=>)，当以 >= 之类的比较为目的时，这些箭头函数可能会被错误地包含在条件中。

¥Following this style will help you find arrow functions (=>) which may be mistakenly included in a condition when a comparison such as >= was the intent.

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

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

该规则还可以配置为在不需要时阻止使用括号：

¥The rule can also be configured to discourage the use of parens when they are not required:

// Bad
(a) => {}

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

选项

¥Options

此规则有一个字符串选项和一个对象选项。

¥This rule has a string option and an object one.

字符串选项是：

¥String options are:

• "always"（默认）在所有情况下都需要将参数括起来。

  ¥"always" (default) requires parens around arguments in all cases.

• "as-needed" 强制不强制可以省略括号。

  ¥"as-needed" enforces no parens where they can be omitted.

"as-needed" 选项变体的对象属性：

¥Object properties for variants of the "as-needed" option:

• "requireForBlockBody": true 修改按需规则，以便在函数体位于指令块（用大括号括起来）中时需要括号。

  ¥"requireForBlockBody": true modifies the as-needed rule in order to require parens if the function body is in an instructions block (surrounded by braces).

always

使用默认 "always" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the default "always" option:

/*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" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the default "always" option:

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

此选项的好处之一是它可以防止在条件句中错误地使用箭头函数：

¥One of the benefits of this option is that it prevents the incorrect use of arrow functions in conditionals:

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 语句的内容是箭头函数，不是比较。

¥The contents of the if statement is an arrow function, not a comparison.

如果箭头函数是有意的，则应将其封装在括号中以消除歧义。

¥If the arrow function is intentional, it should be wrapped in parens to remove ambiguity.

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

以下是此行为的另一个示例：

¥The following is another example of this behavior:

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

f 是一个箭头函数，它以 a 作为参数并返回 b ? c: d 的结果。

¥f is an arrow function which takes a as an argument and returns the result of b ? c: d.

这应该像这样重写：

¥This should be rewritten like so:

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

as-needed

使用 "as-needed" 选项的此规则的错误代码示例：

¥Examples of incorrect code for this rule with the "as-needed" option:

/*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" 选项的此规则的正确代码示例：

¥Examples of correct code for this rule with the "as-needed" option:

/*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 } 选项的错误代码示例：

¥Examples of incorrect code for the { "requireForBlockBody": true } option:

/*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 } 选项的正确代码示例：

¥Examples of correct code for the { "requireForBlockBody": true } option:

/*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 Style Guide
github.com

资源

• 规则源码
• 测试源码