Пять плагинов ESLint, которые улучшают качество кода

Вы настроили ESLint. Он обнаруживает неиспользуемые переменные и указывает на отсутствующие точки с запятой. Но в вашей кодовой базе всё ещё накапливаются незаметные баги, несогласованные импорты и проблемы с доступностью, которые проскальзывают через код-ревью. Стандартных правил недостаточно.

ESLint 9 представил flat config (eslint.config.js), заменив устаревший формат .eslintrc. Это изменение упрощает интеграцию плагинов и делает конфигурацию более предсказуемой. Независимо от того, выполнили ли вы миграцию или всё ещё используете старый формат, правильные плагины превращают ESLint из базовой проверки в настоящий контроль качества.

Вот пять плагинов, которые решают реальные проблемы в современных frontend-проектах — без раздувания вашего инструментария.

typescript-eslint: линтинг с учётом типов для TypeScript-проектов

Плагин @typescript-eslint интегрирует систему типов TypeScript в ваш процесс линтинга. В отличие от базовых синтаксических проверок, правила с учётом типов обнаруживают проблемы, требующие понимания типов вашего кода.

Рассмотрим функцию, которая может вернуть null. Линтинг с учётом типов выявляет небезопасные паттерны доступа, которые иначе проявились бы как runtime-ошибки в продакшене. Правила вроде no-floating-promises обнаруживают забытые операторы await, а no-unnecessary-condition идентифицирует мёртвые ветви кода.

Для больших кодовых баз typescript-eslint предлагает Project Service, который улучшает производительность за счёт повторного использования экземпляров программы TypeScript между файлами. Это важно при линтинге тысяч файлов в CI.

В flat config вы импортируете плагин напрямую и распространяете его рекомендуемые конфигурации. Настройка чисто интегрируется с моделью flat-config ESLint 9 при использовании стандартного инструментария typescript-eslint.

eslint-plugin-import: гигиена модулей и организация импортов

eslint-plugin-import предотвращает хаос, который накапливается в операторах импорта в растущей кодовой базе.

Плагин обнаруживает опечатки в путях до выполнения, гарантирует, что именованные импорты соответствуют фактическим экспортам, и выявляет циклические зависимости, вызывающие незаметные баги. Его правило no-extraneous-dependencies предотвращает импорт пакетов, не указанных в package.json — распространённый источник сбоев при развёртывании.

Правило import/order обеспечивает последовательную группировку: сначала внешние пакеты, затем внутренние модули, затем относительные импорты. Эта последовательность делает файлы легко читаемыми, а диффы чище во время код-ревью.

Для команд этот плагин устраняет споры о стиле организации импортов. Настройте его один раз, и автоисправление сделает всё остальное.

eslint-plugin-unicorn: категоричное предотвращение багов

eslint-plugin-unicorn предоставляет более 100 правил, которые обнаруживают незаметные проблемы и обеспечивают современные паттерны JavaScript.

Он выявляет Array.forEach, когда for...of был бы понятнее. Он обнаруживает new Array(5), когда вы имели в виду Array.from({ length: 5 }). Он предотвращает вызовы process.exit(), которые пропускают обработчики очистки.

Плагин подталкивает к современному синтаксису: предпочитая Array.includes() вместо indexOf() !== -1, предлагая String.replaceAll() вместо регулярных выражений с глобальными флагами и выявляя устаревшие методы Number.

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

eslint-plugin-jsx-a11y: линтинг доступности JSX

eslint-plugin-jsx-a11y обнаруживает проблемы доступности в JSX до того, как они достигнут пользователей.

Плагин выявляет изображения без атрибутов alt, кнопки без доступных имён и поля форм без меток. Он обнаруживает использование autoFocus, нарушающее клавиатурную навигацию, и идентифицирует обработчики кликов на неинтерактивных элементах.

Эти правила не гарантируют соответствие WCAG — автоматизированные инструменты обнаруживают примерно 30% проблем доступности. Но они предотвращают наиболее распространённые ошибки и встраивают осведомлённость о доступности в ежедневную разработку.

Для команд, выпускающих пользовательские приложения, этот плагин необходим. Баги доступности затрагивают реальных пользователей и несут юридические последствия во многих юрисдикциях.

@eslint/css: линтинг за пределами JavaScript

ESLint теперь выходит за пределы JavaScript. Плагин @eslint/css привносит статический анализ в таблицы стилей, обнаруживая синтаксические ошибки и обеспечивая соглашения.

Аналогично, html-eslint проверяет структуру HTML, выявляя дублирующиеся ID, отсутствующие атрибуты lang и неправильную вложенность.

Эти плагины важны для проектов с CSS-модулями, HTML-шаблонами или библиотеками компонентов, где качество разметки влияет на рендеринг. Они объединяют ваш процесс линтинга под одним инструментом, а не требуют отдельных валидаторов.

Разделение ответственности: линтинг против форматирования

Одно уточнение: ESLint отвечает за качество кода, а не за форматирование. Позвольте Prettier управлять точками с запятой, кавычками и отступами. Используйте eslint-config-prettier для отключения правил ESLint, конфликтующих с Prettier, затем запускайте оба инструмента отдельно.

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

Заключение

Эти пять плагинов решают различные проблемы: безопасность типов, гигиена импортов, современные паттерны, доступность и кросс-языковой линтинг. Добавляйте их постепенно. Сначала включите рекомендуемые пресеты, затем настраивайте правила по мере того, как ваша команда выявляет точки трения.

Цель — не максимальная строгость, а обнаружение реальных багов до их выпуска.

Часто задаваемые вопросы

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.