ESLint: Що? Чому? Де? Як?
Tags: javascript, beginners, node
Published: 2023-05-23 17:49:57

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

## Що таке ESLint?

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

Саме цим ESLint і відрізняється від інструмента для форматування коду, Prettier, який може лише знаходити та фіксити проблеми код-стайлів, але не скаже якщо ваш код містить помилку. Prettier можна використовувати в комбінації з ESLint, для просування код-стайлів. Детальніше про те як встановити Prettier - ([в окремій статті](http://devcenter.space/posts/prettier-setup)).

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

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

```
npm init @eslint/config
```

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


![Вибір пресету ESLint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3x8n8xmms2aeeypcjep0.png)


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

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

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

<details>
    <summary>**"How would you like to define a style for your project?"**</summary>

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

<details>
    <summary>**"Which style guide do you want to follow?"**</summary>

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

<details>
    <summary>**"What format do you want your config file to be in?"**</summary>

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

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

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

![.eslintrc.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/diqrd5ogl7qk11zpmo86.png)

## Плагіни ESLint

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

Приклад встановлення плагіна Prettier для ESLint можна побачити у [минулій статті](http://devcenter.space/posts/prettier-setup).

Корисні плагіни для ESLint [можна знайти тут](https://github.com/dustinspecker/awesome-eslint#plugins).

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

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

- [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [WebStorm](https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_activate)
- [Sublime Text](https://packagecontrol.io/packages/ESLint)
- [Vim](https://vimawesome.com/plugin/eslint)
- [Atom](https://hackernoon.com/set-up-eslint-in-atom-83dfb3d34fdf)

## Підсумок

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

## Більше про ESLint

- Різниця між Плагінами та Правилами ESLint: [посилання](http://devcenter.space/posts/eslint-rules-vs-plugins)
- Oфіційна документація: [посилання](https://eslint.org/docs/latest/).

[Більше цікавих статей](http://devcenter.space/).