Redemption via JSXHint

Recently while shipping a feature for an awesome ReactJs app we have been working on at Automattic I made the mistake of removing a variable declaration that resulted in a dreaded undefined error on production.

But like life, in coding we learn from our mistakes, and work to prevent them from happening in the future. Obviously a test framework wired in with CI would have likely caught this – but the error only happened on certain sites – making it somewhat of an edge case that some test cases would not have caught.

A simple quick run thorugh jsxhint would have caught it though.

Simply but jsxhint is:

A wrapper around JSHint to allow linting of files containing JSX syntax.

Installation of jsxhint is done via npm, and by using the global flag: npm install -g jsxhint

I thought, wouldn’t it just be neat to always run jsxhint on my revisions prior to committing them?

After a bit of searching, I found an answer on stackoverflow detailing how to setup a git pre-commit hook for jshint. So with a little bit of massaging, I created a pre-commit git hook that runs all changed .js and .jsx files through jsxhint. You can find the pre-commit hook here.

If jsxhint finds any errors in any files changed in your revision, it will not let the commit proceed… and wonderfully it prevents James Van Der Beek from shedding any more tender tears.