Automate Linting & Formatting with Husky and lint-staged
How to lint and format your code auto-magically
In one of the previous posts, we looked at how we can setup ESLint and Prettier. If you have not already done that, be sure to set it up. It just takes a few minutes.
Once you are done with the setup of ESLint and Prettier, this should give you a good system to ensure “clean coding” in your projects.
What do I mean by that?
This means that we are able to enforce a level of standardisation on the code, starting with the basics such as how many spaces we are using for indenting, are there dangling commas etc, to the more nuanced points such as ensuring no unnecessary or unused variables have been declared.
Now, we can take it a step forward by automating the process of linting, prettifying and fixing it when we add new commits.
For this, we will be using 2 different tools - Husky and lint-staged.
Husky
Husky helps us to set up Git hooks in our project. For example, we want some actions to take place before we add a commit, or after adding a commit.
Husky can help us simplify this setting up of hooks.
To learn more about Git hooks, check out the following:
Like many other Version Control Systems, Git has 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.
For our use-case, we will be use the client-side hooks which runs locally on your device when you perform a commit action.
lint-staged
As you might have already guessed from the name, lint-staged helps us to run linting on staged files.
To understand what are staged files, you might want to read a little more on Git:
Staged means that you have marked a modified file in its current version to go into your next commit snapshot. Committed means that the data is safely stored in your local database.
Setting Up
Now to the juicy part to set all of this up! You will surprised how quick this can be.
Note that we will be installing both Husky and lint-staged as dev dependencies, as we don’t need these for our program to run. It is more to ensure development efficiency.
Install lint-staged
To install lint-staged, we simply run:
yarn add lint-staged -D
Or if you are using npm, run
npm install lint-staged --save-dev
Setup lint-staged
Now we will go ahead and add the following into our package.json file:
"lint-staged": {
"*.{ts,tsx,js,jsx}": "eslint --fix",
"*.{json,md,html,css,scss,js,jsx,ts,tsx}": "prettier --write"
}
This will ensure that we run the above commands on the specified file extensions. So we run `eslint --fix
` on files ending with `.ts`, `.tsx`, .`js` and `.jsx`
. Note that the `--fix`
flag at the end will automatically fix the errors (if possible) and then commit them.
Similarly, we run `prettier —-write`
on a range of files.
Of course, at this point, you can modify the above to run your own scripts etc. For example, if your project does not use TypeScript, then you will not need to add the `.ts` and .tsx` file extensions.
Install Husky
To install husky, we simply run:
yarn add husky -D
Or if you are using npm, run:
npm install husky --save-dev
Setup Husky
Next, we set up husky by running the following 2 commands in the root of your project:
npm pkg set scripts.prepare="husky install"
npm run prepare
Adding pre-commit hooks
Finally, we need to link both lint-staged and husky together by adding a pre-commit Git hook.
Before we commit our changes (hence called pre-commit), this command `lint-staged
` will run on the staged files.
npx husky add .husky/pre-commit "npx lint-staged"
git add .husky/pre-commit
git commit -m "Adding husky pre-commit"
If there are any un-fixable lint errors which requires manual input, the commit will fail.
This level of strictness ensures that only clean code can be committed which is surely beneficial in the long run!
Conclusion
And that’s all folks! In just a few minutes you have understood the concepts of Git hooks and how we can use it to automate our code linting and formatting.
Now, every time you commit code, you can be at peace knowing it will auto-format and fix any lint issues.
Cheers & Happy Coding! 👨🏼💻