Git Commit Hooks, linting and formatting the code with Prettier before committing it to GitHub using Husky.

Developers, in general, enjoy personalizing their codebases as much as possible. Some of us like to squeeze every gramme of performance out of our applications, while others prefer to have a stick to a certain set of rules, i.e.: tabs over spaces and so on. On the other hand, we have developers that just can’t be asked to do anything, they will get the job done regardless.

Ultimately, we can all agree that when it comes to collaborative projects there has to be a common denominator between those factors. We want to ensure the safety of our codebase whilst maintaining some coding standards.

In this guide, we will go over Git hooks, what they are and how we can embed them in our existing react applications. We will cover the implementation of a custom git commit hook on a react based project using eslint to ensure the safety of the codebase and prettier to format the files before committing them to the repository. This workflow will prevent users from committing by accident broken code or reformatting files with different rules that they have set up locally on their IDE.

This guide assumes existing knowledge of how to set up a react project, install and configure eslint and prettier.

According to the Git documentation, the Git Hooks are:

A way to fire off custom scripts when certain important actions occur. There are two groups of these hooks: client-side and server-side. Client-side hooks are triggered by operations such as committing and merging, while server-side hooks run on network operations such as receiving pushed commits. You can use these hooks for all sorts of reasons.

Let’s get started

Once you are done setting up your react application, configuring the eslint rules and prettier rules we can move on to installing Husky.

This is how my configuration files for them looks like:

• .eslintrc.json

{
	"extends": ["next", "next/core-web-vitals", "eslint:recommended", "prettier"],
	"rules": {
		"@next/next/no-img-element": "off"
	}
}

• .prettierrc.js

module.exports = {
	trailingComma: "es5",
	tabWidth: 2,
	semi: true,
	singleQuote: false,
	arrowParens: "always",
	useTabs: true,
	bracketSpacing: true,
};

To move on we first need to install Husky

yarn add -D husky

Once done add the following command to your package.json scripts:

"prepare":"husky install"

Then run it:

yarn prepare

This should generate a folder structure similar to this:

Now its time to create our pre-commit command:

yarn husky add .husky/pre-commit "echo Welcome to the Cutieverse!"

This will generate a new file inside the .husky directory that will take hold of the pre-commit hook, which in our case just echoes Welcome to the Cutieverse!

To give it a test simply add the changes and make a commit. It should look something similar to this at the end.

Now, all we need to do is to define our pre-commit command and replace it with the echo Welcome to the Cutieverse inside our .husky/pre-commit file.

This is how mypackage.json looks at the end:

"scripts": {
		"lint": "next lint",
		"format": "prettier --ignore-unknown --write .",
		"prepare": "husky install",
		"precommit": "yarn lint && yarn format && git add -A ."
	},

First I want to lint the code then format it. Lastly, as you’ve already noticed I added the git add -A . command at the end of my precommit.

The problem

This is just a way around that I’ve found because normally when you push something to GitHub you add the files with git add ...

After that, you’d commit your changes, but you see here’s the problem. The GitHub hook formats and lints the code just after it was added already to be committed. It will only format and lint after that.

Conclusion

In conclusion, you can either keep the && git add -A . at the end of the precommit script and always make sure of the changes you made, since this solution will automatically add to the commit all the files within the codebase that suffered modifications or lint and format manually before every commit.

Ultimately I hope you’ve got a taste of what Git hooks are, what they can be used for.