Конфигурация Airbnb

Конфигурация Airbnb — один из наиболее популярных наборов правил для ESLint, созданный инженерами компании Airbnb. Данный набор определяет единый стиль оформления кода, помогает выявлять потенциальные ошибки и обеспечивает высокую читаемость проектов JavaScript.

Конфигурация включает сотни готовых правил, охватывающих:

форматирование кода;
использование современных возможностей ECMAScript;
работу с функциями;
обработку переменных и областей видимости;
правила именования;
практики написания React-приложений;
предотвращение распространённых ошибок.

Основная цель Airbnb Style Guide заключается в создании предсказуемого, единообразного и поддерживаемого кода независимо от размера проекта и количества разработчиков.

Причины популярности Airbnb

Конфигурация Airbnb получила широкое распространение благодаря нескольким факторам.

Строгие стандарты качества

Многие потенциальные проблемы обнаруживаются ещё до запуска приложения. ESLint предупреждает о небезопасных конструкциях, лишнем коде и нарушениях соглашений.

Единый стиль

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

Поддержка современных стандартов

Конфигурация активно использует возможности ES6+, включая:

const;
let;
стрелочные функции;
шаблонные строки;
деструктуризацию;
модули.

Большое сообщество

Airbnb является фактическим стандартом для множества коммерческих проектов. Большинство разработчиков знакомы с её требованиями.

Установка базовой конфигурации Airbnb

Для установки используются ESLint и пакет конфигурации Airbnb.

npm install --save-dev eslint
npm install --save-dev eslint-config-airbnb-base
npm install --save-dev eslint-plugin-import

После установки создаётся конфигурационный файл.

Для ESLint Flat Config:

import airbnb from 'eslint-config-airbnb-base';

export default [
    airbnb
];

Для старых версий ESLint:

{
    "extends": "airbnb-base"
}

Пакет eslint-config-airbnb-base содержит только правила JavaScript без React.

Установка полной версии Airbnb

При разработке React-приложений используется полный набор правил.

npm install --save-dev eslint
npm install --save-dev eslint-config-airbnb
npm install --save-dev eslint-plugin-import
npm install --save-dev eslint-plugin-react
npm install --save-dev eslint-plugin-react-hooks
npm install --save-dev eslint-plugin-jsx-a11y

Конфигурация:

{
    "extends": "airbnb"
}

В результате подключаются правила:

JavaScript;
React;
React Hooks;
Accessibility (доступность интерфейсов).

Структура конфигурации

Конфигурация Airbnb строится через механизм наследования.

Пример:

export default [
    {
        extends: [
            'airbnb-base'
        ]
    }
];

Собственные правила могут дополнять стандартную конфигурацию.

export default [
    {
        extends: ['airbnb-base'],
        rules: {
            'no-console': 'off'
        }
    }
];

В данном случае все правила Airbnb сохраняются, но запрет использования console отключается.

Предпочтение const перед let

Одно из наиболее известных требований Airbnb связано с использованием неизменяемых переменных.

Нежелательно:

let name = 'Alex';

Предпочтительно:

const name = 'Alex';

Если значение не изменяется, используется const.

Допустимо:

let counter = 0;

counter += 1;

Такой подход уменьшает вероятность случайного изменения данных.

Запрет var

Airbnb полностью запрещает использование var.

Плохо:

var user = 'Admin';

Хорошо:

const user = 'Admin';

или

let user = 'Admin';

Причина заключается в особенностях области видимости и всплытия (hoisting) переменных var.

Использование стрелочных функций

Airbnb активно продвигает стрелочные функции.

Обычная функция:

const numbers = [1, 2, 3];

numbers.map(function (item) {
    return item * 2;
});

Рекомендуемый вариант:

const numbers = [1, 2, 3];

numbers.map((item) => item * 2);

Преимущества:

компактность;
сохранение контекста this;
лучшая читаемость.

Правила для функций

Именованные функции

Предпочтение отдаётся именованным функциям.

Нежелательно:

export default () => {
    return true;
};

Лучше:

export default function isValid() {
    return true;
}

Такой подход упрощает:

отладку;
анализ стека вызовов;
профилирование приложения.

Параметры по умолчанию

Вместо логических операторов рекомендуется использовать значения по умолчанию.

Плохо:

function createUser(name) {
    const userName = name || 'Guest';

    return userName;
}

Хорошо:

function createUser(name = 'Guest') {
    return name;
}

Использование шаблонных строк

Конкатенация строк не приветствуется.

Плохо:

const message = 'Hello, ' + userName;

Хорошо:

const message = `Hello, ${userName}`;

Преимущества:

более читаемый код;
поддержка многострочных строк;
удобная интерполяция значений.

Деструктуризация

Airbnb рекомендует активно использовать деструктуризацию объектов и массивов.

Без деструктуризации:

const firstName = user.firstName;
const lastName = user.lastName;

С деструктуризацией:

const { firstName, lastName } = user;

