Spec-Zone.ru › ESLint

Функции со стрелками и скобки (arrow-parens)

Требовать скобки вокруг аргументов функции со стрелкой

🔧 Исправимые

Некоторые проблемы, обнаруженные этим правилом, автоматически исправляемы с помощью опции --fix командной строки

Это правило было устаревшим в ESLint v8.53.0. Пожалуйста, используйте соответствующее правило в @stylistic/eslint-plugin-js.

Функции со стрелками могут опускать скобки, когда у них ровно один параметр. Во всех остальных случаях параметры должны быть заключены в скобки. Это правило обеспечивает согласованное использование скобок в функциях со стрелками.

Подробное описание правила

Это правило требует скобок вокруг параметров функций со стрелками независимо от количества параметров. Например:

// Bad
a => {}

// Good
(a) => {}

Следование этому стилю поможет вам найти функции со стрелками (=>) которые могут быть ошибочно включены в условие, когда намерением было сравнение, например >=.

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

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

Правило также можно настроить, чтобы не рекомендовать использование скобок, когда они не требуются:

// Bad
(a) => {}

// Good
a => {}

Параметры

Это правило имеет строковый параметр и объект.

Строковые параметры:

  • "always" (по умолчанию) требует скобок вокруг аргументов во всех случаях.
  • "as-needed" запрещает скобки, когда они могут быть опущены.

Свойства объекта для вариантов параметра "as-needed".

  • "requireForBlockBody": true изменяет правило «по мере необходимости», чтобы требовать скобок, если тело функции находится в блоке инструкций (окружено фигурными скобками).

always

Примеры неправильного кода для этого правила с параметром "always" по умолчанию:

Открыть в Playground
/*eslint arrow-parens: ["error", "always"]*/

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

Примеры правильного кода для этого правила с параметром "always" по умолчанию:

Открыть в Playground
/*eslint arrow-parens: ["error", "always"]*/

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

Условные операторы if

Одно из преимуществ этого параметра заключается в предотвращении неправильного использования функций со стрелками в условных операторах:

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

Содержимое оператора 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'

Вот еще один пример такого поведения:

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

f — это функция со стрелкой, которая принимает a в качестве аргумента и возвращает результат b ? c: d.

Это следует переписать так:

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

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;

Примеры правильного кода для этого правила с параметром "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;

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 => {});

Примеры правильного кода для параметра { "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;

Версия

Это правило было добавлено в ESLint v1.0.0-rc-1.

Дополнительные материалы

GitHub - airbnb/javascript: Руководство по стилю JavaScript

Ресурсы

  • Исходный код правила
  • Исходный код тестов

© OpenJS Foundation and other contributors
Licensed under the MIT License.
https://eslint.org/docs/latest/rules/arrow-parens

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API