JSLint.VS2010: Automatic JavaScript Static Analysis

Recently, I was working on a project that used some asynchronous JSON-to-HTML databiding. Testers sent a bug that the site was working in Chrome, Firefox, Safari and IE9 but nothing was happening in IE8. The IE8 javascript debugger didn’t report any errors, it just didn’t do anything.

This sort of thing is no fun to debug and I spent an increasingly desperate evening staring at code that couldn’t possibly be wrong  failing to see the problem. Eventually, in desperation, I pasted the code into Douglas Crockford’s jslint and it quickly pointed out a stray comma which made all the difference.

I later discovered that there is a jslint extension available for Visual Studio 2010.

jslint-options

The really cool thing about the JSLint Visual Studio extension is that it reports its warnings and errors into the Visual Studio Error List window where they work just like other code errors. Even better, it has the option to cancel the build on error. That means if jslint finds an error, the project build dies. In my world, this is fantastic. It means I don’t even try to test something if jslint finds something wrong with it. I consider this to be a huge productivity win.skip-on-build

The following JSLint global options were key for me to use jslint as a build-time checker:

  • Output: Errors – causes Visual Studio to interpret JSLint output as errors
  • Run JSLint on build: true – causes JSLint to test all .JS files during build
  • Cancel build on error true– causes JSLint errors to cancel the build, just like C# compiler errors
  • Assume a browser: true
  • Predefined Vars: jQuery, $
  • Strict whitespace: false
  • Maximum line length: 999
    One issue with cancelling the build on error is that jslint is pedantic and some of its warnings are not strictly errors which means that standard libraries like jquery aren’t going to pass jslint. Fortunately, you can exclude individual .js files from build-time testing by right-clicking on the files you want to exclude in the Solution Explorer window. (Note that jslint doesn’t plug its menus into the Solution Navigator window from the “Productivity Power Tools” extension. You have to use the Solution Explorer.)
    Happy linting.
Advertisements

5 Responses to JSLint.VS2010: Automatic JavaScript Static Analysis

  1. I like your article

  2. Isiah Walenta says:

    Is extremely good article

  3. Janaya says:

    Suodns great to me BWTHDIK

  4. I suggest you to take a look at JSAnalyse as well. It validates on architecture level the dependencies between JavaScript files.

    http://jsanalyse.codeplex.com/

  5. Pingback: Automated JavaScript quality validation « Anton Kallenberg

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: