Установка Eslint в проект

Подготовка проекта и IDE

Итак, я развернул простой пока пустой проект, который называется CN Test. В нём мы попробуем развернуть и настроить библиотеку ESLint. Показывать я буду в редакторе WebStorm, в других IDE процесс будет скорее всего схожий.

Мы посмотрим, как это делать в редакторах JetBrains, то есть PhpStorm либо WebStorm. Перед началом настройки ESLint мы должны произвести небольшую настройку нашей IDE.

Мы должны зайти в главное меню File → Settings. Далее в поиске набираем ESLint и в разделе Languages & Frameworks → JavaScript → Code Quality Tools выбираем ESLint. Здесь важно поставить автоматическую ESLint-конфигурацию. По умолчанию, как правило, ESLint у нас отключён, и мы не можем им пользоваться.

Установка ESLint

Давайте пойдём по документации. Нам предлагается выполнить команду npm init @eslint/config, которая установит ESLint в нашу систему. Но дело в том, что эта команда по умолчанию будет устанавливать уже девятую версию. Если мы хотим поработать с восьмой версией ESLint, то лучше развернуть проект вручную.

Для начала давайте создадим новый проект. Здесь можно заполнить какие-то настройки этого проекта. После этого у нас появляется файл package.json, куда мы можем теперь установить нашу библиотеку ESLint.

Установить её достаточно просто:

npm install eslint@8 --save-dev

@8 означает, что мы будем устанавливать восьмую версию. Устанавливаем мы её в раздел devDependencies. Давайте выполним эту команду.

У нас в devDependencies появилась эта библиотека восьмой версии. Важно проконтролировать, что здесь у нас восьмая версия, а не девятая, потому что мы будем рассматривать пока установку восьмой версии.

Также нам потребуется создать новый файл, который мы назовём, например, test.js, в котором мы будем проверять работу нашего ESLint. Например, я создам здесь простую переменную test, в которой будет какое-то определённое значение 123. Вот такая подготовительная часть, и далее мы уже приступим к дополнительным настройкам этой системы.