- PVSM.RU - https://www.pvsm.ru -

Запрещаем говнокод, или полезные плагины для ESLint

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

Сегодня я хочу затронуть тему ESLint'а, прекрасного инструмента для проверки JavaScript проектов на наличие ошибок.

Я не буду писать в этой статье об очевидных моментах, вроде настройки eslint'а для вашего проекта: надеюсь, вы сможете самостоятельно прочесть документацию [1] по этой части и подключить его к себе. А здесь мы обсудим, какой дополнительный «обвес» можно подключить к изначальному инструменту и как его можно настроить, чтобы заставить работать его с наибольшей пользой для вас.

eslint-config-airbnb [2]

Сейчас в качестве основы правил мы используем подготовленную конфигурацию с правилами от команды airbnb. Их стандарт [3] написания JavaScript кода сейчас имеет на гитхабе больше 73 тысяч звёзд и используется многими известными организациями [4]. Думаю, ему можно доверять.

Данная конфигурация подключает к проекту сразу несколько важных пакетов: eslinteslint-plugin-importeslint-plugin-react, and eslint-plugin-jsx-a11y, содержащих дополнительные правила для валидации вашего кода. Надо заметить, что этот файл конфигурации подразумевает, что вы используете у себя в проекте React.js. Если же это не так, то вы всегда можете установить конфигурацию eslint-config-airbnb-base [5], которая содержит всё то же самое, за иключением зависимости от плагинов для React.js.

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

eslint-plugin-import [6]

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

eslint-plugin-react [7]

Плагин позволит писать более правильный код на React.js и убережёт вас от распространнённых антипаттернов, а также заставит вас приписывать ко всем своим компонентам описания принимаемых ими типов данных.

eslint-plugin-jsx-a11y [8]

Данный плагин также относится к проектам на React.js и он также крайне полезен в работе. Он заставит вас писать такой HTML, который будет намного лучше соответствовать стандартам доступности. Ваши проекты станут намного более удобными для людей с ограниченными возможностями.


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

Но в нашем мире имеются не только эти плагины для eslint, но и многие другие. На гитхабе на эту тему уже имеется чудесный проект awesome-eslint [9]. В последние дни я решил заняться изучением этой темы и хочу представить на ваш суд самое интересное, что было найдено, опробовано лично и внедрено в свой текущий проект, над которым я сейчас работаю.

Дополнительные плагины для ESLint

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

eslint-plugin-node [10]

Плагин, предназначенный специально для Node.js-проектов. Думаю, многим может пригодиться, если они всё ещё не используют его у себя.

eslint-plugin-lodash [11]

Данный плагин заставит вас "полюбить" Lodash и переписать большую часть нативных JS-методов на методы из Lodash, а также он содержит множество рекомендаций по написанию кода, использующего lodash-цепочки. В общем, очень интересно, но в наш проект я пока что внедрять это не стал просто в силу того, что сейчас нам придётся переписать слишком много кода для соответствия правилам этого плагина. Но на будущее я его себе взял на заметку.

eslint-plugin-compat [12]

Данный плагин позволяет прямо при разработке проверять совместимость написанного вами кода с текущими браузерами, на которые вы ориентируетесь в своём проекте в данный момент. В данный момент я не стал его подключать к своему проекту по причине того, что мы сейчас используем сервис polyfill.io [13], автоматически подключающий все необходимые полифилы к каждому индивидуальному браузеру, так что проблема совместимости кода в целом как-бы отсутствует. Но на будущее заметку себе тоже делаю: вдруг понадобится?

eslint-plugin-optimize-regex [14]

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

eslint-plugin-sonarjs [15]

Одна из самых интересных находок из этого списка дополнительных обвесов. Этот плагин содержит целый набор проверок, благодаря которым он находит плохо написанные участки кода, одинаковые функции и просто бессмысленные конструкции, и предлагает их переписать (жаль только, что сам ещё не умеет их переписывать :D). Если вы не любите заниматься декомпозицией своего кода на небольшие ясные блоки и пишете запутанные функции в 100+ строк — ждите предупреждений от данного плагина о том, что когнитивная сложность таких мест в проекте слишком высока для длительной поддержки и должна быть переписана.

eslint-plugin-no-loops [16]

Этот плагин просто будет ругаться на вас в те моменты, когда вы пожелаете писать стандартные циклы for или while. В наши дни уже давно принято использовать forEach, map, reduce, и так далее. Я в целом согласен с автором и подключил плагин в свой проект.

eslint-plugin-no-use-extend-native [17]

Плагин, который запретит вам расширять прототипы стандартных JavaScript объектов. Скажем "нет!" монки-патчам. И это правильно.

eslint-plugin-promise [18]

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


Вот такой список плагинов в итоге получился. А что используете в своих проектах вы для проверки вашего кода?

В заключение оставлю пример конфигурации нашего файла .eslintrc из текущего проекта:

.eslintrc

{
  "parser": "babel-eslint",
  "extends": [
    "airbnb",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:jsx-a11y/recommended",
    "plugin:sonarjs/recommended",
    "plugin:promise/recommended"
  ],
  "plugins": ["react", "jsx-a11y", "optimize-regex", "sonarjs", "no-loops", "no-use-extend-native", "promise"],
  "rules": {
    "react/jsx-filename-extension": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "packageDir": "./"
      }
    ],
    "allowTernary": true,
    "optimize-regex/optimize-regex": "warn",
    "sonarjs/cognitive-complexity": ["error", 30],
    "no-loops/no-loops": 2,
    "no-use-extend-native/no-use-extend-native": 2,
  },
  "settings": {
    "import/resolver": "webpack"
  }
}

Автор: Роман Ахмадуллин

Источник [19]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/286800

Ссылки в тексте:

[1] документацию: https://eslint.org/docs/user-guide/getting-started

[2] eslint-config-airbnb: https://www.npmjs.com/package/eslint-config-airbnb

[3] стандарт: https://github.com/airbnb/javascript

[4] многими известными организациями: https://github.com/airbnb/javascript#in-the-wild

[5] eslint-config-airbnb-base: https://npmjs.com/eslint-config-airbnb-base

[6] eslint-plugin-import: https://www.npmjs.com/package/eslint-plugin-import

[7] eslint-plugin-react: https://www.npmjs.com/package/eslint-plugin-react

[8] eslint-plugin-jsx-a11y: https://www.npmjs.com/package/eslint-plugin-jsx-a11y

[9] awesome-eslint: https://github.com/dustinspecker/awesome-eslint

[10] eslint-plugin-node: https://github.com/mysticatea/eslint-plugin-node

[11] eslint-plugin-lodash: https://github.com/wix/eslint-plugin-lodash

[12] eslint-plugin-compat: https://github.com/amilajack/eslint-plugin-compat

[13] polyfill.io: https://polyfill.io/v2/docs/

[14] eslint-plugin-optimize-regex: https://github.com/BrainMaestro/eslint-plugin-optimize-regex

[15] eslint-plugin-sonarjs: https://github.com/SonarSource/eslint-plugin-sonarjs

[16] eslint-plugin-no-loops: https://github.com/buildo/eslint-plugin-no-loops

[17] eslint-plugin-no-use-extend-native: https://github.com/dustinspecker/eslint-plugin-no-use-extend-native

[18] eslint-plugin-promise: https://github.com/xjamundx/eslint-plugin-promise

[19] Источник: https://habr.com/post/417841/?utm_source=habrahabr&utm_medium=rss&utm_campaign=417841