One big hurdle for developers moving to javascript is the lack of "compile time checking". The only way to see if your code is syntactically correct is to load it into a browser and run it. But, sometimes small syntax errors can cause the javascript parser to fail, and the file will not load. This is a huge pain, and a great way to waste hours trying to find the smallest of syntax errors.

Enter Javascript Validation. There are some on-line tools for validating javascript, and Douglas Crockford's JSLint is likely the most widely known. And while these tools can be handy, copy/pasting code into a text box, validating it, making changes, re-validating etc etc is tiresome.

Luckily for all of us Predrag Tomasevic created a Visual Studio add-in that uses JSLint to validate javascript from within Visual Studio 2005/2008. It's called JSLint.VS, and the code is over at CodeProject. Get it.

The simplest way to use it is to run JSLint on a file from the context menu...

But, if you look at the options (Tools --> JSLint.VS options) you can integrate this with your build.

You can see the options that I have checked - running with minimal items checked tones things down to just checking for syntax - which end up being the most irritating bugs to catch. For example here is some code that's catching an event, and then propagating that to another method along with some customized event arguments.

onClick: function(evt){
    // stub for event propagation
    console.log("DashboardMenu::onCommandItemClick");
    this.onCommandItemClick({
        action: this._menuConfig.action,
        type: this._menuConfig.type                
    });
},

The customized arguments being passed over to onCommandItemClick are created via object notation - JSON if you will. Since I'm refactoring the code quite frequently, small little things can become problems. For example, I decided I did not need to pass "type" along anymore. Ok, I just went in an deleted that line resulting in this code...

onClick: function(evt){
    // stub for event propagation
    console.log("DashboardMenu::onCommandItemClick");
    this.onCommandItemClick({
        action: this._menuConfig.action,                       
    });
},

And as usual I refreshed FireFox, and followed along in FireBug and all was well and good. An hour or so (and a dozen or more changes) later I tried the page in IE...

Oh sweet. Without getting into dojo.require etc etc, this message is basically saying that IE could not load the class "dts.DashboardController" from the file because of some javascript syntax error. What's not really clear is that the error could exist in that file, or any other class that's dojo.require'd by the specified class. In my case, the code shown above is in dts.DashboardMenu, which is required in dts.DashboardController as shown below...

dojo.provide("dts.DashboardController");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dts.DashboardMenu"); //<-- DashboardMenu is pulled in here

dojo.declare("dts.DashboardController",
    [dijit._Widget, dijit._Templated, dijit._Container],
    { 
        //class definition here...    
    }
);

So - back to the problem - those who work with javascript and JSON every day ,and have sharp eyes might have noticed the error in the second code block - there is an extra comma in the JSON. Firefox accepts this, and works just fine. However, in IE the file fails to parse and we get that error dialog.

Turning on JSLint.VS, I get a notice about the missing comma as soon as I build... with the line number... how easy is that!

This will clearly save me a LOT of time over the long-haul - if you are using Visual Studio for your javascript development, this should be a "must-have" addin.