Enforcing coding standards using husky pre-commit hooks

Having consistency and enforcing coding standards becomes very important as an application scales. It becomes important to automate the process to ensure quality standards and make the application maintainable. ESLint and Prettier can be used to define these standards, but we need a tool to enforce them as well. Husky provides that functionality by providing pre-commit git hooks which can be configured as per our needs.

These standards can also be enforced by using gated checks on pull requests at the CI level, but Husky is an alternative to do it at the local machine level.

What is Husky?

- Advertisement -

Husky is an npm package to make managing Git hooks easy. When initialized with Git, it enables a feature called hooks (no correlation with react hooks, in case you were wondering).

It provides pre-push, pre-rebase, pre-commit and other similar hooks. These hooks allow a mechanism to perform an action before one of the git commands is run.

To view a list of all the hooks in a project, we can run:

ls .git/hooks

A list of all git hooks and their usages can be found here.

For our purpose, we need to run the linter and formatter before someone creates a commit. So we will be using the pre-commit git hook.

Husky ensures:

  • Hooks are shared across machines (installed using configurations in the package.json)
  • Hooks are created on local developer machines
  • Hooks run when a git command is executed (before it’s execution)
  • Enforce checks are in place to fail git command execution if criteria are not met

Installing and configuring Husky

We install husky usiing the command:

npm i -D husky

Configuring husky requires adding a husky key to the root of the project’s package.json:

"husky": {
  "hooks": {
    "pre-commit": "",  // pre-commit command
    "pre-push": "",    // pre-push command
    "...": "..."
  }
}

The commands can be anything we want to run before the corresponding git action.

If we have npm scripts for running prettier and ESLint set up as:

"scripts": {
    "prettier": "prettier --config .prettierrc 'src/**/*.{js,jsx,css}' --write",
    "lint": "eslint . --ext .js",
    ...
  },

We can configure husky to run those before a commit happens be:

"husky": {
    "hooks": {
      "pre-commit": "npm run prettier && npm run lint"
    }
  }

This ensures that a commit cannot be made without having code that is formattted as well as enforces the coding standards set using ESLint.

Note: Instead of running linting on the complete project, check out the package lint-staged, which runs the linter only on staged files. This reduces the time it takes to lint the project.

Using husky and git pre-commit hooks, we can thus enforce coding standards across our projects without any manual interventions. Let us know if you have any questions or other linting tips in the comments below.

Recent Articles

Chrome devtools: Using logpoints for logging messages directly

When it comes to debugging JavaScript in Chrome devtools, there are two different camps: the console.log fans and the debugger/breakpoint maximalist. I...

How to prevent npm install for unsupported Node.js versions

npm configurations allow us to do quite a lot of nifty things. One of them is to allow the project to set...

How to terminate a process on a port using the command line

Zombie processes are usually a pain to figure out. More often than not, I end up googling about how to terminate a...

Detecting dark mode preference using JavaScript

As dark themes have become popular across the web and across operating systems, we might want to check the user's operating system...

JavaScript: Split string and keep the separators

String.prototype.split() is a valuable method to split strings based on a delimiter. There often comes a scenario when we want to split...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.