Держи свой код чистым с помощью ESLint

Что такое ESLint

ESLint - это линтер для языка программирования JavaScript, написанный на Node.js.

Он чрезвычайно полезен, потому что JavaScript, будучи интерпретируемым языком, не имеет этапа компиляции и многие ошибки могут быть обнаружены только во время выполнения.

ESLint поможет тебе:

• найти существующие ошибки в коде;
• избежать глупых ошибок;
• избежать бесконечные циклы в условиях цикла for;
• убедится, что все методы getter возвращают что-то;
• не разрешить выражения console.log (и аналогичные);
• проверить наличие дубликатов cases в switch;
• проверить недоступный код;
• проверить правильность JSDoc;

и многое другое! Полный список доступен по ссылке.

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

Установка ESLint глобально

Используя npm:

npm install -g eslint

# создает конфигурацционный файл `.eslintrc`
eslint --init

# запускает ESLint проверку указанного файла
eslint yourfile.js

Установка ESLint локально

npm install eslint --save-dev

# создает конфигурацционный файл `.eslintrc`
./node_modules/.bin/eslint --init

# запускает ESLint проверку указанного файла
./node_modules/.bin/eslint yourfile.js

Установка стилей Airbnb

Одной из самых популярных настроек для линтера является использование Airbnb JavaScript Style.

Используй команду:

yarn add --dev eslint-config-airbnb

или

npm install --save-dev eslint-config-airbnb

что бы установить пакет конфигурации Airbnb и добавь в свой .eslintrc файл который находится в корне твоего проекта:

// .eslintrc
{
  "extends": "airbnb"
}

Установка стилей для React

Подключить линтер для React можно легко с помощью плагина React:

yarn add --dev eslint-plugin-react

или

npm install --save-dev eslint-plugin-react

и добавив в свой файл .eslintrc:

// .eslintrc
{
  "extends": "airbnb",
  "plugins": ["react"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Используй конкретные версии EcmaScript

ECMAScript меняет свою версию каждый год.

По умолчанию установлена 5-я версия, что означает стандарт до 2015 года.

Что бы включить ES6 (или выше), пропиши это в .eslintrc

// .eslintrc
{
  "parserOptions": {
    "ecmaVersion": 6
  }
}

Больше правил

Подробное руководство по правилам можно найти на официальном сайте https://eslint.org/docs/user-guide/configuring.

Отключение правил где это необходимо

Иногда тебе может понадобится отключить правила в конкретном месте, это можно сделать так:

/* eslint-disable */
alert("test");
/* eslint-enable */

или

alert("test"); // eslint-disable-line

также можно отключить одно или несколько конкретных правил для нескольких строк:

/* eslint-disable no-alert, no-console */
alert("test");
console.log("test");
/* eslint-enable no-alert, no-console */

или для одной строки:

alert("test"); // eslint-disable-line no-alert, quotes, semi