React.js, Angular та Node.js проєкти: інтеграція з Husky

pic

Привіт, друзі! У цьому пості ми розглянемо Husky, який дозволяє виконувати різні скрипти у JavaScript проектах. Що таке Husky? Husky працює в інтеграції з системою контролю версій Git, відстежуючи певні хуки і даючи змогу перевіряти код до його коміту. Ви можете налаштувати ці перевірки на свій розсуд (наприклад, для перевірки структури синтаксису та відступів використовувати Prettier, для перевірки якості коду — Lint, для юніт-тестів — Jest, Karma тощо; це повністю на ваш розсуд). Ось як встановити та налаштувати Husky:

npx husky-init && npm install # npm  
npx husky-init && yarn # Yarn 1  
yarn dlx husky-init --yarn2 && yarn # Yarn 2+

Після виконання вищевказаних команд у вашому проекті з'явиться папка .husky, в якій будуть файли commit-msg і pre-commit. Ці файли містять скрипти, які будуть виконуватися в рамках Husky. Щоб налаштувати їх, виконайте такі кроки:

#!/usr/bin/env sh  
. "$(dirname -- "$0")/_/husky.sh"  

npm test

У вищезазначений файл pre-commit додано тестовий скрипт. В цей файл також можна додавати інші скрипти, залежно від потреб вашого проєкту (ng test, npx prettier, npm run lint і т.д.). Таким чином, перед комітом можуть виконуватися різні перевірки, що підвищить якість розробки. Це особливо корисно під час code review, оскільки процес стає більш зручним і автоматизованим.

Якщо ви хочете встановити все вручну:

По-перше, встановіть Husky за допомогою команди npm install:

npm install husky --save-dev

Після встановлення Husky, щоб активувати git хуки, скористайтеся командою:

npx husky install

Коли все налаштовано, приклад файлу pre-commit для проекту на Angular виглядатиме так:

npx lint-staged  
npm run lint  
npm run test

Як ви можете бачити, перед виконанням git commit будуть запускатися зазначені команди. Якщо одна з команд не виконається правильно, коміт буде заблоковано.

Якщо повідомлення комітів містять неінформативні коментарі (типу "test", "backup", "demo 123" і т.п.), ви можете зробити їх більш змістовними за допомогою файлу commit-msg. Ось як його можна налаштувати:

#!/usr/bin/env sh  
. "$(dirname -- "$0")/_/husky.sh"  

COMMIT_MSG_FILE=$1  
COMMIT_MSG=$(cat $COMMIT_MSG_FILE)  

if ! echo "$COMMIT_MSG" | grep -qE "[A-Z]+-[0-9]+"; then  
 echo "ERROR: Commit message must include a valid Jira ID (e.g., PROJECT-123)." >&2  
 exit 1  
fi

Таким чином, ми перевіряємо повідомлення коміту та створюємо regex для перевірки комітів:

npm install @commitlint/config-conventional @commitlint/cli -D

Ця команда встановить script commitlint, який дозволяє генерувати regex для перевірки комітів. Після її виконання у кореневій директорії проекту буде створено файл .commitlintrc.json, в який потрібно додати такі правила:

{  
 "extends": ["@commitlint/config-conventional"],  
 "rules": {  
 "type-enum": [2, "always", ["ci", "chore", "docs", "ticket","feat", "fix", "perf", "refactor", "revert", "style"]],  
 "subject-max-length": [2, "always", 100]  
 }  
}

Таким чином, ваше повідомлення коміту має виглядати, наприклад, так:

feat/fix/feature ….опис…. #taskId

Дякую за увагу!

Перекладено з: React.js, Angular ve Node.js Projelerinde Husky Entegrasyonu

Leave a Reply

Your email address will not be published. Required fields are marked *