- PVSM.RU - https://www.pvsm.ru -
Думаю, многие знают, что в серьёзных проектах в наше время принято использовать специальные инструменты для проверки кода на ошибки и соответствие принятому в команде стилю.
Сегодня я хочу затронуть тему ESLint'а, прекрасного инструмента для проверки JavaScript проектов на наличие ошибок.
Я не буду писать в этой статье об очевидных моментах, вроде настройки eslint'а для вашего проекта: надеюсь, вы сможете самостоятельно прочесть документацию [1] по этой части и подключить его к себе. А здесь мы обсудим, какой дополнительный «обвес» можно подключить к изначальному инструменту и как его можно настроить, чтобы заставить работать его с наибольшей пользой для вас.
Сейчас в качестве основы правил мы используем подготовленную конфигурацию с правилами от команды airbnb. Их стандарт [3] написания JavaScript кода сейчас имеет на гитхабе больше 73 тысяч звёзд и используется многими известными организациями [4]. Думаю, ему можно доверять.
Данная конфигурация подключает к проекту сразу несколько важных пакетов: eslint
, eslint-plugin-import
, eslint-plugin-react
, and eslint-plugin-jsx-a11y
, содержащих дополнительные правила для валидации вашего кода. Надо заметить, что этот файл конфигурации подразумевает, что вы используете у себя в проекте React.js. Если же это не так, то вы всегда можете установить конфигурацию eslint-config-airbnb-base [5], которая содержит всё то же самое, за иключением зависимости от плагинов для React.js.
Давайте рассмотрим немного подробнее подключаемые пакеты и узнаем, какие проверки они добавят к коду вашего проекта:
Данный плагин добавит в ваш проект проверки для всех ваших импортов и будет следить за тем, чтобы все импортируемые зависимости присутствовали в проекте, подключались в удобном для последующей работы порядке, и так далее.
Плагин позволит писать более правильный код на React.js и убережёт вас от распространнённых антипаттернов, а также заставит вас приписывать ко всем своим компонентам описания принимаемых ими типов данных.
Данный плагин также относится к проектам на React.js и он также крайне полезен в работе. Он заставит вас писать такой HTML, который будет намного лучше соответствовать стандартам доступности. Ваши проекты станут намного более удобными для людей с ограниченными возможностями.
В общем-то, уже этот набор правил сделает ваши проекты намного более качественно написанными, а также расширит ваши познания о современных стандартах написания кода.
Но в нашем мире имеются не только эти плагины для eslint, но и многие другие. На гитхабе на эту тему уже имеется чудесный проект awesome-eslint [9]. В последние дни я решил заняться изучением этой темы и хочу представить на ваш суд самое интересное, что было найдено, опробовано лично и внедрено в свой текущий проект, над которым я сейчас работаю.
Вы можете изучить самостоятельно вышеуказанный проект и найти интересные плагины для себя лично, я же напишу здесь то, что заинтересовало меня.
Плагин, предназначенный специально для Node.js-проектов. Думаю, многим может пригодиться, если они всё ещё не используют его у себя.
Данный плагин заставит вас "полюбить" Lodash и переписать большую часть нативных JS-методов на методы из Lodash, а также он содержит множество рекомендаций по написанию кода, использующего lodash-цепочки. В общем, очень интересно, но в наш проект я пока что внедрять это не стал просто в силу того, что сейчас нам придётся переписать слишком много кода для соответствия правилам этого плагина. Но на будущее я его себе взял на заметку.
Данный плагин позволяет прямо при разработке проверять совместимость написанного вами кода с текущими браузерами, на которые вы ориентируетесь в своём проекте в данный момент. В данный момент я не стал его подключать к своему проекту по причине того, что мы сейчас используем сервис polyfill.io [13], автоматически подключающий все необходимые полифилы к каждому индивидуальному браузеру, так что проблема совместимости кода в целом как-бы отсутствует. Но на будущее заметку себе тоже делаю: вдруг понадобится?
Плагин, который подскажет вам, как можно оптимизировать ваши регулярные выражения. Почему бы и не установить? Лишним не будет, подумал я.
Одна из самых интересных находок из этого списка дополнительных обвесов. Этот плагин содержит целый набор проверок, благодаря которым он находит плохо написанные участки кода, одинаковые функции и просто бессмысленные конструкции, и предлагает их переписать (жаль только, что сам ещё не умеет их переписывать :D). Если вы не любите заниматься декомпозицией своего кода на небольшие ясные блоки и пишете запутанные функции в 100+ строк — ждите предупреждений от данного плагина о том, что когнитивная сложность таких мест в проекте слишком высока для длительной поддержки и должна быть переписана.
Этот плагин просто будет ругаться на вас в те моменты, когда вы пожелаете писать стандартные циклы for
или while
. В наши дни уже давно принято использовать forEach
, map
, reduce
, и так далее. Я в целом согласен с автором и подключил плагин в свой проект.
Плагин, который запретит вам расширять прототипы стандартных JavaScript объектов. Скажем "нет!" монки-патчам. И это правильно.
Плагин, который поможет вам писать правильные промисы и защитит вас от типичных ошибок при работе с ними. Тоже очень даже полезно, я считаю.
Вот такой список плагинов в итоге получился. А что используете в своих проектах вы для проверки вашего кода?
В заключение оставлю пример конфигурации нашего файла .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
Нажмите здесь для печати.