How to config Git Hooks + ESLint
Everyone makes mistakes! An undeclared variable here, a typo there and when we realize, we’ve committed code with silly syntax errors. I’ve done it, you’ve done it and I’m pretty sure that every coder out there has done it. Don’t feel bad, it’s human nature.
And then someone invented the linters. Linters run through your code and check if you forgot to close a bracket or didn’t declare a variable. But what if we could run a linter automatically when we commit code? It’s possible! Here’s how:
Creating a project
Jump to the terminal and create a new project:
$ mkdir eslint_git_hooks # Creates a new folder with name “eslint_git_hooks”$ cd eslint_git_hooks # Enters the folder eslint_git_hooks$ npm init –y # Creates a new npm project$ git init # Initiate git in your eslint_git_hooks folder$ npm i –g eslint babel-eslint # Installs ESlint and Babel ESLint globally in your system
Now that we have the project structure, we need to add the project root.
You can download a .eslintrc file ready to accept ES6 from my gist, click here.
Now add it to eslint_git_hooks’ root. Your project structure should look like this:
Config Git Hooks
Git Hooks is the way Git fires scripts when some action is performed. In our example, we’re going to run ESLint before every commit, so if ESLint fails, the changes are not committed. This prevents us from committing undeclared variables, functions missing the closing curly braces and so on.
You can access Git Hooks folder from eslint_git_hooks root, with the following command:
$ cd .git/hooks
If you list the files, you’ll see that there’re many options, in our example, we’re going to use pre-commit.sample.
So, copy the file with the following command:
$ cp pre-commit.sample pre-commit
Open pre-commit file in your preferred text editor and let’s change two lines:
1) Optional: Comment out verification for trailing spaces
# exec git diff-index — check — cached $against —
If you don’t do it, the linter will catch trailing spaces in all your files, including those inside the node_modules folder. You can prevent it from running against the node_module folder later.
2) Add the ESLint command at the end of the pre-commit file
Before we can test, restart your terminal, so that the ESLint command will be available
$ exec bash
Now, every time you commit something, ESlint will run and warn you of issues in your code.
You can find a demo project here.