Для массивов:

const [first, second] = items;

Подобный стиль делает код короче и понятнее.

Работа с объектами

Использование сокращённой записи свойств

Плохо:

const user = {
    name: name,
    age: age
};

Хорошо:

const user = {
    name,
    age
};

Использование сокращённой записи методов

Плохо:

const user = {
    getName: function () {
        return this.name;
    }
};

Хорошо:

const user = {
    getName() {
        return this.name;
    }
};

Правила для массивов

Использование spread-оператора

Airbnb рекомендует использовать оператор расширения.

Плохо:

const clone = array.slice();

Хорошо:

const clone = [...array];

Объединение массивов:

const result = [...array1, ...array2];

Использование методов высшего порядка

Предпочтение отдаётся:

map();
filter();
reduce();
find();
some();
every().

Вместо:

for (let i = 0; i < users.length; i += 1) {
    console.log(users[i]);
}

Часто рекомендуется:

users.forEach((user) => {
    console.log(user);
});

или

const names = users.map((user) => user.name);

Использование import вместо require

Airbnb ориентирована на ES-модули.

Нежелательно:

const fs = require('fs');

Предпочтительно:

import fs from 'fs';

Экспорт:

export default User;

или

export {
    createUser,
    removeUser
};

Правила именования

Переменные

Используется стиль camelCase.

Правильно:

const firstName = 'Alex';

Неправильно:

const first_name = 'Alex';

Константы

Допускается использование UPPER_CASE для глобальных констант.

const MAX_USERS = 100;

Классы

Имена классов оформляются в PascalCase.

class UserService {
}

Правила сравнения

Airbnb требует строгое сравнение.

Плохо:

if (value == 10) {
}

Хорошо:

if (value === 10) {
}

Аналогично:

if (value !== 10) {
}

Это исключает неявное приведение типов.

Использование === и Object.is

Строгое сравнение является стандартом в большинстве случаев.

if (userId === currentUserId) {
}

Для особых случаев возможно использование:

Object.is(value1, value2);

например при работе с:

NaN;
-0;
+0.

Правила отступов

Airbnb использует отступ размером в два пробела.

function getUser() {
  if (isAdmin) {
    return true;
  }

  return false;
}

Несоблюдение данного правила автоматически обнаруживается ESLint.

Использование точек с запятой

Airbnb требует обязательное использование точек с запятой.

Правильно:

const user = 'Alex';

Неправильно:

const user = 'Alex'

Это снижает вероятность проблем, связанных с автоматической вставкой точек с запятой интерпретатором JavaScript.

Правила кавычек

По умолчанию используются одинарные кавычки.

Правильно:

const title = 'Home';

Шаблонные строки используются только при необходимости интерполяции или многострочного текста.

const message = `Hello ${name}`;

Правила переноса строк

Airbnb строго контролирует длину строк.

Пример длинного выражения:

const result = users
    .filter((user) => user.active)
    .map((user) => user.name)
    .sort();

Такой стиль значительно улучшает читаемость цепочек вызовов.

Настройка отдельных правил Airbnb

Любое правило может быть переопределено.

Например:

export default [
    {
        extends: ['airbnb-base'],
        rules: {
            'max-len': ['warn', 120],
            'no-console': 'off',
            'no-alert': 'off'
        }
    }
];

Возможные уровни:

'off'
'warn'
'error'

Расшифровка:

Значение	Описание
off	правило отключено
warn	предупреждение
error	ошибка

Часто отключаемые правила

Несмотря на популярность Airbnb, некоторые правила команды адаптируют под собственные процессы.

Отключение запрета на console:

'no-console': 'off'

Разрешение использования подчёркивания:

'no-underscore-dangle': 'off'

Изменение максимальной длины строки:

'max-len': ['error', 120]

Разрешение изменения параметров функции:

'no-param-reassign': 'off'

Подобные изменения позволяют сохранить преимущества Airbnb, адаптируя её под особенности конкретного проекта.

Совместное использование с Prettier

Airbnb отвечает за качество и стиль кода, однако форматирование часто передаётся Prettier.

Установка:

npm install --save-dev prettier
npm install --save-dev eslint-config-prettier

Конфигурация:

export default [
    {
        extends: [
            'airbnb-base',
            'prettier'
        ]
    }
];

В таком режиме:

ESLint отвечает за качество кода;
Prettier отвечает за форматирование;
конфликты между инструментами устраняются автоматически.

Преимущества использования Airbnb в крупных проектах

Единообразие кодовой базы

Все файлы оформляются одинаково независимо от автора.

Снижение количества ошибок

Многие проблемы обнаруживаются до запуска приложения.

Ускорение ревью кода

Обсуждаются архитектурные решения, а не форматирование.

Упрощение поддержки

Новые разработчики быстрее понимают структуру проекта.

Совместимость с современным JavaScript

Конфигурация ориентирована на актуальные возможности языка и регулярно обновляется вместе с экосистемой ESLint.