Як додати гачки комітів до Git за допомогою Husky для автоматизації завдань коду

Існує багато інструментів для автоматизації наших кодових завдань. Ми можемо перевірити наявність проблем із синтаксисом ESLint та відформатувати наш код за допомогою Prettier.

Але не всі в команді пам’ятатимуть виконувати ці команди кожного разу, коли вони виконують їх. Як ми можемо використовувати Husky для додавання гачків Git, щоб запускати їх для нас?

  • Що таке Git Hooks?
  • Що таке хаскі?
  • Що ми будемо будувати?
  • Крок 0: Налаштування нового проекту
  • Крок 1: Встановлення Husky до проекту
  • Крок 2: Налаштування Husky для запуску гачків Git
  • Крок 3: Використання Husky для форматування коду за допомогою Prettier

Що таке Git Hooks?

Git хуки - це сценарії, які ви можете налаштувати для запуску під час певних подій у життєвому циклі Git. Ці події включають різні етапи фіксації, наприклад, перед фіксацією (перед фіксацією) та після фіксації (після фіксації).

Вони корисні тим, що дозволяють розробникам запускати власні завдання коду або навіть застосовувати стандарти, автоматизуючи інші сценарії для їх виконання.

Що таке хаскі?

Husky - це інструмент, який дозволяє нам легко перебивати гачки Git і запускати потрібні нам сценарії на цих етапах.

Це працює, включаючи об’єкт прямо у нашому package.jsonфайлі, який налаштовує Husky на запуск вказаних нами сценаріїв. Після цього Хаскі обробляє управління, в який момент життєвого циклу Git запускатимуться наші скрипти.

Що ми будемо будувати?

Ми збираємося створити простий проект, який ми можемо використовувати для тестування Git-хуків.

Хоча ви повинні мати можливість слідувати за будь-яким проектом, з яким ви працюєте, я буду використовувати Next.js як вихідну точку для цього проекту, просто для того, що ми можемо запустити одну команду, щоб отримати проект розпочато.

Однак одним з міркувань щодо подальшого використання цього проекту є те, що ми використаємо Prettier як приклад того, що ви можете зробити з хуками Git.

Prettier - це інструмент, який автоматично відформатує для нас наш код, який, якщо ви не очікуєте, що це станеться, може викликати сильний стрес. Слідуючи за мною, використання проекту Next.js дозволить вам перевірити це, не вносячи будь-яких ненавмисних змін.

Щодо тестування хуків Git, ми почнемо з додавання простої командної команди, щоб побачити роботу Husky. Але ми також протестуємо додавання Prettier, яке автоматично відформатує для нас наш код.

Нарешті, на момент написання цього матеріалу, Husky випустив версію v5 Alpha свого рішення Git hook. Враховуючи, що це все ще лише версія Alpha, ми збираємося рухатися вперед з v4, що дозволяє нам легко встановити Husky з npm.

Крок 0: Як створити новий проект

Як я вже згадував, ви дійсно можете виконати ті самі кроки тут із будь-яким проектом, яким керується за допомогою package.jsonфайлу.

Next.js абсолютно непосильний для цього покрокового керівництва, але мета - мінімізувати кроки для налаштування на справжню роботу з Husky.

Щоб розпочати роботу з Next.js, перейдіть до каталогу, в якому потрібно запустити проект, і запустіть наступне:

yarn create next-app my-husky-project # or npx create-next-app my-husky-project 

Примітка: сміливо замінюйте my-husky-projectте, що хочете назвати своїм каталогом.

Це створить нову папку, створить новий проект Next.js та встановить усі залежності.

Після цього перейдіть до нової папки, і ми повинні бути готові до роботи!

Слідуйте разом із комітом.

Крок 1: Як встановити Husky до проекту

Щоб встановити Husky, ми можемо використовувати пряжу або npm.

yarn add husky # or npm install husky 

Примітка: якщо встановлення Husky на цьому етапі встановлює v5, це означає, що v5 був офіційно випущений. Будь ласка, перегляньте оновлену документацію Husky, або ви можете встановити останню версію v4, вказавши [email protected] (або будь-яку останню версію) під час встановлення.

Після завершення встановлення пакету ми повинні бути готові піти з Husky.

Слідуйте разом із комітом.

Крок 2: Як налаштувати Husky на запуск хуків Git

Далі ми збираємося створити Husky, щоб ми могли використовувати його для наших хуків Git.

Всередині нашого package.jsonфайлу створіть нову властивість, що називається huskyпорожнім об’єктом.

"husky": {},

Ви можете додати це дійсно куди завгодно у package.jsonфайл, але я збираюся додати його прямо під scripts  властивістю, щоб я міг легше керувати ними разом.

Всередині цього ми хочемо додати ще одну властивість, hooksяка також називається порожнім об'єктом:

"husky": { "hooks": {} }, 

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

Щоб перевірити це, я створив нову гілку, куди буквально додав кожен гак Git з цієї сторінки, включаючи скрипт, який просто пише в термінал [Husky] event name.

