Run npm scripts in a git pre-commit Hook

If your team is anything like the one I work with, everyone has their own preferred IDE that they use (Sublime Text, Atom, WebStorm, Vim, Visual Studio Code, etc...) and although most of them have integrated linting support that doesn't guarantee all issues have been addressed before a Pull Request is made.

So, we have started to use the node pre-commit module which makes it really easy to run linting (or whatever npm scripts you want) before code is committed to a git repository.

Installation

First, you'll need to install the pre-commit package from npm. You can use the following command from your terminal.

npm install pre-commit --save-dev

package.json

Once you've installed the pre-commit node module, then you add a new pre-commit entry in your package.json file indicating an array of npm scripts you want to pass before allowing a successful commit.

{
  "scripts": {
    "lint": "eslint ./ --cache --ignore-pattern .gitignore"
  },
  "pre-commit": [ "lint" ],
  "devDependencies": {
    "eslint": "^2.12.0",
    "pre-commit": "^1.1.3"
  }
}

😜 Don't worry, you can force a commit with --no-verify if you find yourself in the situation where you just want to commit even though your pre-commit hooks don't succeed.

Pre-commit Message

I've found that it is best to prepend a script that describes what is happening because it could be confusing if you didn't realize linting or tests were being checked before the commit happened. Otherwise you might think something was wrong with git or something.

{
  "scripts": {
    "lint": "eslint ./ --cache --ignore-pattern .gitignore",
    "precommit-msg": "echo 'Pre-commit checks...' && exit 0"
  },
  "pre-commit": [ "precommit-msg", "lint" ],
  "devDependencies": {
    "eslint": "^2.12.0",
    "pre-commit": "^1.1.3"
  }
}

Other ideas

You could take this idea a bit further by adding other scripts in the pre-commit array such as running unit tests (ava, mocha, jasmine, etc...) or enforcing a unit test coverage threshold (nyc, istanbul, etc...). However, the more scripts you add during the pre-commit hook the longer you'll need to wait every time you commit code.

Conclusion

Adding pre-commit to your project can be helpful to encourage consistency and quality of your code repository. Have you found other use cases other than linting and testing? If so, I'd love to hear from you about it. You can reach me on twitter at @elijahmanor.