Меню Закрити

Використання Git хуків Pre-Commit і Pre-Push у проекті React

Дуже часто розробники не перевіряють свій код і не проганяють тести перед тим, як зробити git push або git commit. Щоб запобігти цьому в екосистемі npm був створений пакет husky. Він запобігає виконанню комітів і пушів, якщо лінтер і тестове середовище повернуть помилки. Коротко розглянемо використання цього пакету у зв’язці з проектом React.

Примітка: репозиторій для даного матеріалу можна знайти тут.

Налаштування з нуля

Налаштування цього додатку є досить тривіальним:

create-react-app fun-with-git-hooks
cd fun-with-git-hooks

Далі треба встановити пакет husky. Оскільки він потрібен тільки в середовищі dev, встановіть його лише там:

npm install husky --save-dev

Необхідно додати ще один пакет в dev-середовище, який називається cross-env. Він дозволить налаштувати змінну середовища CI в будь-якому середовищі, в якому ми зараз перебуваємо.

npm install cross-env --save-dev

Нарешті, давайте зробимо деякі зміни в наш файл package.json для того, щоб:

  • переналаштувати пакет для тестів jest, щоб працювати в режимі безперервної інтеграції (інакше, запуск команди npm test зависне);
  • додати команду лінтера (не треба окремо встановлювати eslint, оскільки він додався при виконанні команди create-react-app)
  • налаштувати наші husky для першої перевірки.
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "cross-env CI=true react-scripts test --env=jsdom",
  "eject": "react-scripts eject",
  "lint": "eslint src"
},
"husky": {
  "hooks": {
    "pre-commit": "npm run lint && npm test",
    "pre-push": "npm run lint && npm test"
  }
}

 

От і все! Тепер, коли ви спробуєте виконати git push або git commit з кодом, який не проходить тести або перевірки лінтера, у вас нічого не вийде.

 

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.

1+

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: