Create a Pre-Commit Git Hook for Eslint

Summary

The web content provides a guide on creating and enabling a pre-commit Git hook for Eslint to ensure code quality and adherence to project standards before committing changes.

Abstract

The article discusses the implementation of a pre-commit Git hook specifically designed to validate code against Eslint rules. It builds upon a previous article that introduced Git Hooks and their use cases. The author guides readers through the process of setting up the pre-commit hook, which includes creating a new file named pre-commit in the .git/hooks directory, adding a script to enforce Eslint rules, and making the hook executable. The script not only checks for Eslint compliance but also attempts to automatically fix minor issues. The article emphasizes the importance of this hook in maintaining code quality and provides additional resources for sharing the hook with a team and for setting up Eslint in a project.

Opinions

The author believes that the pre-commit hook is an "ideal place" for attaching validation rules to ensure commits do not break existing functionality and maintain expected quality standards.
The author suggests that using a pre-commit hook for Eslint is a best practice for developers, implying that it contributes to the overall health of the codebase.
By providing a script and instructions for making the hook executable, the author conveys that these steps are straightforward and accessible for developers of varying skill levels.
The author encourages readers to test the hook thoroughly to ensure it functions as expected, highlighting the importance of reliability in automated tooling.
The reference to a separate article on sharing Git hooks with a team indicates the author's view that collaborative implementation of such tools is beneficial and should be a shared responsibility among team members.

Create a Pre-Commit Git Hook for Eslint

Git Hooks

In the previous article, I explained what are Git Hooks and their respective use cases. In this article, I’m going to explain to you how to create a git hook for validating your eslint rules. If you are not familiar with setting up eslint for your project you can have a look at my article on that as well.

Pre-Commit Hook

As I explained in my previous article, the pre-commit hook gets triggered at every time you run git commit before Git asks the developer for a commit message or generates a commit object. Hence this hook is an ideal place for us to attach to some validation or rules to make sure that this commit doesn’t break any existing functionality and also has the expected quality.

Enabling pre-commit hook

In order to enable the pre-commit hook for the project you can navigate to the hooks directory in the .git hidden folder(i.e: .git/hooks). There you can create a new file with the name pre-commit or you can rename existing git hook template (i.e pre-commit.sample) to pre-commit ; In my case, i’ll be creating a new file as follows:

touch pre-commit

Once you have the new file, you can open that file using your favorite text editor. Then paste the following script inside that file and save it.

This pre-commit hook validates your files for eslint issues and tries to fix any small eslint issues if possible. If not it will reject the commit you made.

Alright!, once you save the file next step is to turn your pre-commit hook file into an executable file, to do that execute the following command inside the .git/hooks folder:

chmod +x pre-commit

The final step is to test your pre-commit hook, for that you can do a small dummy eslint error in one of your files and then check whether it gets fixed automatically, also check with a large error whether you get an error message to saying that “ Fix eslint errors and try again”.

How to Share it With Your Team

For that I have created a separate article on that, if you are interested you can have a look at that as well.

I hope you were able to enable the pre-commit git hook successfully and use it without an issue if you have any questions related to this post, feel free to ask anything in the comment section below. Cheers!!