Использование Husky для создания отличного рабочего процесса с git

К чему это все?

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

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

Первая библиотека, ориентированная на автоматизацию рабочего процесса, - Husky - потому что лай собаки привлекает мое внимание. Husky - это библиотека JavaScript, которая упрощает перехват Git. Он предлагает возможность интеграции их непосредственно в наши проекты JavaScript, избавляя нас от необходимости иметь дело с инструкциями по запуску или сценариями запуска при инициализации репозитория.

Использовать Husky действительно просто. Нам просто нужно добавить новый husky ключ в package.json файл. Эта новая запись содержит объект «ключ / значение» hooks, который представляет наши хуки Git, и скрипт, который мы хотим выполнить:

Разъяснение наших потребностей

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

  • Prettier для файлов JS, JSX, JSON, CSS и MD, чтобы отформатировать мой код во что-то согласованное между разработчиками.
  • Eslint с конфигурацией Airbnb, чтобы предложить надежный линтинг моих приложений. Однако я отдаю приоритет правилам Prettier с eslint-config-prettier.
  • Шутка, для юнит-тестов моих приложений.
  • Stylelint, чтобы мои модули CSS были чистыми.

К сожалению, Husky поддерживает выполнение только одной команды за раз для каждого типа ловушки Git.

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

К счастью, уже есть отличный инструмент, который поможет мне в этом: lint-staged.

lint-staged - это круто, потому что он выполняет необходимые сценарии только для измененных файлов, что заставляет хуки работать очень быстро. Благодаря lint-staged теперь мы можем запускать очень быстрый рабочий процесс на этапе дельта-фиксации, что значительно сокращает обычную продолжительность всех скриптов.

Как и Husky, lint-staged - это новый объект типа ключ / значение в нашем package.json файле, который представляет сценарии для выполнения.

Теперь все выглядит так просто. Мне просто нужно сказать Husky использовать lint-staged и указать lint-staged, что мне нужно делать с моими файлами.

Окончательный результат

Собираем все вместе, вот как выглядит мой package.json файл:

Когда я совершаю коммит, мои хуки делают следующее:

  • Для моих файлов CSS запустите Prettier, затем запустите Stylelint, а затем автоматически добавьте обновления в промежуточную область Git.
  • Для моих файлов JS и JSX найдите и выполните тесты, связанные с моими изменениями, затем запустите Prettier, затем Eslint и, наконец, автоматически добавьте обновления в промежуточную область Git.
  • Для моих файлов MD и JSON запустите Prettier и автоматически добавьте обновления в промежуточную область Git.

И вот мы здесь, больше не возимся с нашими коммитами. 💪

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

Бонус

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

Итак, сначала установите необходимые пакеты:

yarn add --dev cross-env enzyme enzyme-adapter-react-16 eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks husky jest-enzyme lint-staged prettier stylelint stylelint-config-css-modules stylelint-config-prettier stylelint-config-recommended stylelint-order stylelint-prettier

Затем добавьте файлы конфигурации:

И мы в порядке!