JavaScript can be a harsh mistress. One of the best books on JavaScript is based on the idea of using the language’s good parts and avoiding the plentiful “bad parts”. One startup recently learned this lesson the hard way, when a simple missing ‘var’ statement ground their big l

JavaScript can be a harsh mistress. One of the best books on JavaScript is based on the idea of using the language’s good parts and avoiding the plentiful “bad parts”. One startup recently learned this lesson the hard way, when a simple missing ‘var’ statement ground their big launch to a halt.

One tool that can help with this is JSHint. JSHint is a JavaScript code quality tool. It is a community-driven fork of JSLint, which has fallen out of favor due to a growing divergence between the style opinions of its creator and the community at large. If this factoid interests you, see Antov Kovalyov’s blog post, “Why I Forked JSLint to JSHint”.

JSHint will parse JavaScript code and flag various syntax and semantic errors. It will find issues that are technically valid JavaScript but likely to cause problems or reflect poor style.

JSHint actually exists as a website to paste your code into for checking, but copy-pasting code is hardly convenient. There does, however, exist a command-line interface for JSHint, powered by Node.js. We will install this, so that we can run the JSHint tool locally.

These instructions are for Mac OS X with Homebrew, but should be easily adaptable to other platforms.

1. Install Node.js

$ brew install node

2. Install NPM – the Node Package Manager
If we try to install through Homebrew, it tells us:

$ brew install npm
npm can be installed thusly by following the instructions at http://npmjs.org/

To do it in one line, use this command:
curl http://npmjs.org/install.sh | sh

So, let’s do that.

$ curl http://npmjs.org/install.sh | sh

3. Install JSHint using NPM
We’ll use the -g flag to install globally (ie. to /usr/local/bin)

$ npm install jshint -g

OK, now we’ve got JSHint installed. We can run it from the command line like:

$ jshint my-script.js
my-script.js: line 15, col 61, Missing semicolon.
my-script.js: line 31, col 84, Don't make functions within a loop.
my-script.js: line 98, col 25, Bad for in variable 'index'.
my-script.js: line 191, col 23, Expected a conditional expression and instead saw an assignment.
my-script.js: line 208, col 41, Use '===' to compare with '0'.
my-script.js: line 227, col 37, Bad escapement.
my-script.js: line 421, col 2, Mixed spaces and tabs.

This gets us started, but checking script manually from the command line, while better than copy-pasting to a webpage, still isn’t particularly convenient. It would be much nicer if we could hook JSHint into our editor and make it part of our workflow.

Many editors do indeed have ways of doing exactly this:

Vim

jshint.vim allows you to run JSHint from within Vim. It will open the JSHint results in a window split, and selecting the error in the JSHint window will allow you to jump to the corresponding line in your edit buffer.

Syntastic is a plugin that supports various code quality tools, and JSHint is one of the supported tools. Syntastic automatically detects the presence of JSHint on the system, and will Just Work once you enable the plugin’s behavior in your Vim config.

Sublime Text 2

SublimeLinter is a plugin for Sublime Text 2 that facilitates running various “lint”-style code quality tools from Sublime Text. JSHint is one of the supported tools.

TextMate

JsLintMate is a TextMate plugin for running JSHint (or JSLint) from within TextMate. Install and hit Ctrl+Shift+L to trigger JSHint.

Notepad++

Notepad++ doesn’t appear to have a plugin supporting JSHint, but does have a JSLint plugin.

Emacs

My Vim fandom prevent me from recognizing Emacs as a valid editor choice, but Emacs users are people too, and so they get jshint-mode.

Big Fat IDEs

If you prefer IDEs to text editors, there’s a plugin for Visual Studio, and the PhoneGap mobile web development plugin for Eclipse adds JSHint functionality to Eclipse. I couldn’t find much for NetBeans, outside of a blog post (“Integrating JSLint More Tightly into NetBeans”) on using the jslint4java Java wrapper for JSLint.

