How to add JSCS to your pre-commit hook

Written by Timothée Boucher, March 05, 2014

I recently came across JSCS and thought it would be a great addition to our git flow to enforce consistent code style for all of our JavaScript code.

JSCS is a code style checker for JavaScript. It lets you decide if you prefer your if’s with or without a space after them; if you’re OK with declaring multiple variables with one var keyword; if your lines shouldn’t go over 80 characters; etc. A lot of it is a matter of taste of course, but the main goal is consistency.

So far we’ve been pretty good at having a fairly homogeneous style in our JavaScript files, but as our team grows, new people need to adapt to the implied preferences of our code base. Adding JSCS means that our style guide is codified in JSCS’ config file and less prone to interpretation.

Having it as part of our pre-commit hook results in less time spent in code reviews saying things like “if you don’t mind, you missed a space here”. Some might think it’s nitpicky, but we’re looking at it with the broken windows theory in mind.

So, here is the addition we made to our precommit hook to run JSCS on any JavaScript files that are staged:

# Extract staged files to a temp directory TMPDIR= TMPFILE= if [ "$IS_LINUX" == "true" ]; then TMPFILE=`mktemp jscs_tmp_XXXXXX` TMPDIR=`mktemp -d jscs_tmp_XXXXXX` else TMPFILE=`mktemp -t tmp/jscs_tmp_XXXXXX` TMPDIR=`mktemp -t tmp/jscs_tmp -d` fi git diff --cached --name-only --diff-filter=ACMR | xargs git checkout-index --prefix=$TMPDIR/ -- # Check JavaScript code style RUN_JSCS=1 TOTAL_ERRORS=0 JSFILES=$(git diff-index --name-status --cached HEAD | grep -v ^D | egrep '.js$' | cut -c3-) if [ -z "$JSFILES" ]; then # No JavaScript file changed for this commit RUN_JSCS=0 elif [ -z "$JSCS_PATH" ]; then echo "Warning: You can't check the JS coding style." echo "You need to download and install jscs and set JSCS_PATH to its path." RUN_JSCS=0 fi # Ensuring proper coding style if [ $RUN_JSCS -ne 0 ]; then echo -n "Checking JS style errors..." OUT=`$JSCS_PATH -r text $TMPDIR` CODE=$? # Erase last output line echo -ne '\r\033[K' if [ $CODE -ne 0 ]; then # Replace temp file name with real filename with color # in sed we use commas as separators for clarity, and execute echo # in the replacement part to get colors # Probably cleaner ways exist but I don't know them at the moment OUT=`echo -e "$OUT" | sed "s,$TMPDIR/$[^ ]*$,\`echo -e \"\033[1;32m\1\033[0m\"\`,"` # grab the number of errors for that file # (keeps only numbers and takes the last line) TOTAL_ERRORS=`echo -e "$OUT" | sed 's/[^0-9]//g' | tail -1` # echo output minus last line echo -e "\033[1;37mJavaScript style errors found:\033[0m" echo -e "$OUT" | sed '$ d' echo "$TOTAL_ERRORS code style errors found." echo "Please fix and stage the files before commiting again." rm -Rf $TMPDIR $TMPFILE exit $CODE else echo "No JS code style errors found." fi fi # Clean up rm -Rf $TMPDIR $TMPFILE

It’s fairly simple: we use git checkout-index to output the staged files to a temporary folder, run JSCS against it and print out any errors, and stop the commit if there are any errors.

The main drawback is that you can only really run JSCS against a full file and not just the diff. So even if you change only one line in a file, you’ll have to fix all the existing errors in that file, and the related pull request will be more cluttered than necessary. But that should only be a transitional period: once all your files have been cleaned up, you will get errors only on the changes you’ve made.

Here are some tips to keep the initial cleanup manageable:

Cleanup your whole codebase in one big pull request containing only style fixes. We did that mostly but split the cleanup by modules: models first, then collections, etc.
On GitHub, on a pull request or commit page, you can add ?w=1 to the URL to hide all whitespace-related diffs (from GitHub’s blog). This won’t cover all the changes caused by JSCS, but probably most of them.
Improve the hook to only keep errors for the staged lines. This is a bit tricky to write and probably not worth the hassle since eventually we’d like to have the whole project properly styled.

How to add this to your pre-commit hook

Install JSCS (see instructions).
Create a file named .jscs.json with your preferred options. As a starting point, you can check our current configuration.
Paste the script above to your pre-commit hook in .git/pre-commit. (see the git documentation for more details) You’ll need to add JSCS_PATH to your environment, pointing to where jscs lives.
Proceed to commit perfectly styled code!

NextRoll

How to add JSCS to your pre-commit hook

How to add this to your pre-commit hook

Let's get things rolling.