How to run ESLint using pre-commit hook

Update: There is a better way to add pre-commit hooks to your project. Checkout husky. You can follow the below-given tutorial to learn how to manually add pre-commit hooks.

Before we go ahead, I’d like to provide a little background on ESLint and Git pre-commit hook. If you’re familiar with them, you can skip the next two sections.

ESLint

Image Source: https://libraries.io/atom/linter-plus-eslint

Developers tend to commit mistakes while coding. For example, you might forget to close a bracket or you might end up creating a variable that already exists. But, mistakes like this might end up breaking your app or site. We might push this buggy code to a cloud repository or it might take considerable amount of time to resolve the issues caused due to such mistakes. If your code is being reviewed, it would consume your reviewers time to find such sloppy mistakes or they might miss it completely.

This is where linting comes in to picture. Linting is the process of running a program that will analyse code for potential errors. For linting such potential errors, we use Linters.

Linters help in making a developer write clean code. Every language might have their own linters to lint their code. Here is a link that I liked which has listed some good linters for writing cleaner code:
https://github.com/showcases/clean-code-linters

Among these, we’ll be specifically speaking about ESLint which is a modern linting tool for linting JavaScript/ECMAScript 6. As per the description on their website,

ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines.

In simple words, it is used to validate your JavaScript files against potential errors. The “ES” in ESLint stands for ECMAScript. You can create a .eslintrc configuration file and specify the rules against which you want to validate your code. You can lint your code on-the-fly in your desired editor (check if there is a plugin/API for integrating ESLint with your editor) or you can lint it using the command line tools. The choice is yours. I prefer linting on-the-fly.


Git pre-commit hook

Image Source: http://www.sterlinghamilton.com/git-hook-pre-commit-for-debug-comments/

While discussing about ESLint, I gave an example mentioning that a developer might end up pushing a buggy code even if the code is not valid. Even if you have set up a linter, it might guard you against invalid code but it cannot guard you from pushing this invalid code to the repo. We need a mechanism to stop pushing such code to the repo.

This is where Git pre-commit hook. It’ll block the developer from committing the code if it doesn’t pass the rules set by the hooks available in .git/hooks. These hooks are supposed to be executable.

Please note, that Git pre-commit hook can be used for more than just validating your code. For information about Git Hooks, please visit https://git-scm.com/book/gr/v2/Customizing-Git-Git-Hooks


ESLint Git pre-commit hook

I’d be using an existing script https://gist.github.com/linhmtran168/2286aeafe747e78f53bf

Below are the steps that I followed to lint JavaScript/ES6 before committing:

  1. If you haven’t initialised git for your repo then do so by running the command:
    git init
  2. You should see a .git folder created in your project folder.
  3. Go to .git/hooks. You would see a file named pre-commit.sample
  4. Rename that file to pre-commit
  5. Remove the existing sample code.
  6. I modified the script https://gist.github.com/linhmtran168/2286aeafe747e78f53bf as per iamjochem’s comment in the Gist and created my own Gist to use it with ESLint.
    https://gist.github.com/rashtay/328da46a99a9d7c746636df1cf769675
  7. Run chmod +x .git/hooks/pre-commit to make it an executable file.
  8. Voila!

I’d love to hear feedback/suggestions for improvement.