The hooks I regret not knowing earlier
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-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-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
npm i -D husky lint-staged
pnpm i -D husky lint-staged
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.
"prepare": "husky install"
Add the snippet below to
"*.js,vue": "eslint --cache --fix"
The snippet above can be understood as follows: Whenever a file with
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
. "$(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
"prepush": "node scripts/update-sentry-release.js"
And create a file
.husky/pre-push with the snippet below
. "$(dirname "$0")/_/husky.sh"npm run prepush
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.