Установка и подключение готовых конфигураций

В крупных проектах настройка ESLint с нуля может потребовать значительного количества времени. Необходимо определить правила оформления кода, стандарты именования, ограничения на использование определённых конструкций языка, параметры работы с модулями, асинхронным кодом и множеством других аспектов. Для решения этой задачи используются готовые конфигурации (shareable configs), представляющие собой наборы заранее подготовленных правил.

Готовая конфигурация позволяет:

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

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

Установка ESLint

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

Установка в проект выполняется как зависимость для разработки:

npm install --save-dev eslint

или

yarn add --dev eslint

или

pnpm add -D eslint

После установки становится доступна команда:

npx eslint

Для проверки версии используется:

npx eslint --version

Пример вывода:

9.8.0

Инициализация конфигурации

После установки можно создать первоначальный конфигурационный файл:

npx eslint --init

Мастер настройки задаёт ряд вопросов:

  • тип проекта;
  • используемые модули;
  • наличие TypeScript;
  • среда выполнения;
  • предпочтительный стиль конфигурации.

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

Для современных версий ESLint обычно используется формат:

// eslint.config.js

export default [];

Либо может быть создан классический вариант:

// .eslintrc.json

{
  "rules": {}
}

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

Главный механизм подключения готовых наборов правил — свойство extends.

Оно позволяет импортировать настройки из другого конфигурационного пакета.

Пример:

{
  "extends": ["eslint:recommended"]
}

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

Принцип работы следующий:

  1. ESLint загружает базовую конфигурацию.
  2. Загружает все конфигурации из extends.
  3. Объединяет правила.
  4. Применяет локальные переопределения.

Приоритет всегда имеют настройки текущего проекта.

Подключение eslint:recommended

Наиболее распространённая встроенная конфигурация:

{
  "extends": ["eslint:recommended"]
}

Она включает правила, позволяющие обнаруживать распространённые ошибки:

  • использование несуществующих переменных;
  • недостижимый код;
  • ошибочные конструкции циклов;
  • дублирование ключей объектов;
  • некорректные сравнения;
  • ошибки в работе с функциями.

Пример:

function calculate() {
    result = 10;
}

Проверка выдаст ошибку:

'result' is not defined

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

Подключение eslint:all

ESLint содержит ещё одну встроенную конфигурацию:

{
  "extends": ["eslint:all"]
}

Она включает практически все доступные правила.

Особенности:

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

Пример:

const message = "Hello";

Даже корректный код может вызывать множество замечаний по оформлению.

По этой причине eslint:all чаще применяется для изучения возможностей линтера, чем для реальной разработки.

Установка внешних конфигураций

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

Сначала пакет устанавливается:

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

Затем подключается:

{
  "extends": ["airbnb"]
}

Название пакета может быть сокращено.

Например:

eslint-config-airbnb

подключается как:

{
  "extends": ["airbnb"]
}

Префикс eslint-config- указывать не требуется.

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

Одной из наиболее известных является конфигурация Airbnb.

Установка:

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

Подключение:

{
  "extends": ["airbnb"]
}

Особенности:

  • строгий стиль написания кода;
  • обязательное использование современных возможностей JavaScript;
  • большое количество правил для React;
  • контроль качества импортов;
  • поддержка доступности интерфейсов.

Пример правила:

if (value == 5) {
    console.log(value);
}

Будет рекомендовано использовать:

if (value === 5) {
    console.log(value);
}

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

Другой популярный вариант — JavaScript Standard Style.

Установка:

npm install --save-dev eslint-config-standard

Дополнительно:

npm install --save-dev \
eslint-plugin-import \
eslint-plugin-n \
eslint-plugin-promise

Подключение:

{
  "extends": ["standard"]
}

Особенности конфигурации:

  • отсутствие точек с запятой;
  • единый стиль отступов;
  • минимализм настроек;
  • высокая популярность в open-source проектах.

Пример:

const name = 'Alex'
console.log(name)

Такой стиль считается корректным согласно Standard.

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

Компания Google также предоставляет собственный набор правил.

