PreCommit Hooks!

Posted on March 26, 2019 - 3 min read

Setup pre-commit hooks for an existing project.


Precommit Hooks


A Pre-commit hook is run just before a commit is added to a new revision. They are mainly used to point out issues in code such as a missing semicolon, trailing white spaces and debug statements. Often a pre-commit hook can be used to run your test before a new commit is added, just in case there is a defined threshold limit for the test, and if the coverage is less than the threshold limit the test would fail — this, in particular, helps keep code coverage high throughout development.


To set up our Pre-commit hook we would be using Husky which describes itself as — ‘Git hooks made easy’.


Let’s get started by first installing husky


npm install husky

or

yarn add husky

The hooks can be added into your package.json file and can either be used to run your test or lint your code.


Linting your code (React + Tslint):


Using Pre-commit hook to lint your code is quite straightforward, for example when using Typescript in a React project you’d set up rules in your Tslint for linting your code. To ensure that your code follows the specified rule in your Tslint you can add the following to the scripts section of your package.json


"scripts": {
   "lint:ts": "tslint --project tsconfig.json --config tslint.json",
 }

Now to ensure that any new revision adheres to the standard you have to add this to your package.json so that it can be referenced by husky


"lint-staged": {
    "*.ts": "yarn lint:ts",
    "*.tsx": "yarn lint:ts",
 }

and then calling husky to lint your code before adding a new revision would be like this:


"husky": {
   "hooks": {
      "pre-commit": "lint-staged"
   }
 }

Linting your code (Vue + Eslint):


This is quite similar and straight forward to the above method, especially if you bootstrapped your project with the vue-cli-3 you would already have a lint script in your package.json


"scripts": {
   "lint": "vue-cli-service lint",
}

So all that’s left to do, is to go ahead and install husky just like we did earlier and then we can add our husky command to the package.json just like this:


"lint-staged": {
   "*.js": [ "lint" ],
    "*.vue": [ "lint" ]
}

Husky command — lints file and runs the test afterward:


"husky": {
   "hooks": {
      "pre-commit": "lint-staged && yarn run test:unit"
   }
 }

Screenshot of husky linting and running test before adding a revision if everything is fine — in a Vue project:


screenshot of Husky running in a Vue project


From the screenshot above you can see that husky runs the linters against staged files before it goes to add the new a revision.


Conclusion:


This is just a way to make development easier while also making sure that everyone adheres to the project guidelines. I hope this has been able to help you get started with using Git hooks in your projects.


As always, Thank you for reading!


Photo Credit



My Life As A Software Engineer BlogI Learn, I Share, We Grow.