Эффективное использование ESLint

JavaScript

Когда мы взаимодействуем в каком-либо проекте, то лучше всего придерживаться некоего общего стиля написания кода. Это облегчит коллегам его чтение и сократит временные затраты. Но как же понять, знают ли все этот общепринятый стиль? И как убедиться, что все ему следуют?

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

На второй вопрос можно ответить добавлением предкоммитного перехватчика в Git, который будет давать ESLint команду о запуске анализа кода прежде, чем его коммитить. В случае отклонения от указанного стандарта он обратит на это внимание разработчика и не допустит коммит кода.

Мы будем использовать husky для добавления git перехватчиков в наш проект.

Нам также следует добавить его в CI пайплайн на случай, если разработчику удастся обойти git перехватчики.

Часть 1: Добавление ESLint в проект

Мы используем Express generator для создания скелета приложения.

Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020Express generator создал проект.

Теперь давайте его запустим при помощи следующих команд:

cd myapp
npm install
DEBUG=myapp:* npm start
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Итак, наш проект готов и запущен. Теперь нам нужно добавить ESLint.

Мы это сделаем посредством следующей команды:

npm install --save-dev eslint

Нам не стоит производить полную установку ESLint, достаточно будет инсталлировать его в качестве dev-зависимости.

Для запуска конфигурации мы введем:

./node_modules/.bin/eslint --init

Здесь программа задаст нам несколько вопросов. Ниже я прикрепил все восемь в виде скриншотов. Где необходимо я дал пояснения в подписи.

Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020Если мы используем common JS, то нам понадобится применить опцию CommonJS (ES5 или младше).
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020Если же вы работаете во фронтенд приложении через React или Vue, то выбирайте соответствующий вариант.
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020Мы же будем применять это приложение в бэкенд. Если бы мы работали с фронтенд, то выбрали бы Browser, что позволило бы использовать такие глобальные переменные, как window и объектные модели документов в DOM браузера.
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020Здесь мы применим существующий образец стиля.
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020Для нашего примера я возьму стандарт стиля Airbnb.

Я сам постоянно пользуюсь стилем Airbnb. Рекомендую ознакомиться — он весьма интересный.

Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020Здесь выбираем JSON.
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020Установим все зависимости.

Это действие создаст .eslintrc.json в корне нашего проекта.

Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Часть 2: Использование ESLint

Мы можем проверить весь проект, запустив следующую команду:

./node_modules/.bin/eslint . # . represent the current directory

Обратите внимание, что eslint является исполняемой, и мы будем использовать версию, которая содержится в нашем проекте. Все исполняемые файлы расположены в директории .bin, находящейся в каталоге node_modules. Это дает нам возможность хранить различные версии ESLint для применения в нескольких проектах без необходимости их полной установки. На самом деле лучше все исполняемые применять именно таким образом (например, nodemon, pm2, и т.д).

В результате вывода мы видим множество файловых ошибок и предупреждений. В конце же отображен полный отчет.

Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Для запуска ESLint для одного файла мы используем следующую команду:

./node_modules/.bin/eslint app.js
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Мы также можем активировать функцию автоматической корректировки. В этом случае ESLint исправит все, что может, самостоятельно.

./node_modules/.bin/eslint app.js --fix
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Исправлено 14 ошибок. Осталась только одна неиспользованная переменная. Для обнаружения источника этой ошибки нам понадобится сначала найти правило no-unused-vars, т.к. для понимания стандарта стилистики Airbnb требуется время.

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

./node_modules/.bin/eslint . --fix
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Большинство ошибок было исправлено.

Часть 3: Добавление команды в package.json

Достаточно тяжело каждый раз печатать команду снова и снова. Поэтому я предпочитаю создавать сокращенные варианты в виде скриптов в package.json.

Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Теперь для запуска ESLint мы можем просто использовать:

npm run lint
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

На выводе мы видим в конце npm ERR!. Это результат выдачи ESLint ненулевого кода выхода, которую можно проигнорировать.

Все это легко запоминается и применяется любым разработчиком.

Часть 4: Переопределение правил

Что, если мы захотим отключить правило no-unsed-vars? Мы просто изменим его в нашем файле .eslintrc.json.

После этого ESLint больше не будет выдавать эту ошибку.

Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020
Эффективное использование ESLint — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

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

Часть 5: Заключение

Использование какого-либо линтера совместно со стандартом стиля весьма полезно, но также важно совмещать его работу с предкоммитным перехватчиком. Случается, что разработчики обходят git перехватчики, поэтому еще важнее добавить его в CI.

Специально для сайта ITWORLD.UZ. Новость взята с сайта NOP::Nuances of programming