As always, I have been in hurry to push my changes to branch and I forget to run lint checking, that I thought of giving a try to implement git hooks (pre-commit) so that it would do the job for me. Yeah!! Git hooks can come handy if you want to make sure your prerequisite checks are done such as lint, unit test or even commit message.
For this blog, lets take the most commonly used git hook — pre-commit and I am gonna run lint job before I commit my changes to branch. You can configure it as per you need.
These are some commonly used hooks
- pre-commit: Check the commit message for spelling errors.
- pre-receive: Enforce project coding standards.
- post-commit: Email/SMS team members of a new commit.
- post-receive: Push the code to production.
Git Pre-commit Hook
As I mentioned, lets get to set up pre-commit hook, I am not using any library for it, am gonna make use of git’s hooks itself. There are libraries which does for you such as husky but I don’’t want an additional library for this.
Git — Make sure your repository has git initiated, if so you can find .git folder (hidden folder) and there should be a folder ‘hooks’ if not you can create and there goes the file ‘pre-commit’.
Every Git repository has a
.git/hooks folder with a script for each hook you can bind to. You're free to change or update these scripts as necessary, and Git will execute them when those events occur.
#!/bin/bashecho "---------------------------------------------"echo "executing precommit hook for running linters"echo "---------------------------------------------"#let run the hook on stages files not on all filesfor file in $(git diff --cached --name-only | grep -E '\.(js|ts|vue)$')doecho "file :$file - being scanned for lint issue"git show ":$file" | node_modules/.bin/eslint --stdin --stdin-filename "$file"# we only want to lint the staged changes, not any un-staged changesif [ $? -ne 0 ]; thenecho "ESLint failed on staged file '$file'. Please check your code and try again. You can run ESLint manually via npm run eslint."exit 1 # exit with failure statusfidone
What the above code does is, it takes files which are staged and the files with specific format
$(git diff — cached — name-only | grep -E ‘\.(js|ts|vue)$’)
here I pick the files with .js .ts .vue extension in to consideration, runs lint job on each file
node_modules/.bin/eslint — stdin — stdin-filename “$file”
on failure of lint on any of the file, it gives the message to user and aborts the commit.
“ESLint failed on staged file <file_name>. Please check your code and try again. You can run ESLint manually via npm run eslint.”
By this you can be very certain that you can only commit when your staged files pass lint rules.
This can be extended to your own requirements.
Note: you can also skip the rule by simply using — no-verify command ( which doesn’t make sense though) but if in case of strange situation.
if you are curious about list of git hooks:
Interested in themes for visual studio code for vue js, you can find my recommendation or favorite themes