Думаю, многие знают, что в серьёзных проектах в наше время принято использовать специальные инструменты для проверки кода на ошибки и соответствие принятому в команде стилю.
Сегодня я хочу затронуть тему ESLint'а, прекрасного инструмента для проверки JavaScript проектов на наличие ошибок.
Я не буду писать в этой статье об очевидных моментах, вроде настройки eslint'а для вашего проекта: надеюсь, вы сможете самостоятельно прочесть документацию по этой части и подключить его к себе. А здесь мы обсудим, какой дополнительный «обвес» можно подключить к изначальному инструменту и как его можно настроить, чтобы заставить работать его с наибольшей пользой для вас.
eslint-config-airbnb
Сейчас в качестве основы правил мы используем подготовленную конфигурацию с правилами от команды airbnb. Их стандарт написания JavaScript кода сейчас имеет на гитхабе больше 73 тысяч звёзд и используется многими известными организациями. Думаю, ему можно доверять.
Данная конфигурация подключает к проекту сразу несколько важных пакетов: eslint, eslint-plugin-import, eslint-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 из текущего проекта:
{
"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"
}
}