Whatever your code writing preference, JSHint should be fairly easy to integrate into your workflow. Personally, I am using it with Vim and the Syntastic plugin, and the JSHint output messages popping up whenever I save a JavaScript file that JSHint flags with warnings/errors is incredibly convenient. It is now just another automatic tool in my development toolkit.

aunch to a halt.

One tool that can help with this is JSHint. JSHint is a JavaScript code quality tool. It is a community-driven fork of JSLint, which has fallen out of favor due to a growing divergence between the style opinions of its creator and the community at large. If this factoid interests you, see Antov Kovalyov’s blog post, “Why I Forked JSLint to JSHint”.

JSHint will parse JavaScript code and flag various syntax and semantic errors. It will find issues that are technically valid JavaScript but likely to cause problems or reflect poor style.

JSHint actually exists as a website to paste your code into for checking, but copy-pasting code is hardly convenient. There does, however, exist a command-line interface for JSHint, powered by Node.js. We will install this, so that we can run the JSHint tool locally.

These instructions are for Mac OS X with Homebrew, but should be easily adaptable to other platforms.

1. Install Node.js

$ brew install node

2. Install NPM – the Node Package Manager
If we try to install through Homebrew, it tells us:

$ brew install npm
npm can be installed thusly by following the instructions at http://npmjs.org/

To do it in one line, use this command:
curl http://npmjs.org/install.sh | sh

So, let’s do that.

$ curl http://npmjs.org/install.sh | sh

3. Install JSHint using NPM
We’ll use the -g flag to install globally (ie. to /usr/local/bin)

$ npm install jshint -g

OK, now we’ve got JSHint installed. We can run it from the command line like:

$ jshint my-script.js
my-script.js: line 15, col 61, Missing semicolon.
my-script.js: line 31, col 84, Don't make functions within a loop.
my-script.js: line 98, col 25, Bad for in variable 'index'.
my-script.js: line 191, col 23, Expected a conditional expression and instead saw an assignment.
my-script.js: line 208, col 41, Use '===' to compare with '0'.
my-script.js: line 227, col 37, Bad escapement.
my-script.js: line 421, col 2, Mixed spaces and tabs.

This gets us started, but checking script manually from the command line, while better than copy-pasting to a webpage, still isn’t particularly convenient. It would be much nicer if we could hook JSHint into our editor and make it part of our workflow.

Many editors do indeed have ways of doing exactly this:

Vim

jshint.vim allows you to run JSHint from within Vim. It will open the JSHint results in a window split, and selecting the error in the JSHint window will allow you to jump to the corresponding line in your edit buffer.

Syntastic is a plugin that supports various code quality tools, and JSHint is one of the supported tools. Syntastic automatically detects the presence of JSHint on the system, and will Just Work once you enable the plugin’s behavior in your Vim config.

Sublime Text 2

SublimeLinter is a plugin for Sublime Text 2 that facilitates running various “lint”-style code quality tools from Sublime Text. JSHint is one of the supported tools.

TextMate

JsLintMate is a TextMate plugin for running JSHint (or JSLint) from within TextMate. Install and hit Ctrl+Shift+L to trigger JSHint.

Notepad++

Notepad++ doesn’t appear to have a plugin supporting JSHint, but does have a JSLint plugin.

Emacs

My Vim fandom prevent me from recognizing Emacs as a valid editor choice, but Emacs users are people too, and so they get jshint-mode.

Big Fat IDEs

If you prefer IDEs to text editors, there’s a plugin for Visual Studio, and the PhoneGap mobile web development plugin for Eclipse adds JSHint functionality to Eclipse. I couldn’t find much for NetBeans, outside of a blog post (“Integrating JSLint More Tightly into NetBeans”) on using the jslint4java Java wrapper for JSLint.

Whatever your code writing preference, JSHint should be fairly easy to integrate into your workflow. Personally, I am using it with Vim and the Syntastic plugin, and the JSHint output messages popping up whenever I save a JavaScript file that JSHint flags with warnings/errors is incredibly convenient. It is now just another automatic tool in my development toolkit.