ESLint: статический анализ JavaScript

Находите и исправляйте ошибки до запуска кода. Стандарт для профессиональной JavaScript-разработки.

Что такое ESLint?

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

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

  • Стиль кодирования
  • Потенциальные ошибки
  • Проблемы с архитектурой
  • Неиспользуемый код
  • Сложность функций

Зачем нужен ESLint?

Коротко

Предотвращает ошибки

Поиск чего-нибудь типичного, например, необъявленные переменные, неиспользуемые импорты, мертвый (ненужный) код.

Формирует единый стиль

Гарантирует, что вся команда пишет код в одном стиле, независимо от предпочтений разработчиков.

Повышает качество

Помогает избегать антипаттернов и писать поддерживаемый код.

Экономит время

Автоматически исправляет многие типичные проблемы, избавляя от рутины - мелкие опечатки, неиспользуемые переменные, перевод функций в современный стандарт (использование стрелочных функций).

А теперь копнем глубже!

Подробно

Когда над проектом работает несколько человек, их кодовый стиль неизбежно отличается. Один ставит точки с запятой, другой — нет; кто-то предпочитает двойные кавычки, кто-то — одинарные. Разработчики по-разному могут называть переменные, следовать разным принципам программирования. Даже если удаётся договориться о базовых правилах и стандартах, мелких расхождений избежать не получится — со временем код всё равно станет трудночитаемым и непоследовательным.

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

ESlint имеет как встроенные правила, так и позволяет создавать собственные. Так, если зайти на ресурс npmjs и написать eslint rules, мы сможем найти популярные правила сообщества, правила от крупных компаний.

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

Быстрый старт

Установка

Для того, чтобы установить ESLint, следуйте простым шагам:

  1. Проверка зависимостей

    Пакетный менеджер

    Убедитесь, что у вас установлен пакетный менеджер — это может быть npm, pnpm, yarn, bun или deno. Если пакетного менеджера ещё нет, начните с npm — это простой и надёжный вариант для новичков. Гайд по установке npm.

    Почему я советую npm для новичков? Все просто.

    Во-первых, npm идет из коробки при установке Nodejs.

    Во-вторых: я пока неглубоко разбираюсь в пакетных менеджерах. Возможно, со временем перейду на другой — более безопасный или быстрый. Но сейчас моя цель — разрабатывать веб-приложения, и для этого npm вполне подходит. Он популярен и прост — этого мне достаточно.

    Nodejs

    eslint требует наличия Nodejs. Убедитесь, что у вас установлено необходимое ПО.

    Инициализированный проект

    Перейдите в корень вашего проекта или создайте новый проект. Создайте package.json через установленный пакетный менеджер:

  2. Инициализация eslint

    Инициализируйте eslint в корне вашего проекта:

    npm init @eslint/config@latest # либо укажите конкретную версию

    Установщик задаст несколько вопросов: на чем пишется проект (TypeScript или JavaScript), какой фреймворк используется (Vue, React, Vanilla и т.д.), в каком формате сохранить конфигурацию.

    Важно: npm init @eslint/config предполагает, что у вас в проекте уже есть файл package.json. Если у вас нет такого файла, проинициализируйте проект.

Это все! После установки в корне вашего проекта появится конфигурационный файл eslint.config.js, в котором можно настраивать поведение линтера в рамках проекта.

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

Чтобы воспользоваться eslint, можно использовать командный интерфейс (CLI) команды. Ниже даны примеры базового использования.

Синтаксис

Большинство пользователей используют npx для запуска ESLint: 

npx eslint [options] [file|dir|glob]*

Примеры

  • Проверить два файла:

    npx eslint file1.js file2.js

  • Проверить несколько файлов в директории lib:

    npx eslint lib/**

Более подробно ознакомиться с параметрами командного интерфейса вы можете на официальной документации ESLint - eslint.org/docs/latest/use/command-line-interface

Видеогайд

Не до конца понятно из объяснения? Посмотри 20-минутное видео, где подробно показано, как настроить ESLint вместе с Prettier в роли форматтера.