JSHint Everywhere

24 Nov 2012

What is JSHint? It is JSLint tamed for humans.

I always wanted to have JSHint properly integrated into my development flow but never took the plunge. Until now. Prerequisites: nodejs installed in your PATH.

Install JSHint CLI

The command line interface to JSHint can be installed via npm:

npm install -g jshint

And you will be able to do this in the shell:

# JSHint can verify recursively every js file in a folder:
$ jshint .

# … or a single file
$ jshint assets/app.js

# to ignore others' problems:
$ jshint assets/!(vendor|require.js)
assets/app.js: line 23, col 1, 'console' is not defined.

1 error

The jshint command searches the current folder and its parents for a .jshintrc file and falls back to ~/.jshintrc. This enables project-level jshint options. A gitignore-style .jshintignore can be provided to exclude certain files or folders from syntax check.

Note: to have the !() syntax you might need to enable the extglob feature in bash (see bash manpage).

Add JSHint to VIM

Install syntastic. Done.

Syntastic will automatically pick the appropriate syntax checker for most languages. If you happen to have both JSHint and JSLint installed, syntastic has to be configured to ue the former. Add this to vimrc:

let g:syntastic_javascript_checker = 'jshint'

Add JSHint as a compiler to VIM

Useful for JSHinting whole projects with large number of JavaScript files - possibly with many errors.

Install jshint cli (see above) and create ~/.vim/compiler/jshint.vim with the following contents:

CompilerSet errorformat=%f:\ line\ %l\\,\ col\ %c\\,\ %m
CompilerSet makeprg=jshint

Then in VIM comand line:

:compiler jshint

"Validate current folder recursively:
:make .

"Validate current file:
:make %

"Validate selected files:
jshint assets/!(vendor\|require.js)

You might need to add this line to .vimrc to enable advanced patters in bash:

set shell=/bin/bash\ -O\ extglob

Make collects errors output the quickfix window (:copen). You might want to use the location list window instead. In this case use :lmake and :lopen. Read more about quickfix/location list window: :help quickfix.txt.

Credit goes to Jonathan Jacobs for this trick.

Add JSHint to Rake build pipeline

It might be useful to automate running JSHint on the codebase before deployment, from CI or as part of the test phase. Using rake it is as simple as adding this to Rakefile (replace assets with the folder to be JSHinted):

task :jshint do
  system('jshint', 'assets') || abort('JSHint check failed')
end

The downside of this approach is that it requires JSHint cli to be installed. If that’s not an option, there is a gem called jshintrb which a provides ruby wrapper around JSHint and a Rake task (JavaScript runtime is still required).

Install:

gem install jshintrb

Or add this line to Gemfile:

gem "jshintrb", "~> 0.2.1"

Add jshint task to Rakefile:

require 'jshintrb/jshinttask'

Jshintrb::JshintTask.new :jshint do |t|
  t.pattern = 'assets/**/*.js'
  t.exclude_pattern = 'assets/{vendor/**/*,require}.js'
  t.options = JSON.parse(IO.read('.jshintrc'))
end

Cons of JshintTask: does not use .jshintignore, neither the same magic for config lookup as JSHint cli does.