В предыдущем посте я рассмотрел настройку NPM, Webpack, Babel и ReactJS в проекте NodeJS.
Еще одна важная часть экосистемы Full-Stack JavaScript - ESLint. В этом посте я расскажу, что такое ESLint, какие проблемы он решает и как его настроить.
Статический анализ, линтинг и ESLint
В компьютерном программировании статический анализ относится к идее анализа исходного кода без фактического выполнения этого кода. Линтинг - это тип статического анализа, который ищет проблемные шаблоны кода, синтаксические ошибки, а также нарушения правил стиля.
ESLint - это инструмент для линтинга исходного кода JavaScript.
Настройка ESLint
Настройку ESLint можно разбить на два этапа.
- Установка ESLint как зависимости
- Создание файла конфигурации .eslintrc
Установка ESLint как зависимости
ESLint - это модуль npm, и установить его как зависимость вашего проекта так же просто, как набрать:
npm install --save-dev eslint
Создание файла конфигурации ESLint
По умолчанию файлы конфигурации ESLint находятся в корневом каталоге вашего приложения под именем .eslintrc. В вашем файле .eslintrc вы захотите создать пустой объект. Мы заполним этот пустой объект свойствами и значениями, чтобы задать нашу конфигурацию. На этом этапе ваш файл .eslintrc будет выглядеть так:
Настройка ESLint - определение сред
Пустой файл .eslintrc бесполезен, поэтому давайте приступим к настройке!
Одним из первых элементов, которые мы должны настроить, является среда, в которой будет выполняться наш JavaScript.
Почему ESLint нужно знать, для какой среды мы пишем? Что ж, помните, что ESLint помогает указывать на ошибки кодирования, а не только на нарушения правил руководства по стилю. Если мы пренебрегаем правильной настройкой среды, для которой разрабатываем, то глобальные объекты, предоставляемые этими средами, такие как console в браузере, не будут «известны» ESLint, и это вызовет ошибку.
Мы можем определить несколько сред, но пока давайте укажем, что мы будем разрабатывать для браузеров. Теперь наш .eslintrc должен выглядеть так:
Указание парсера
Работа парсера заключается в том, чтобы взять наш исходный код, убедиться, что он синтаксически верен, а затем построить иерархическую структуру из этого исходного кода. В JavaScript предпочтительной иерархической структурой является абстрактное синтаксическое дерево.
ESLint по умолчанию использует парсер Espree, но мы можем настроить его для использования других парсеров. Для наших целей мы настроим ESLint для использования Babel (через модуль babel-eslint) в качестве его парсера. Основная причина этого заключается в том, что, поскольку мы используем Babel для транспиляции нашего кода, использование Babel для линтинга также обеспечивает согласованность.
Чтобы изменить парсер, мы сначала устанавливаем babel-eslint как зависимость разработчика:
npm intall --save-dev babel-eslint
Затем мы обновляем наш файл .eslintrc с помощью свойства parser верхнего уровня и устанавливаем для этого ключа значение babel-eslint. . С этими изменениями наш файл конфигурации будет выглядеть так:
Добавление правил
Теперь, когда мы указали нашу среду и наш парсер, нам нужно добавить правила.
Правила в ESLint определяют, как мы хотим, чтобы наш код был написан, и какой уровень серьезности должен быть повышен, если наш код нарушает эти правила.
По умолчанию ESLint не поставляется с включенными правилами. Список правил можно найти на странице документации ESLint. Каждое правило может быть отключено (off / 0), предупреждение (warn / 1) или ошибка (error / 2).
Мы можем перечислить каждое правило одно за другим, но это утомительно. Я предпочитаю использовать свойство ESLint extends для массового копирования другого набора правил, а затем перезаписывать правила по мере необходимости, например:
Приведенный выше код укажет ESLint на использование правил, предоставленных AirBnB.
Как мы внедрили правила AirBnB в наш проект? Устанавливаем конечно из npm:
npm install --save-dev eslint-config-airbnb eslint-plugin-react
ESLint из командной строки
Это потребовало много времени на настройку, но, наконец, у нас есть рабочая конфигурация ESLint. Все, что нам нужно было сделать, это:
- Загрузите и установите соответствующие модули npm.
- Предоставьте файл конфигурации.
- Укажите нашу среду, синтаксический анализатор и правила.
Теперь мы можем использовать ESLint из командной строки:
./node_modules/eslint/bin/eslint.js <javascript file>
Подключение ESLint и Webpack
Мы не хотим запускать наш линтер вручную. Вместо этого мы хотим интегрировать ESLint с Webpack, чтобы наши исходные файлы линтировались как часть нашего процесса сборки.
Сделать это довольно просто. Сначала мы установим eslint-loader. eslint-loader учит веб-пакет, как использовать eslint!
Во-вторых, мы собираемся добавить eslint-loader как preLoader в наш файл webpack.config.js, чтобы он выглядел так: :
Почему мы добавили eslint-loader в раздел preLoaders? Как вы, наверное, догадались, preLoaders запускаются перед загрузчиками. Мы хотим, чтобы наш ESLint запускался с нашим исходным кодом до его преобразования другими загрузчиками, поскольку это исходный код, с которым будут работать другие разработчики.
Наконец, мы можем передать параметры конфигурации в ESLint из webpack. В нем я объявил, что всегда должны выдаваться предупреждения и ошибки и что предупреждения и ошибки должны вызывать сбой сборки. Это было достигнуто путем добавления свойства верхнего уровня eslint в наш файл webpack.config.js:
Плавник!
