Setting up ESLint with Git Hooks
Git is an open-source and free version control system(VCS) used by almost all developers to easily sync thier code among team members and store the full history of the codebase.
Git comes up with a lot of features with committing , merging, adding files so that people can see the entire history tracking up all the changes and reviewing them at later stage of time.
Today we are going to explore one of its features called Git Hooks.
Quoting Attlasian
Git hooks are scripts that run automatically every time a particular event occurs in a Git repository. They let you customize Git’s internal behavior and trigger customizable actions at key points in the development life cycle.
For example , if you want to run a script before every commit which prettify you code or check the code quality before pushing it to origin or check a predefined pipeline then git hooks comes into picture.
Today we are going to setup ESLint with prettier such that if any developer commits the code a script is run , which would check the code quality and standards set as per the ESLINT and also prettify the code before committing.
One major challenge that we faced in our project was that , if we set up Eslint and prettier on the entire codebase at once there would be a lot of change in codebase and it would take a lot of effort and time to fix those and test it before taking it to production .
So we planned out a way, We would run the Eslint and prettier only on the files that we make changes and commit.Hence , if we add/change in a file Foo.js , we also have to fix the ESLINT error on that file before commiting. Continuing this practice, almost 70–80% of our codebase would get cleaned in couple of months. Once we see that it has reached around 75% , we can implement it for entire code base and fix all issues. This would help us in smooth integration and cleaning up of codebase without putting up extra efforts at once.
Installing Hooks
Hooks reside in the .git/hooks directory of every Git repository.
Git provides a some of the sample hooks files for different git events . Once we rename these files removing .sample , it starts to get executed at that event.
Note: these files are not a part of git repo and it stored locally on the machine , so it is not accesible to all users.
To solve this problem , let create a folder name hooks inside the codebase and place the pre-commit file over there.
Now we will configure git to read the hooks files from these folder
Add this to package.json of your project
"preinstall": "git config core.hooksPath hooks"This will configure git to read hooks files from hooks folder of the project. We have added this to preinstall so that when any user does npm install this get configured at that time only.
PART 2 : (Contd.)
