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

The Pomodoro Technique: Productivity hacks

The irony of time management productivity tips is that the people who need them the most do not realize that they do....

React fragments: What and Why

React fragments were a feature released in React 16.2. They have been around for a while now but have been a relatively...

Using Sub Resource Integrity to secure web applications

Sub Resource Integrity (SRI) is a security feature that can be used to validate that the resources that the browser is fetching...

Measuring JavaScript execution time

When it comes to performance of applications, measuring performance becomes important. For anything to be optimized, it must be measured first, optimized,...

The Beginner Syndrome

Someone recently reached out to me and asked how am I able to write consistently. Her exact words were: "how do you...

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.