Git Hooks in JavaScript Projects. The hooks I regret not knowing earlier | by Oyster Lee | Oct, 2022

0
23

The hooks I regret not knowing earlier

Photo by Roman Synkevych πŸ‡ΊπŸ‡¦ on Unsplash

Git hooks will fire off the custom scripts automatically when a particular event has occurred in the Git repository. There are two groups of hooks, which are client-side and server-side.

You can check out this link for the complete documentation for Git hooks, but in this article, I will cover pre-commit and pre-push only. You can either write your own script from scratch or check this GitHub repo for the ready tools. For me, I prefer Husky. Woof! Woof!

Can you imagine many developers working on a project and everyone has their code style? Yes, I know there are tools called ESLint, Prettierand Stylelintbut how can you ensure everyone has installed it with their IDE or run the command manually?

Your project might have integrated Sentry, and you must update the release from a major to a minor version. Humans make mistakes; we can’t guarantee we will never forget to update the Sentry release before pushing the commits.

Since we need both pre-commit and pre-push hooks, our choices left Husky and Lefthook. Husky got a more simple configuration compared to Lefthook. Then, we need help from lint-staged to force everyone to follow the standard before committing their code to the repository; Locate the Sentry release line, and replace it with the correct version in pre-push

Installation

npm i -D husky lint-staged
// or
pnpm i -D husky lint-staged
// or
yarn add husky lint-staged -D

Enable Git hooks

npx husky install

To make sure every developer in the project has their Git hooks enabled. Do this in your package.jsonwhich will auto-enable husky whenever you run npm install locally.

// package.json

"scripts":
"prepare": "husky install"

Add the snippet below to package.json:

// package.json

"lint-staged":
"*.js,vue": "eslint --cache --fix"

The snippet above can be understood as follows: Whenever a file with js or vue extension was staged, it will run the command eslint --cache --fix. This will try to fix the ESLint issue whenever possible. Otherwise, it will return error(s), and you will have to fix it before committing it again.

Create a file at .husky/pre-commit

#!/bin/sh
.
"$(dirname "$0")/_/husky.sh"
npx lint-staged

When you run git committhe command npx lint-staged will run before committing successfully.

We need a custom script to update the Sentry release before pushing.

The Sentry release is in the vite.config.js so the script will locate the line where the keyword of release: and replace it with the correct release name.

Add the snippet below to package.json

// package.json

"scripts":
"prepush": "node scripts/update-sentry-release.js"

And create a file .husky/pre-push with the snippet below

#!/bin/sh
.
"$(dirname "$0")/_/husky.sh"
npm run prepush

That’s it!

lint-staged will throw an error when you try to commit a lot of staged files in Windows. Check the open issue here.

The custom script update-sentry-release only works when there is no line break.

When someone bypasses Git hooks and you merge their commits, you will have to fix their linter errors.

Thanks for reading. Stay tuned for more.

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here