Примітка: не відчувайте, що вам потрібно це робити, якщо вам не цікаво. Мета - на своєму прикладі показати вам, як це працює.

“husky”: { “hooks”: { “applypatch-msg”: “echo \”[Husky] applypatch-msg\””, “pre-applypatch”: “echo \”[Husky] pre-applypatch\””, “post-applypatch”: “echo \”[Husky] post-applypatch\””, “pre-commit”: “echo \”[Husky] pre-commit\””, 

Що це буде робити, це сказати Хаскі, що на кожному етапі, де нам дозволено підключатися до Git, повідомте нам!

Коли я здійснюю цю зміну, ми можемо відразу побачити, що Хаскі звільняє деякі наші сценарії.

These are all of the events that Git allows us to hook into that happen during the commit process.

And similarly, if I push those changes out to Github, I can see that the push process runs the pre-push hook!

You may never use most of the hooks that Husky and Git provide (we only saw a few between those two commands).

But it’s awesome to be able to see how powerful this can be, whether it’s running code that formats our code, prevents secret access keys from being committed, or really anything else that can help automate important tasks to your workflow.

We can now see that we can configure Husky by specifying the configuration and the hooks right in our package.json.

Follow along with the commit.

Note: If you want to check out my branch that includes every Git hook to test with, you can find it on Github.

Step 3: How to use Husky to format code with Prettier

Finally, for a real-world use case, we’re going to test out using Prettier to automatically format our code.

Prettier is an opinionated code formatting tool that allows you to easily clean up your code to make it look like a single person wrote it.

Why are tools like Prettier important? When working through code, especially with a team, it’s important to maintain consistency so everyone knows what to expect. It will help prevent arguing over a semi-colon in a code review, but it will also help catch syntax errors and prevent bugs.

Warning: running Prettier will automatically format all of your code. While we’re going to test this out before committing the changes, once you apply this as a Git Hook, it will automate this process.

To get started with Prettier, let’s install it with our package manager:

yarn add prettier -D # or npm install prettier --save-dev 

Note: we’re installing Prettier as a devDependency as our application doesn’t need this to run.

Next, we can add a new script in our package.json that will make it easier to run Prettier to test this out.

Inside the scripts property, add:

"lint": "prettier --check ." 

For this first test, we’re going to run it as a “check” which will allow us to see which files would change.

Run the following:

yarn lint # or npm run lint 

And once we do, we can see that Prettier is telling us that would change the files listed.

At this point, our code will remain unchanged. But if we want to run Prettier for real to make those changes, we can first add an additional script:

"format": "prettier --write ." 

And if we run that script, it will update all of those files to format the code to Prettier’s specification.

Warning: just another note, running Prettier to write the changes will make changes in your files. These are all code-style changes that shouldn’t impact how the code runs, but how the code looks. Before running format, you should save any changes by committing with Git so that you can easily revert the changes if you’re not happy with them.

You can now run the script with:

yarn format 

And we can see that Prettier updated our files!

Now the part that’s relevant to this walkthrough: we can add this as a Git hook. This way, when someone tries to commit code, Prettier is run before the code is saved. This means that we’ll always keep code consistent with Prettier’s formatting style.

Inside our Husky hooks configuration, let’s add:

"husky": { "hooks": { "pre-commit": "prettier --write . && git add -A ." } }, 

If you notice in our pre-commit hook, we’re also adding git add -A ..

When Husky runs, it simply runs the script provided. When running our Prettier command, we’re only formatting the code, but we never save those changes as part of the process. So we use git add to store all of those changes and include them in the commit.

To test this out, I reverted the changes to all of the files that were formatted before. If you’re following along with the same project, you can run:

git checkout pages 

Which will reset all of the changes in pages to the last commit.

Now, let’s try to add all of our files with Git and commit the changes.

And once we run our commit command, we can see that the Husky pre-commit hook kicks in already and formats our code!

Follow along with the commit.

What can I do next?

Use lint-staged to only run formatting on changed files

We’re using Prettier right in our pre-commit hook and specifying . which means it’s going to run on all files every time.

We can use a tool called lint-staged, which allows us to still run our Git hooks with Husky, but it will only run on files that are staged.

For instance, if we wanted to do this with Husky and Prettier, our configuration might look like:

"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*": "prettier --write" }, 

As part of how lint-staged runs, it will attach the changed files to the end of our Prettier statement automatically for us.

You’ll also notice we didn't include git add. lint-staged will also add any changes to Git for us automatically.

Set up a Prettier config to customize formatting rules

Prettier is very opinionated. There are some things I personally don’t prefer and you might feel the same.

Luckily, Prettier allows you to set up a configuration file that can override some of those files to make your code just the way you and your team want it.

Tell Prettier to ignore files with .prettierignore

You also probably don’t want Prettier running on “all the things” (maybe you do).

Prettier allows you to set up a .prettierignore  file right inside of the root of the project next to package.json, similar to .gitignore, that allows you to tell Prettier what files it should not run on.

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ? Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter
  • ? Sponsor Me