Husky и lint-staged

Husky и lint-staged — это инструменты, которые позволяют улучшить процесс разработки и тестирования в проекте на JavaScript, особенно в контексте использования React Testing Library. Эти инструменты помогают автоматизировать задачи, связанные с проверкой качества кода, запуском тестов и другими процессами, с которыми сталкивается разработчик при взаимодействии с системой контроля версий Git.

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

Установка Husky

Для начала нужно установить Husky как зависимость проекта. Это можно сделать с помощью менеджера пакетов npm или yarn:

npm install husky --save-dev

Или, если используется yarn:

yarn add husky --dev

После установки Husky, необходимо инициализировать его в проекте:

npx husky install

Этот шаг создаст директорию .husky в корне проекта, где будут храниться все конфигурации хуков.

Настройка хуков

Чтобы настроить хуки, нужно создать соответствующие файлы в папке .husky. Например, чтобы запустить линтер перед каждым коммитом, можно создать хук pre-commit:

npx husky add .husky/pre-commit "npm run lint"

Этот хук будет вызывать команду npm run lint каждый раз, когда разработчик пытается совершить коммит. Если линтер находит ошибки в коде, коммит не будет выполнен, и разработчик должен будет их исправить.

Можно добавлять и другие хуки, такие как pre-push, commit-msg и т.д. Например, для запуска тестов перед пушем:

npx husky add .husky/pre-push "npm test"

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

Преимущества Husky

  • Автоматизация проверок. С помощью Husky можно настроить выполнение различных операций перед важными действиями (коммит, пуш), что позволяет избежать ошибок и пропуска важных шагов.
  • Упрощение работы в команде. Все разработчики будут использовать одинаковые хуки, что исключает случайные ошибки из-за человеческого фактора.
  • Гибкость. Husky позволяет настроить большое количество хуков с разными действиями для разных этапов работы с Git.

lint-staged

lint-staged — это инструмент, который позволяет запускать линтеры и другие скрипты только на изменённых файлах. Он особенно полезен в связке с Husky, поскольку позволяет запускать линтеры только на тех файлах, которые были изменены и добавлены в индекс перед коммитом. Это ускоряет проверку и минимизирует затраты на выполнение линтеров.

Установка lint-staged

lint-staged устанавливается также через npm или yarn:

npm install lint-staged --save-dev

Или:

yarn add lint-staged --dev

После этого необходимо настроить его в package.json или в отдельном конфигурационном файле. Для настройки через package.json, нужно добавить следующие строки:

"lint-staged": {
  "*.js": "eslint --fix",
  "*.tsx": "eslint --fix"
}

Это означает, что для всех изменённых файлов с расширением .js и .tsx будет автоматически запускаться команду eslint --fix, которая исправляет возможные ошибки в коде.

Интеграция с Husky

После установки lint-staged нужно интегрировать его с Husky, чтобы линтинг выполнялся только на изменённых файлах перед коммитом. Для этого нужно отредактировать файл .husky/pre-commit и добавить команду для lint-staged:

npx husky add .husky/pre-commit "npx lint-staged"

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

Преимущества lint-staged

  • Ускорение работы. lint-staged проверяет только изменённые файлы, что значительно ускоряет работу по сравнению с полным линтингом всего проекта.
  • Минимизация ошибок. Запуск линтера только на изменённых файлах позволяет быстрее обнаружить ошибки, связанные с новым кодом, без излишней нагрузки.
  • Простота настройки. Конфигурация lint-staged проста и интуитивно понятна, что делает его отличным выбором для команд, которые хотят автоматизировать процесс проверки качества кода.

Совмещение Husky и lint-staged

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

Пример полной настройки, где Husky запускает lint-staged перед коммитом:

  1. Установить Husky и lint-staged:

    npm install husky lint-staged --save-dev

  2. Инициализировать Husky:

    npx husky install

  3. Добавить хук pre-commit:

    npx husky add .husky/pre-commit "npx lint-staged"

  4. Добавить конфигурацию lint-staged в package.json:

    "lint-staged": {
  "*.js": "eslint --fix",
  "*.tsx": "eslint --fix"
}

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

Вывод

Использование Husky и lint-staged позволяет эффективно автоматизировать важные процессы, связанные с качеством кода и проверкой тестов, в проекте на React или любом другом JavaScript проекте. Эти инструменты значительно упрощают поддержку чистоты кода, минимизируют вероятность ошибок и помогают улучшить процесс работы с Git.

Оглавление