Save Prod & Peers: Linting and Styles for Node on Travis

Don't be the person that breaks production because of a typo or searches endlessly for that missing closing bracket. Level up with Travis, grunt and node.

A Variation on a Theme

You've been up all night pouring your heart and soul into the NEXT BIG FEATURE of that SUPER AWESOME PROJECT EVERYONE USES. Your mental capacity diminishes by the second but you must stay the course. Rome might not have been built in a day but this npm module sure as hell will.

You're on the final stretch. The code is done. You commit to the repo. You lay on your bed and you are feeling pretty QUOD ERAT DEMONSTRANDUM."Seriously, I wrote that code like some sort of 24th century android!", you think as you drift to sleep.

YES! TOTAL CODE VICTORY!
Commander Data as YOU

The sad news is that you didn't write that code like an android and SPOILER ALERT you missed that pesky but kind of super critical closing bracket. Now the thousands of people relying on your project are getting fatal errors. They are not impressed. What should have been your finest hour, your finest expression of code art to the world is instead a shameful display of what the code elders call n00batronix. Might as well have climbed to the top of a big ole mountain and declared "I HAVE NO IDEA WHAT I AM DOING!!!" Certainly looks like you don't.

Done something like this before? Yeah, Me too.

Luckily, there is an alternative to pretending you code like an android. It's called using the robots. By bending Travis, NodeJS and Grunt to your will you can make your code safe to distribute once again.

Of course this is not the only reason to set up basic automatic code quality procedures. Preventing the total nuclear meltdown of your build is great but do you or your team also desire any of the following?

Finding dev-killing missing parentheses in seconds, not hours

Getting rave reviews for how pro and clean your code looks

Quenching Sally's rage because your TABS fetish wipes out her SPACES on every commit

Commiting diffs that are clean and unspoiled of non-essential dev drivel

Developing good coding habits based on well defined standards.

Interested in going from CodeZero to CodeHero in less than 30 minutes? Yes, you say? Then please read on.

Yes! Now that we are in 2016 it's relatively easy and straightforward to set up basic automated testing both to cover code-based nuclear meltdowns and to ensure your entire team is writing high quality code. If you are familiar with the basics of Github, Travis, NodeJS and Grunt you can probably skip ahead to the next section. If not here are the essentials you need to get started:

Generally, you will want to follow the GitHub flow development pattern. However, there is one major difference. When you commit code to your feature branch/pull request Travis will make sure your code is both neccesary and proper. If neither of the two aforementioned conditions are met you will get a visually obvious indication of this.

Travis will report what changes you need to make to your code. Fix those mistakes, push your code again, wait for the build to complete successfully and profit from having great code quality.

Here is a Gruntfile.js task that checks your code for syntax errors. Please refer to the documentation on the grunt-contrib-jshint plugin. Notice that we are delegating our linting rules to the .jshintrc file. You can read more about the rules of this file here.

jshint:{options:{# Use a config file for our linting rulesjshintrc:'.jshintrc',# Use a custom reporter so we get pretty output for lint reportsreporter: require('jshint-stylish')
},
// This uses normal GLOB syntax. In this case scanning all JS files in ./ and lib/
files:['*.js','lib/*.js']}

Here is a Gruntfile.js task that makes sure we are following NodeJS coding standards. Please refer to the documentation on the grunt-jscs plugin. Notice that we are delegating our linting rules to the .jscsrc file. You can read more about the rules of this file here.

jscs:{# Use a config file for our code standards configoptions:{config:'.jscsrc'},# This uses normal GLOB syntax. In this case scanning all JS files in ./ and lib/files:['*.js','lib/*.js']}

Here is a complete Gruntfile.js that defines checks for basic syntax errors and adherence to code standards laid out in jscsrc (Google standards in this case). We also register a task called grunt test that will check these things.

4. Automate the testing with a travis.yml file.

Here is a basic .travis.yml file that you can drop in your projects root directory. This will automate the testing of your code. If you are interested in learning more about configuring this file you should check out the Travis Starter Guide.