Установка и использование ESLint в существующем коде JavaScript

Почему линтинг? 🤔

Javascript — отличный язык, однако, поскольку он гибкий, есть вероятность написать плохой код и закопаться в яму. Javascript – это динамический язык с нечеткой типизацией, а это означает, что многое может пойти не так, поэтому ESLint очень полезен, поскольку он анализирует ваш код, не выполняя его.< br /> ESLint – это инструмент для проверки качества кода, задачей которого является сканирование файлов вашего проекта и выявление потенциальных проблем. Проблемы могут быть некритическими, например, форматирование, или критическими, например, попытка сослаться на несуществующую функцию.
Теперь ESLint не одинок в этом пространстве, есть и другие инструменты, такие как JSHint. и JSLint. Все эти инструменты пытаются решить одну и ту же проблему, но в последние годы сообщество начало двигаться в сторону ESLint. Это связано с тем, что ESLint лучше справляется с последними функциями ES6 и ES7, в то время как другие инструменты не имеют такой хорошей интеграции, поэтому сообщество начало отходить от них.

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

Есть два способа установить ESLint; глобально или в вашем конкретном проекте. Легче сделать это глобально, но на официальной веб-странице ESLint рекомендуют не устанавливать его глобально, а устанавливать локально в каждом проекте, и основная причина этого в том, что это упрощает сотрудничество с другими разработчиками на отдельные проекты и имеют разные правила (правила — это соглашения о стиле, которые вы применяете к коду). ESLint — это пакет, который мы устанавливаем с помощью NPM.

В этом руководстве я использую свой существующий проект repository в качестве образца репозитория. В ветке master будет исходный код, и я буду использовать ветку linted для установки и проверки кода с помощью ESLint. Я предполагаю, что в вашей системе уже установлены git и node. Я клонировал репозиторий в своей системе и переключил ветку на linted.

Давайте установим ESlint и сохраним его как зависимость разработчика. Мы используем ESLint в качестве зависимости разработчика, потому что код вашего проекта не зависит от ESLint, вместо этого вы хотите использовать его во время разработки своего проекта, и когда вы выпускаете проект, ему не понадобится ESLint.

npm install eslint --save-dev 

После завершения установки откройте файл package.json, и вы увидите обновленную запись ESLint в разделе «devDependencies».

Теперь начинается интересная часть, которая заключается в настройке ESLint, прежде чем мы сможем начать использовать его для поиска и исправления ошибок линтинга. Мы собираемся сделать это, настроив файл конфигурации. Процесс будет проходить через ряд вопросов или настроек, и в конце он создаст файл конфигурации с именем .eslintrc.{js,yml,json}.

Поскольку мы уже разместили ESLint в нашем реестре, мы будем использовать npx (рекомендуется тем, кто использует NPM версии 5.2.0 или выше), либо вы можете использовать ./node_modules/.bin/eslint
Чтобы инициализировать конфигурацию, запустите:

npx eslint --init
Or
./node_modules/.bin/eslint --init

Появится мастер ESlint CLI и спросит нас, как мы хотим его настроить. Вы можете выбрать различные варианты в соответствии с вашими предпочтениями. Я хочу использовать ESLint для проверки синтаксиса, поиска проблем и обеспечения соблюдения стиля кода.

Я использовал модули javascript в своем проекте, поэтому выберу первый вариант. (Если в вашем проекте установлен Babel, вам обязательно нужно выбрать этот вариант. Если вы работаете над таким проектом, как React, Vue, Angular и т. д., все они используют Babel, поэтому вам нужно выбрать этот вариант.)

Я не использовал ни один из этих фреймворков в своем проекте, поэтому я не выберу ни один из них.

Я не использовал TypeScript в своем проекте, поэтому я выберу Нет!

Мой проект основан на узлах, поэтому я выберу второй вариант.

Теперь мы увидим параметры для определения стиля кода нашего проекта. Я выберу первый вариант, в котором будут перечислены стили, созданные такими популярными компаниями, как Airbnb и Google. Выбор второго варианта приведет вас к ряду вопросов, которые определят ваши собственные определения стиля. Или вы можете выбрать последний вариант, чтобы проверить файл javascript из другого проекта и применить те же правила в своем проекте.

Я выберу руководство по стилю Airbnb, которое является одним из популярных руководств по стилю.

Последним шагом является выбор формата файла .eslintrc. Я выбрал формат javascript.

После выбора нужного формата файла мастер спросит, хотите ли вы установить зависимость Airbnb с помощью NPM или нет? Просто нажмите «Да», после чего ESlint запустится, установит все необходимые зависимости и сгенерирует файл конфигурации .eslintrc.js.

Мы закончили установку ESLint и настройку файла конфигурации.

Запуск ESLint

а. Проверка синтаксиса и поиск проблем

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

npx eslint filename.js 

И чтобы проверить несколько файлов в каталоге, вам нужно указать шаблон, например public/**/*.js, а затем ESLint будет искать ошибки во всех файлах, которые находятся внутри общедоступного каталога, а также в подкаталогах, команда будет :

npx eslint public/**/*.js

На приведенном ниже снимке экрана показан список ошибок и предупреждений линтинга, выдаваемых ESLint, когда я запускаю его в одном файле, используя:

npx eslint server.js

б. Устранение проблем и соблюдение стиля

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

Давайте запустим команду, чтобы исправить ошибки и применить руководство по стилю Airbnb с помощью ESLint:

npx eslint server.js --fix

Прохладный! ESLint исправил 82 ошибки, но тем не менее у нас есть одно предупреждение, и это потому, что рекомендуется избегать использования методов в console. Такие сообщения считаются предназначенными для целей отладки и поэтому не подходят для отправки клиенту.

Итак, чтобы исправить это предупреждение, нам придется изменить правило в файле конфигурации ESLint.eslintrc.js. Я добавлю новое правило 'no-console': 0, в свой файл конфигурации ESlint, которое будет разрешать все операторы консоли и не будет выдавать предупреждение. Добавление этого правила в наш файл конфигурации позволит использовать консольные операторы по всему проекту и не вызовет никаких ошибок. Если вы явно хотите разрешить один оператор консоли, вы можете добавить комментарий:
в текущую строку:

console.log(someThing); /* eslint-disable-line no-console */

… или в предыдущей строке:

/* eslint-disable-next-line no-console */
console.log(someThing);

После добавления этого правила в наш файл конфигурации мы снова запустим ESLint для проверки предупреждений/ошибок и вуаля!! Никаких ошибок и предупреждений!🤩

Код выглядит намного чище, чем до использования ESLint.

Настройка правил для ESLINT в вашем проекте

Определение правил для ESLINT в вашем проекте, чтобы сообщить ESLint, какие правила вы хотите добавить или удалить. вы можете изменить/установить свои правила в разделе правил в файле конфигурации. Вы можете определить как можно больше правил, вы можете прочитать больше о правилах ESLINT в их официальной документации ESLINT Rules Documentation.

Бонус: вы можете связать ESLint с вашим компилятором проекта javascript:

• Перейдите к вашему файлу package.json, в сегмент скрипта в вашем файле добавьте следующее

script:{
    "lint":"eslint"
}

Примечание. "ворс" – это обычное слово, вы можете использовать любое слово, которое вам удобно

• В корневом проекте вы можете запустить скрипт linting с помощью

npm run lint

ESLINT помогает повысить производительность, писать код в соответствии со стандартом и отмечать ошибки, когда кодовая база нарушает правила руководства по стилю. С помощью этого поста вы сможете интегрировать ESLINT в свой проект Javascript.