Airbnb Style Guide и ESLint: инструкция по подключению

Проекция чисел на женщину.

Что такое Airbnb Style Guide

Airbnb Style Guide — набор рекомендаций по написанию JavaScript-кода, появившийся в 2012 году и ставший одной из наиболее популярных и распространённых код-стайл рекомендаций. Он описывает соглашения по отступам, именованию переменных, кавычкам, длине строк, оформлению функций и другим аспектам, ускоряя чтение и поддержку кода.

Определение: ESLint — это инструмент для статического анализа кода, который помогает находить ошибки и нарушения стиля.

Почему это полезно

Обеспечивает единообразие кода в команде.
Помогает избегать распространённых ошибок и поддерживать лучшие практики.
Позволяет автоматизировать проверку и частично — исправление проблем.

Быстрый план действий

Установить ESLint и конфиг Airbnb.
Инициализировать ESLint через npx eslint –init.
Подключить/настроить .eslintrc.json.
Добавить npm-скрипты для проверки и автоисправления.
Включить ESLint в редакторе (например, VS Code).

Установка ESLint и конфигурации Airbnb

Откройте терминал в корне проекта и выполните:

npm install --save-dev eslint eslint-config-airbnb

Затем инициализируйте ESLint:

npx eslint --init

Во время инициализации ответьте на вопросы. Когда спросят:

? How would you like to use ESLint?

Выберите:

> To check syntax, find problems and enforce code style

Далее, когда спросят про стиль:

? How would you like to define a style for your project?

Выберите:

> Use a popular style guide

И затем в следующем шаге выберите конфигурацию Airbnb:

? Which style guide do you want to follow?
> Airbnb:

Если инсталлятор предложит установить дополнительные пакеты — подтвердите.

После успешной установки в корне проекта появится файл .eslintrc.json.

Пример .eslintrc.json и кастомизация

Файл .eslintrc.json позволяет добавлять и переопределять правила. Пример — ограничение длины строки до 80 символов:

{
  "extends": [
    "plugin:react/recommended",
    "airbnb"
  ],
  "rules": {
    "max-len": ["error", { "code": 80 }]
  }
}

Пояснения:

extends — наборы правил, которые вы подключаете.
rules — индивидуальные переопределения: ключ — имя правила, значение — уровень и параметры.

Советы по кастомизации:

Изменяйте правила постепенно и документируйте отклонения.
Для монорепозиториев используйте общий конфиг в корне и локальные расширения для пакетов.
Если проект не использует React, рассмотрите eslint-config-airbnb-base вместо полной Airbnb-конфигурации.

npm-скрипты для запуска ESLint

Добавьте в package.json скрипты для проверки и автоисправления:

"scripts": {
  "lint": "eslint",
  "lint:fix": "npm run lint -- --fix"
}

Запуск проверки:

npm run lint

Автоисправление доступно командой:

npm run lint:fix

Флаг –fix применяет только те исправления, которые безопасно выполнить автоматически.

Включение ESLint при сохранении в VS Code

Чтобы редактор автоматически запускал исправление при сохранении, сделайте следующее:

Установите расширение ESLint в VS Code (Extensions → ESLint).
Откройте настройки (Файл → Параметры → Настройки или Ctrl+,).
Нажмите «Edit in settings.json» и добавьте (или обновите) эти настройки:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave"
}

Эти параметры включают автоматическое исправление поддерживаемых проблем при сохранении и проверку файлов JavaScript.

Альтернативные подходы

ESLint + Prettier: используйте Prettier для форматирования, а ESLint — для правил качества. Подключите плагин eslint-config-prettier, чтобы избежать конфликтов.
Другие конфиги: airbnb-base (без React), standard, Google. Выберите конфиг, который лучше соответствует требованиям команды.
Custom-first: начните с пустого конфига и добавляйте правила по мере роста проекта.

Когда стиль Airbnb не подходит

Проект очень маленький и команда предпочитает минимальные правила.
Проект использует специфичный стиль, несовместимый с Airbnb, и миграция слишком затратна.
Legacy-кодовая база, где массовые правки приведут к шуму в коммитах — в таком случае применяйте правила постепенно.

Чеклист ролей при внедрении

Разработчик: установить зависимости, поправить локальные ошибки, настроить редактор.
Тимлид: выбрать обязательные правила и исключения, провести ревью больших изменений.
DevOps/CI: добавить проверку в CI, не допускать мержа при ошибках lint.
Технический писатель: обновить документацию по проекту.

Критерии приёмки

CI-пайплайн проходит без ошибок lint.
В кодовой базе нет критических нарушений, требующих немедленной правки.
Все участники команды имеют инструкции по запуску и исправлению ESLint.

Отладка и распространённые проблемы

Проблема: ESLint не видит плагин React.
Решение: Установите peer-зависимости, проверьте package.json и node_modules, перезапустите редактор.
Проблема: конфликт правил между Prettier и ESLint.
Решение: Подключите eslint-config-prettier и eslint-plugin-prettier либо отдайте форматирование Prettier, а проверку — ESLint.
Проблема: слишком много ошибок после первого запуска.
Решение: автоматизируйте исправление для безопасных правил (npm run lint:fix) и разбивайте изменения на несколько PR.

Тесты и критерии проверки (acceptance)

Запустить npm run lint — команда завершилась с кодом 0.
После npm run lint:fix остались только проблемы, требующие ручного вмешательства.
CI не допускает мержа pull request при наличии ошибок lint.

Совместимость и миграция

Если вы мигрируете с другого конфига, сохраните старую конфигурацию для сравнения.
На больших кодовых базах применяйте linting поэтапно: сначала новый код и изменённые файлы, затем полная миграция.

Примеры полезных правил для проекта

max-len — ограничивает длину строки.
no-console — запрет на console.log в продакшн-коде (можно отключить для утилит).
indent, quotes, comma-dangle — правила форматирования.

Decision flow (простое дерево принятия решения)

flowchart TD
  A[Проект новый?] -->|Да| B[Использовать Airbnb или airbnb-base]
  A -->|Нет| C[Есть существующий стиль?]
  C -->|Да| D[Адаптировать Airbnb под существующий стиль]
  C -->|Нет| B
  D --> E[Миграция поэтапно]
  B --> F[Добавить ESLint и CI]
  E --> F

Резюме

Airbnb Style Guide вместе с ESLint — мощный инструмент для поддержания качества и консистентности JavaScript-кода. Начните с установки ESLint и конфигурации Airbnb, настройте .eslintrc.json под нужды проекта, добавьте npm-скрипты и интегрируйте проверку в редактор и CI. При внедрении действуйте поэтапно, включайте команду и документируйте исключения.

Важно: перед массовыми правками оцените объём изменений и используйте автоматические исправления для безопасных правил.