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

в 12:27, , рубрики: eslint, javascript, lodash, sonarjs

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

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

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

eslint-config-airbnb

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

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

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

eslint-plugin-import

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

eslint-plugin-react

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

eslint-plugin-jsx-a11y

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


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

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

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

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

eslint-plugin-node

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

eslint-plugin-lodash

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

eslint-plugin-compat

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

eslint-plugin-optimize-regex

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

eslint-plugin-sonarjs

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

eslint-plugin-no-loops

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

eslint-plugin-no-use-extend-native

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

eslint-plugin-promise

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


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

В заключение оставлю пример конфигурации нашего файла .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"
  }
}

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

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js