Airbnb Style Guide и ESLint: настройка для JavaScript

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

TL;DR

Airbnb Style Guide — популярный набор правил для написания согласованного JavaScript-кода. Используйте ESLint для интеграции правил Airbnb в проект, настройте правила в .eslintrc.json, добавьте скрипты в package.json и включите автоисправление в VS Code. Ниже — пошаговая инструкция, советы, чеклисты и готовые сниппеты конфигураций.

Коротко о терминах

ESLint — инструмент для статического анализа кода JavaScript. Он ищет проблемы и может автоматически исправлять некоторые из них. Airbnb Style Guide — набор правил форматирования и безопасности, опубликованный Airbnb для JavaScript/React.

Введение

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

Важно: стиль сам по себе не решает архитектуру, но снижает «шум» в код-ревью, когда обсуждают форматирование, а не логику.

Установка ESLint

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

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

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

npx eslint --init

Вы попадёте в интерактивный мастер. Когда вас спросят “How would you like to use ESLint?”, выберите опцию для проверки синтаксиса, поиска проблем и приведения кода к единому стилю. В ответах укажите “Use a popular style guide” и затем выберите “Airbnb” из списка рекомендуемых стайлгайдов. В конце мастер предложит установить дополнительные зависимости — соглашайтесь.

После завершения в корне проекта появится файл .eslintrc.json (или аналогичный), где будет подключён стиль Airbnb.

Пример базовой конфигурации и кастомизация

Airbnb допускает переопределение правил. В .eslintrc.json добавьте или измените блок rules. Пример — ограничение длины строки до 80 символов:

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

Пояснение: “extends” подключает базовые правила; “rules” переопределяет конкретные проверки.

Скрипты в package.json

Добавьте запуск линтера в package.json, чтобы команда была доступна всем разработчикам:

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

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

npm run lint

Запуск с автоматическими исправлениями:

npm run lint:fix

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

Чтобы не запускать скрипт вручную, настройте автоисправление при сохранении.

Откройте вкладку Extensions в VS Code.
Установите расширение ESLint (официальное).
Откройте настройки (File > Preferences > Settings или Ctrl+,).
Найдите “code actions on save” и откройте “Edit in settings.json”.
Добавьте в settings.json следующие параметры:

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

После этого ESLint будет автоматически исправлять доступные проблемы при сохранении файлов.

Чек-лист для команды перед добавлением Airbnb

Убедитесь, что проект совместим с версиями Node и зависимостей, требуемыми плагинами Airbnb.
Добавьте eslint и airbnb в devDependencies.
Создайте .eslintrc.json с extends: [“airbnb”] или с нужными плагинами (react, jsx-a11y и т.д.).
Настройте pre-commit хуки (Husky) для запуска npm run lint:fix.
Обновите CONTRIBUTING.md с инструкциями, как запускать линтер локально.

Рольные чек-листы

Разработчик:
- Запустить npm run lint:fix перед PR.
- Исправить оставшиеся ошибки вручную.
Ревьюер:
- Отключать обсуждение правил только если они мешают логике.
- Просить автоисправления вместо ручных мелких изменений.
Тимлид:
- Утвердить исключения в .eslintrc.json и документировать их.

Когда Airbnb не подходит (контрпримеры)

Лёгкие личные проекты, где строгие правила мешают быстрой итерации.
Проекты с уже устаревшей кодовой базой, где массовые правки по стилю дорогостоящи.
Когда команда предпочитает другой консенсус (например, StandardJS или строгое форматирование Prettier + минимальный ESLint).

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

Prettier + ESLint: Prettier отвечает за форматирование, ESLint — за ошибки и правила качества. Это уменьшает конфликт правил.
StandardJS: ноль конфигурации, быстро подключается, но менее гибок.
Собственный набор правил: полезно для больших организаций с устоявшейся кодовой базой.

Playbook: пошаговая методика добавления в репозиторий

Создайте ветку feature/lint-setup.
Установите зависимости: npm install –save-dev eslint eslint-config-airbnb.
Запустите npx eslint –init и выберите Airbnb.
Настройте .eslintrc.json и добавьте необходимые исключения.
Добавьте скрипты lint и lint:fix в package.json.
Настройте Husky/pre-commit для автоматического запуска lint:fix.
Прогоните npm run lint:fix и вручную исправьте ошибки.
Откройте PR и попросите ревью только логики, не форматирования.

Полезные сниппеты и пресеты (cheat sheet)

Быстрый запуск ESLint для одного файла:

npx eslint src/app.js

Игнорирование правил для строки/файла:

// eslint-disable-next-line no-console
console.log('debug');

/* eslint-disable no-alert */
alert('...');
/* eslint-enable no-alert */

Пример минимального .eslintrc.json для проекта без React:

{
  "extends": ["airbnb-base"],
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": "off",
    "max-len": ["error", { "code": 100 }]
  }
}

Ментальные модели и эвристики

Разделяй ответственность: Prettier — форматирование, ESLint — качество.
Правила как контракт: если команда согласована, правила экономят время на обсуждениях.
Минимизируй исключения: каждый выключенный rule увеличивает разнообразие стиля.

Безопасность и приватность

Линтер сам по себе не отправляет код наружу. Следите за тем, какие внешние плагины вы устанавливаете: установщик может подтянуть пакеты с чужих репозиториев. Предпочтительно фиксировать версии в package-lock.json и проверять зависимости.

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

ESLint запускается без ошибок на CI для мастер-ветки.
npm run lint:fix исправляет все автоисправляемые проблемы.
Проект содержит инструкцию в CONTRIBUTING.md о запуске линтера.

Краткое резюме

Airbnb Style Guide — удобный стартовый набор правил для стандартизации JavaScript-кода. Интеграция через ESLint даёт строгие проверки и автоисправления. Для команд полезно сочетать ESLint с Prettier, настроить pre-commit хуки и автоматическое исправление в редакторе.

Важно: перед глобальными рефакторами по стилю оцените стоимость правок для существующей кодовой базы.

Спасибо за внимание. Если нужно, подготовлю готовый .eslintrc.json под ваш стек (React / Node / TypeScript).