Improving JavaScript code quality with JSLint integrated with Visual Studio

JSLint is a tool that goes through your JavaScript code and points out bad coding practises, including undeclared variables. You can now easily integrate JSLint with Visual Studio.

Contents

• JavaScript Weaknesses
• JSLint
• JSLint for Visual Studio 2010
• Conclusion

JavaScript Weaknesses

An increasing number of web sites are using JavaScript not only for non-critical features such as client side validation, but also for mission critical core features. This to the point where serious application frameworks such as Knockout andBackbone are now in widespread use.

The problem is that JavaScript was never meant for large scale programming:

1. Using an undeclared variable doesn't result in an exception, but in a new global variable - making JavaScript very error prone.
2. No compiler, so no compile time checking for syntax errors, etc.
3. No support for strong typing - making it harder for developers to write correct code and for browser vendors to write efficient interpreters/run time compilers.
4. No classes, no generics - classes can be simulated, but in roundabout ways.
5. JavaScript programs travel over the wire as source code, rather than more efficient bytecode.

With the demise of Silverlight however, there are now no alternatives to JavaScript that solve these problems.

JSLint

JSLint takes a little bit of the sting out of JavaScript programming. It is essentially a command line tool that goes through your program and picks up likely bugs and bad coding practices. Those bad practices have been set out by its author, Douglas Crockford, on his site.

JSLint has 30 options determining what likely bugs or practices to report on, from white space styling issues to disallowing eval and ++. Those options can go on the command line or in your source code as a specially formatted comment line. The naming of some options such asTolerate stupidity and Tolerate messy white space probably give some insight into Mr. Crockford's personality.

JSLint will pick up undeclared variables, but not type violations.

Other linting programs

JSLint is not the only linting program available. Others include:

• MiniMe
• JavaScript Lint

Lint in Visual Studio 2010

You could do you linting from the command line, but having it integrated with Visual Studio is much better. A number of solutions set out to do just that, including:

• JSLint.VS - fairly old, seems to be not supported anymore.
• Simple solution by Jason Diamond - maybe a bit hacky.
• JavaScript Lint integration with Visual Studio - very old.
• Instructions by Dave Taylor on how to add JSLint to Visual Studio as an external command.
• sharpLinter - can be used from command line, built in minifier.
• JSLint for Visual Studio 2010 - probably the most popular solution.

Of these options, JSLint for Visual Studio 2010 is the only true Visual Studio plugin. It has some nice features, including:

• Very easy to install - download the .vsix and double click it.
• Easy to configure from the Tools menu.
• Options to lint CSS, HTML and JavaScript.
• Option to validate each time you do a build, and to break the build if JSLint complains. Sadly, this does not break TFS Builds.
• Import / export settings to an .xml file, for backup to to share with your team.
• Issues found by JSLint appear in the Error List, like C# compile errors.
• Ability to skip linting for individual files and entire directories. Useful, because JSLint doesn't like minified code.
• Ability to not lint certain sections of code, using special comment lines.

Conclusion

It makes sense to lint your JavaScript to at least catch undeclared variables. Unlike unit testing JavaScript from within Visual Studio, linting JavaScript is now very easy to achieve.