Держите свой код в чистоте с ESLint

Изучите основы самого популярного линтера JavaScript, который может помочь заставить ваш код придерживаться определенного набора синтаксических соглашений, проверьте, содержит ли код возможные источники проблем и соответствует ли код набору стандартов, которые вы или ваша команда определяете

ESLint - этоJavaScriptлинтер.

Что такое линтер?

Хороший вопрос! Линтер - это инструмент, который выявляет проблемы в вашем коде.

Запуск линтера для вашего кода может рассказать вам о многом:

  • если код придерживается определенного набора синтаксических соглашений
  • если в коде есть возможные источники проблем
  • если код соответствует набору стандартов, которые вы или ваша команда определяете

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

ESLint

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

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

ESLint поможет вам отловить эти ошибки. Какие именно ошибки вы спросите?

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

и многое другое! Полный список доступен на сайтеhttps://eslint.org/docs/rules/

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

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

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

С помощьюnpm.

npm install -g eslint

# create a .eslintrc configuration file eslint --init

# run ESLint against any file with eslint yourfile.js

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

npm install eslint --save-dev

# create a .eslintrc configuration file ./node_modules/.bin/eslint --init

# run ESLint against any file with ./node_modules/.bin/eslint yourfile.js

Используйте ESLint в своем любимом редакторе

Чаще всего ESLint, конечно, используется в вашем редакторе.

Общие конфигурации ESLint

ESLint можно настроить множеством разных способов.

Руководство по стилю Airbnb

Обычная установка - использоватьСтиль написания кода Airbnb JavaScriptдля линтинга вашего кода.

Пробег

yarn add --dev eslint-config-airbnb

или же

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

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

{
  "extends": "airbnb",
}

Реагировать

Линтинг кода React прост с плагином React:

yarn add --dev eslint-plugin-react

или же

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

В твоей.eslintrcдобавить файл

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

Используйте определенную версию ECMAScript

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

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

Включите ES6 (или выше), установив это свойство в.eslintrc:

{
  "parserOptions": {
    "ecmaVersion": 6,
  }
}

Принудительный строгий режим

{
  "parserOptions": {
    "ecmaFeatures": {
      "impliedStrict": true
    }
  }
}

Более сложные правила

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

Отключение правил для определенных строк

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

В этом случае вы можете полностью отключить ESLint в нескольких строках:

/* 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

Больше руководств по инструментам разработчика: