Установка и настройка ESLint

ESLint, что же это такое и «с чем его едят»?

ESLint — это инструмент для анализа JavaScript кода, для выявления ошибок и проблем написания. Код может быть написан на любом из стандартов данного языка.

Данный инструмент написан на Node.js, поэтому перед тем как нам его устанавливать, необходимо установить на свой ПК данную платформу. Если вы не знаете как устанавливать его, то в статье — Что такое Node Js и как его установить, вы можете об этом подробно все узнать.

Существует несколько вариантов установки инструмента ESLint: глобально или локально для одного проекта. Мы рассмотрим установку глобально на весь ПК.

Установка ESLint.

1. Для установки необходимо прописать в командной строке:

npm install -g eslint

Настройка конфигурационного файла.

После того как закончилась установка, необходимо в папке, где находится ваш проект с установленным Node (в проекте будет папка node_modules) запустить команду:

eslint --init

Данная команда инициализирует создание конфигурационного файла. Вам будет предложено ответить на несколько вопросов:

1. Как бы вы хотели использовать ESLint?

How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style

Ответом на данный вопрос выбираем 3.

2. Какой тип модулей в вашем проекте вы используете?

What type of modules does your project use? … 
  JavaScript modules (import/export)
▸ CommonJS (require/exports)
  None of these

На этот вопрос я отвечаю 2.

3. Какой фреймворк вы используете в проекте?

Which framework does your project use? … 
▸ React
  Vue.js
  None of these

Если пишите приложение на React, то отвечаем 1, если на Vue, то 2.

4. Вы используете TypeScript?

Does your project use TypeScript?  No / ‣ Yes

Отвечаем, Да.

5. Где вы будете запускать код?

Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

Выбираем оба варианта.

6. Как вы хотите определить стиль проекта?

How would you like to define a style for your project? … 
  Use a popular style guide
▸ Answer questions about your style
  Inspect your JavaScript file(s)

Тут выбираем 2 вариант — Ответить на вопросы о стиле.

7. В каком формате сохранить конфигурационный файл?

What format do you want your config file to be in? … 
  JavaScript
  YAML
▸ JSON

Выбираю — JSON.

8. Какой стиль отступов вы используете?

What style of indentation do you use? … 
▸ Tabs
  Spaces

Так как я пользуюсь Tab, то отвечаю Tabs.

9. Какие кавычки вы используете для строк?

What quotes do you use for strings? … 
▸ Double
  Single

Использую двойные — Double.

10. Какое окончание строк вы используете?

What line endings do you use? … 
▸ Unix
  Windows

Так как работаю на Linux системе, то выбираю Unix.

11. Вы используете точки с запятой?

Do you require semicolons? No / ‣ Yes

Отвечаем — Да.

Ответив на все вопросы в папке с проектом появится конфигурационный файл ESLint в выбранном вами формате. Если вы хотите более подробно узнать, что находится в данном файле, можете перейти на страницу — Из чего состоит конфигурационный файл ESLint.

Как пользоваться ESLint?

Чтобы использовать ESLint в вашем редакторе кода, необходимо установить расширение для него. Я пользуюсь VS Code редактором и в его расширениях при помощи поиска находим ESLint и устанавливаем.

После этого в закладке «Проблемы» при написании кода, будут подсвечиваться возможные ошибки и проблемы.

Вы так же можете проверять любой JS файл на ошибки и с помощью командной строки.

eslint *название файла*

После ввода данной команды, файл будет проверен и вам ESLint выдаст все ошибки и проблемы кода, если они там присутствуют.