Установка:

npm install --save-dev eslint-config-google

Подключение:

{
  "extends": ["google"]
}

Пример:

function getUserName(user) {
  return user.name;
}

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

Подключение нескольких конфигураций

ESLint позволяет использовать несколько конфигураций одновременно.

Пример:

{
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:promise/recommended"
  ]
}

Порядок подключения имеет значение.

Например:

{
  "extends": [
    "eslint:recommended",
    "airbnb"
  ]
}

Если одинаковое правило присутствует в обеих конфигурациях, приоритет получает последняя.

В данном случае настройки Airbnb переопределят значения из eslint:recommended.

Подключение конфигураций плагинов

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

Установка:

npm install --save-dev eslint-plugin-import

Подключение:

{
  "extends": [
    "plugin:import/recommended"
  ]
}

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

Пример обнаруживаемой ошибки:

import User from "./User";
import User2 from "./User";

Линтер сообщит о возможных проблемах с импортами.

Конфигурации для TypeScript

При работе с TypeScript используются специализированные пакеты.

Установка:

npm install --save-dev \
typescript \
typescript-eslint

Для Flat Config:

import tseslint from "typescript-eslint";

export default [
  ...tseslint.configs.recommended
];

Для классической схемы:

{
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ]
}

Подключаемая конфигурация добавляет проверки:

  • типов;
  • интерфейсов;
  • перечислений;
  • дженериков;
  • перегрузок функций.

Пример:

let age: number = "25";

Линтер укажет на несоответствие типов.

Конфигурации для React

React-проекты обычно используют специализированные наборы правил.

Установка:

npm install --save-dev eslint-plugin-react

Подключение:

{
  "extends": [
    "plugin:react/recommended"
  ]
}

Дополнительно часто используется:

{
  "extends": [
    "plugin:react-hooks/recommended"
  ]
}

Проверяются:

  • JSX-конструкции;
  • компоненты;
  • свойства компонентов;
  • правила использования хуков.

Пример ошибки:

if (condition) {
  useEffect(() => {});
}

ESLint сообщит о нарушении правил вызова хуков.

Использование Flat Config

Начиная с современных версий ESLint основным механизмом конфигурации становится Flat Config.

Пример подключения готовой конфигурации:

import js from "@eslint/js";

export default [
  js.configs.recommended
];

Подключение нескольких наборов:

import js from "@eslint/js";
import tseslint from "typescript-eslint";

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended
];

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

  • более простая архитектура;
  • улучшенная производительность;
  • явный импорт зависимостей;
  • предсказуемое объединение настроек;
  • лучшая поддержка ESM.

Переопределение правил после подключения конфигурации

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

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

Пример:

{
  "extends": ["airbnb"],
  "rules": {
    "semi": "off"
  }
}

Либо изменить уровень проверки:

{
  "rules": {
    "no-console": "warn"
  }
}

Варианты уровней:

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

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

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

npx eslint .

Проверка отдельного файла:

npx eslint src/index.js

Вывод может выглядеть следующим образом:

12:5  error  'data' is not defined
18:1  warning  Unexpected console statement

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

npx eslint . --fix

Она исправляет многие нарушения оформления без ручного редактирования.

Типичные ошибки при подключении готовых конфигураций

Конфигурация не найдена

Сообщение:

Failed to load config "airbnb"

Причина:

  • пакет не установлен;
  • ошибка в названии;
  • конфликт версий.

Решение:

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

Не установлен необходимый плагин

Сообщение:

Failed to load plugin 'import'

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

Решение:

npm install --save-dev eslint-plugin-import

Конфликт правил

Пример:

{
  "extends": [
    "standard",
    "airbnb"
  ]
}

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

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

Несовместимость версий

Некоторые конфигурации поддерживают только определённые версии ESLint.

Проверка установленных пакетов:

npm list eslint

При возникновении ошибок необходимо убедиться в совместимости:

  • ESLint;
  • конфигурации;
  • используемых плагинов;
  • парсеров;
  • TypeScript-зависимостей.

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

Оглавление