Part 2: Running pre-commit checks with 🚫💩 Link-staged and 🐶 Husky
In the first-part of this Tooling series, we got a hang out of why code formatting is important and how Prettier makes it easier than ever. In this second part of the series, let’s go through how to customise Git Hooks to run linting and formatting. Let’s dive right in!
Git Hooks and Pre-commit hook
In a nutshell, Git Hooks are custom actions that Git allows us to run at specific points of time. In committing process, the pre-commit hook runs first, before your changes are committed. This is a perfect time where we can check for linting and format our code. After that, all new committed changes will meet all linting rules and follow common coding style. This is ideal for our development workflow for 2 primary reasons:
- Our code is less error-prone as linting helps us to identify potential bugs from our common mistakes 🐛
- New feature and changes always follow our team’s common coding styles. This frees our mind from presentational difference and allows us to focus on business logic.
Essentially, what we should do is to add scripts and tell Git to fires them in pre-commit hook. If new changes do not meet linting or formatting rules, pre-commit check will fail and changes will not be committed. However, in cases that we want to bypass this, such as adding an exceptional console.log, we can use --no-verify:
git commit -am "I need to workaround this time, nothing will break I promise" --no-verify- Husky allows us to specify which
scriptto run in a Git hook. - Lint-staged helps us to run particular commands for specific files based on their extensions. More importantly, these commands will be fired off on staging files only, not all files in the project. Thus, it is fast as you only want to lint/format files that are going to be committed.
Coding time 👨🏻💻🔥
Step 1: Install dependencies
Let’s first install lint-staged and husky as dev-dependencies
npm install --save-dev lint-staged husky
or
yarn add -D lint-staged huskyStep 2: Add script in pre-commit check
Let’s configure Husky in package.json file:
The command that we want to run has 2 parts. Let’s add them in package.json as well:
What is happening? The first command that we specified in pre-commit hook is lint-staged. In here, we have 2 jobs to do:
- Specify extensions of changed files that we want to run the script.
- Write the actual script.
npm run lintwill run script that we already had withinscriptsblock. It checks for linting bytslint. If you do not use TypeScript, you probably want to runeslinthere.npm run formatwill format all changed files' code based on Prettier rules.
This pre-commit check will success and use git add to add all changed files to staging and ready to be committed if there are no linting errors:
If something goes wrong, the check will fail and changes will not be allowed to commit, which is awesome:
Key takeaways 🚀
- Bad codes suck. So don’t let them sneak in your project at any moment.
🚫💩 lint-stagedand🐶 huskyare great tools that help us to do such prevention. We configure them to run specific commands, most likely linting and code formatting.- Combining with Prettier, we have a perfect combo for our workflow 🏎
