my avatar Bahaa Zidan

Husky: Easy Commit Hooks With One Tool

Husky: Easy Commit Hooks With One Tool hero image

Explaining constraints is more simple and sustainable compared to teaching best practices. One of the greatest tools for that is pre-commit hooks. Basically running a few scripts before commiting. If any of the scripts exits with an error, you prevent the user from committing. Husky is the simplest way to implement this. All you need is install Husky and then run one command.

pnpm add -D husky
 
pnpx husky init

This will create a pre-commit script in .husky/ and update the prepare script in package.json. By default the hook only contains pnpm test but I like to add more checks to it. I like to run the formatter (Prettier) and linter (ESLint). I also like to run the TypeScript and Svelte compilers to make sure everything compiles correctly.

package.json
{
	"name": "something",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"prepare": "husky",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"format": "prettier --write .",
		"lint": "prettier --check . && eslint .",
		"codegen:swagger": "node --experimental-strip-types ./scripts/codegen-swagger.ts",
		"db:push": "drizzle-kit push",
		"db:migrate": "drizzle-kit migrate",
		"db:studio": "drizzle-kit studio"
	},
	"devDependencies": {
		"husky": "^9.1.7"
	}
}
.husky/pre-commit
pnpm check && pnpm lint

You can do a lot more with Husky. But that's it for today's showcase.