When you are working on a project with multiple developers, you always have the issue of formatting the code as some work on VSCode and some on WebStorm, some have configured auto formatting while others don’t, some people have configured their tab size to be 4 while others have 2. This leads to unnecessary conflicts while rebasing the code and creates a mess. So, we had to find a solution which works for all despite the code editor.

We’ll be doing formatting with prettier before committing the code to Git. This is a general solution irrespective of the editor. Let’s see how we can configure our project to make that possible.

First of all, git provides us with hooks. But, what are hooks now?

Git hooks are scripts that run automatically every time a particular event occurs in a Git repository. They let you customize Git’s internal behaviour and trigger customizable actions at key points in the development life cycle.

A full list of the available hooks can be found here Types of Git Hooks.

You can also check the hooks inside your git project by going into the hidden .git/hooks directory. It will show you these results with .sample at the end.

These represent most of the available hooks, but the .sample extension prevents them from executing by default. To “install” a hook, all you have to do is remove the .sample extension. Or, if you’re writing a new script from scratch, you can simply add a new file matching one of the above filenames, minus the .sample extension.

We will be using the pre-commit hook to auto-format our code before a commit takes place. We can configure and write hooks in these files, but it’s a cumbersome task. So, we’ll be using an easy way out Husky. Husky makes it possible to use githooks as if they are npm scripts and configurable from your package.json.

Let’s start by installing husky.

npm install --save-dev husky@4

Let’s install lint-staged now.lint-staged allows us to run scripts on staged files in git. You can read more about it here.

npm install --save-dev lint-staged

Now, we will be using prettierto auto-format our code. Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the Prettier’s GitHub page for more information, and look at this page to see it in action.

npm install -save-dev prettier

Now we can make sure every file is formatted correctly by adding a few lines to the package.json in the project root.

Add the following field to the package.json section:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "prettier --write"
  ]
}

What’s happening here:

The husky object is used to specify which hook to use, and that lint-staged is to be ran on it.
The lint-staged object is used to search for staged files that match the pattern in its key. An array of commands is then run against those files.

Now, whenever you make a commit, Prettier will format the changed files automatically. Whenever you make a commit, you will see these lines your terminal, which ensures that we did it right.

Husky Requires Node >= 10 and Git >= 2.13.0. Make sure your versions requirements are fulfilled.

As I am using a project created with create-react-app, it already has eslint configured by default. You can always choose to modify to those settings if you want to follow some other style guides and configure them accordingly in your project. You just have to change the lint command executed at last and replace that with eslint --fix or any other relevant command which you need. And you can use this for any other task, not just linting, it can be a command to run all your unit test cases or any other task.

Liked my work? Buy me a coffee.