Awesome

Learn JSHint

code quality cartoon

Want to reduce bugs in your JavaScript code? Use jshint to automatically check your JavaScript code.

Why?

To make your code consistently awesome.
Ensure that everyone on your team writes similar (maintainable) code
See immediately if code (quality) gets worse (and remedy it!)

What?

If you have writen JavaScript code professionally you will know about The Good Parts by Douglas Crockford.

To encourage people to only use the predictable & well behaved ("good") parts of JS Crockford developed the JSLint code quality tool.

However ... many developers find Crockford's JSLint to be too restrictive and "opinionated"

Read the discussion on StackOverflow: http://stackoverflow.com/questions/6803305/should-i-use-jslint-or-jshint-javascript-validation

And so JSHint was Born! A fork from JSLint, JShint allows developers to be more pragmatic about which rules they follow by allowing us to define our own set of rules (see below)

For a more detailed introduction to JSHint: http://jshint.com/about

How?

jshint.com

You can simply paste your code into the input area on http://jshint.com/ But that gets tedious after a few goes. You need a more robust (and automatic) way of checking your code e.g. every time you save.

Docs: http://www.jshint.com/docs/

Command Line

Install the jshint node.js module:

npm install jshint -g

Run the command:

jshint

(this runs the jshint command over all the files in the current working directory)

Want to use a specific configuration file and exlude everything in your .gitignore file?

jshint -c .jshintrc --exclude-path .gitignore .

Pre-commit Hooks

Pre-commit Hooks prevent people from commiting un-linted code! So sloppy code never leaves the lazy developer's machine and your Git repo is always clean & tidy!

This deserved its own tutorial: https://github.com/nelsonic/learn-pre-commit

Atom Editor Linter Plugin

Once you have made the switch to Atom Editor you can install the Linter Plugin by opening your preferences (Click: Atom > Preferences or ⌘ + ,)

Atom Preferences - Install Linter

Once the plugin has installed click on settings

Atom Pref - click linter settings

In addition to the linter you need to select the language you want Atom to lint. In our case its JavaScript so in the packages interface search for: linter-jshint

linter-jshint

Now when ever your code has issues you will see a "dot" on the line. Simply correct it and continue coding! :-)

atom linter-jshint showing error messages

Brackets Editor

If you use the open source Adobe Brackets text editor, you can install JSHint by going into Extensions Manager on the top right hand side, and search for JSHint

JSHint

This will show you hints at the bottom of the editor but you can go one step further!

You can install another pluging called Interactive Linter

Interactive Linter

This will show lightbulbs next to any errors you make!

Demo

SublimeText Plugin

If you are still using SublimeText there is a good JSHint package you can use.

Install Package Control (if you don't already have it) https://sublime.wbond.net/installation#st2 [ follow their installation instructions ]

Next install SublimeLinter https://github.com/SublimeLinter/SublimeLinter

Inside SublimeText click: Tools > Command Palette

Type (or paste): Package Control: Install Package into the Command Palette and wait for SublimeText to update the list of packages.

Now you can paste: SublimeLinter into the Command Palette to install the Linter.

Other Editors

WebStorm ?

See: http://www.jetbrains.com/webstorm/webhelp/jshint.html

Eclipse ?

See: http://github.eclipsesource.com/jshint-eclipse/install.html and https://github.com/angelozerr/tern.java/wiki/Tern-Linter

IntelliJ Idea ?

See: http://blog.jetbrains.com/idea/2012/05/lint-your-javascript-with-jslintjshint-in-real-time/

Create a .jshintrc (JSHint Configuration) File

Next create a file called .jshintrc in your project directory and paste this sample configuration.

{
  "curly": true,
  "eqeqeq": true
}

curly enforces that all code blocks should always be surrounded with curly braces.
eqeqeq prohibits the use of == and !=, instead developers should use === and !==

For the full list of JSHint options see: http://www.jshint.com/docs/options/

If you are using Jasmine or Mocha testing framework you may see this warnings:

test/foo.test.js: line 10, col 1, 'describe' is not defined.
test/foo.test.js: line 12, col 5, 'before' is not defined.
test/foo.test.js: line 25, col 5, 'it' is not defined.
test/foo.test.js: line 43, col 5, 'beforeEach' is not defined.
test/foo.test.js: line 54, col 5, 'after' is not defined.
test/foo.test.js: line 83, col 5, 'afterEach' is not defined.

This means you need to let JSHint know about your testing enviorment. In order to do so add to your .jshintrc file:

{
  "mocha": true,
  "jasmine": true
}

Sample JavaScript File

now create your JS file example.js and paste in some un-linted code:

var test = true;
if(test == true){
	console.log("JSHint Should Flag this double equals...")
}

if(test === false)
	console.log('and it should spot the lack of curly braces here...')

You should expect to see something like this:

Imgur

Notice how lines 2, 3 and 7 have a red circle with an exclamation mark in them? These are JSHint warnings because the code does not conform to the definitions we set in our .jshintrc file above. Namely there is a == on line 2 and the second conditional (if) statmente is not wrapped in curly braces.

Additionally line 3 is flagged because it does not end with a semicolon.

We can easily fix the code:

var test = true;
if(test === true) {
	console.log("JSHint Should Flag this double equals...");
}

if(test === false) {
	console.log('and it should spot the lack of curly braces here...');
}

Now SublimeLinter will no longer display any errors: