ESLint: Що? Чому? Де? Як?

Стаття з мого блогу: https://devcenter.space/

Що таке ESLint?

ESLint - це лінтер, для NodeJS застосунків. Його призначення - автоматично виявляти можливі проблеми у вашому коді. Лінтери, і ESLint зокрема, можуть визначати не тільки проблеми у форматуванні коду, а й бачити потенційні баги, проблеми в роботі, пробіли в безпеці вашого застосунку.

Саме цим ESLint і відрізняється від інструмента для форматування коду, Prettier, який може лише знаходити та фіксити проблеми код-стайлів, але не скаже якщо ваш код містить помилку. Prettier можна використовувати в комбінації з ESLint, для просування код-стайлів. Детальніше про те як встановити Prettier - (в окремій статті).

Встановлення та конфігурація ESLint

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

npm init @eslint/config

Після введення команди, вас запитає про те, який функціонал ESLint ви плануєте використовувати. Вибір здійснюється стрілками клавіатури, а саме вікно вибору виглядає так:

Відповідно до вашого вибору, будуть підібрані налаштування лінтера.

Процес налаштування

Наразі немає сенсу описувати повний процес, проте хочу звернути вашу увагу на кілька пунктів:

**"How would you like to define a style for your project?"**

В цій опції раджу обрати варіант з `guide`, якщо ви налаштовуєте ESLint вперше. Будь-які потрібні вам налаштування можна буде змінити після встановлення, коли вам це буде потрібно.



**"Which style guide do you want to follow?"**

Знову ж таки, для першого разу раджу встановити `Standard`, і змінити в разі потреби.



**"What format do you want your config file to be in?"**

Тут можете обирати будь-який з форматів. Але наголошу, що більшість статтей в інтернеті використовують саме JSON формат. Ця стаття не буде виключенням.

Після процесу установки, у вашому проекті має з'явитися .eslintrc.* файл з вибраним розширенням.

Мій .eslintrc.json виглядає так:

Плагіни ESLint

ESLint окрім стандартного набору правил, має інтерфейс для встановлення доповнень(плагінів) у ваш проект. Для того, щоб використати кастомний плагін необхідно встановити його через npm/yarn, після чого додати плагін у список plugins.

Приклад встановлення плагіна Prettier для ESLint можна побачити у минулій статті.

Корисні плагіни для ESLint можна знайти тут.

Інтеграція з IDE

Деякі IDE потребують додаткової конфігурації, щоб увімкнути підсвітку помилок ESLint у редакторі. Плагіни або гайди для налаштування ESLint для популярних IDE:

Підсумок

ESLint - лінтер для NodeJS застосунків з обширним функціоналом, який допоможе контролювати дотримання код-стилів у вашому проекті, допоможе у знаходженні потенційних багів, або помилок у синтаксисі. ESLint можна доволі гнучко налаштовувати за допомогою точкового редагування правил його роботи, та встановлення зовнішніх доповнень. ESLint має інтеграцію з обширним списком середовищ розробки.