Tooling for boosting your development workflow

Vinh Le
Vinh Le
Sep 4, 2019 Β· 3 min read
Photo by SpaceX on Unsplash

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:

  • Husky allows us to specify which script to 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

Step 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 lint will run script that we already had within scripts block. It checks for linting by tslint. If you do not use TypeScript, you probably want to run eslint here.
  • npm run format will 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-staged and 🐢 husky are 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 🏎

Thanks for reading this blog! And stay tuned for upcoming ones 🀩

✍️ Written by

Vinh Le @vinhle95


A hustler, lifelong learner, tech lover & software developer

Say Hello πŸ‘‹ on

βœ… Github

βœ… LinkedIn

βœ… Medium

βœ… LinkedIn

Shot code

where coding shots are served

Vinh Le

Written by

Vinh Le

A hustler, lifelong learner, tech lover & software developer @vinhle95; πŸ‘¨πŸ»β€πŸ’»πŸ’ͺπŸ”₯🎾

Shot code

Shot code

where coding shots are served

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium β€” and support writers while you’re at it. Just $5/month. Upgrade