With this article, I wanted to do something completely different from my previous two. If you've read them, you saw that they are detailed descriptions of respective topics – somewhat like guides that arm you with complete knowledge on a subject.
The problem with that is – you leave the reader without something solid. You just can't write "Guide to .NET Reporting" that'll design reports that the reader needs. So, this time, I wanted to provide you with something you can use on a daily basis, without needing to chew on knowledge presented here or tailor it to fit your needs. I wanted to do something short, sweet, and immediately useful.
In choosing the topic, I was somewhat selfish. During the years of my coding, there was nothing that caused me more joy and pain at the same time than JavaScript development. I mean, every time I needed to code some JavaScript, it was like getting a crush on a bad kinky girl – you are taken in by the charm while thinking that a few tricks will do the job... but as soon as you commit yourself, the situation gets messy and you start to feel lost and depressed.
With girls, I have developed an arsenal of excuses (she is into money, she likes guys who treat her like garbage, and so on), but with JavaScript, just one – being no one's child, JavaScript is left without tools that support proper development.
Happily for me, during one late night browsing session, I stumbled upon JavaScript video tutorials from Douglas Crockford. Old man simply 0wnZ; if you haven't seen them, and you are into JavaScript, then stop wasting time – open up a few packages of popcorn and watch the videos (The JavaScript Programming Language, Theory of the DOM, Advanced JavaScript). You'll save tons of time that would otherwise be spent on reading lousy written JavaScript books/tutorials or Googling for explanations of copy-pasted code statements that you just can't get into.
Besides being great for explaining JavaScript, they've lead me to JSLint, a useful tool that provides verification of JavaScript code, thus shortening periods you spend in browser testing your scripts, enabling you to be more productive. After seeing it in action, I immediately started thinking on how to integrate it with Visual Studio.
I wanted to provide users with the ability to JSLint a file, code section, or integrate JavaScript verification with a build.
Here is the JSLint.VS in action on a file:
And, here it is validating a code statement:
Finally, here is JSLint.VS in action when the programmer decides to Build Solution:
JSLint.VS is a pretty standard Visual Studio add-in. I won't go into the basics, so if you lack knowledge about add-ins, you'll probably want to read an article like this to catch on the concepts.
As in any Visual Studio add-in, Connect is the main class that handles the events of Visual Studio and executes the commands. In this project, it is used to register JSLint entries into VS context menus, catch changes to JavaScript files, notify other classes when Building of a Solution is started, and so on...
OptionsForm is the interface with the user, enabling the configuration of JSLint.VS. You can see it in action in the image below:
Finally, JSLintProcessor is the class that does the main work – on the Build event / user request (Connect.cs) to lint file, it builds the error list using the selected options (OptionForm.cs). The biggest problem was to figure out what to use for running the JavaScript code. After ditching the idea of having a hidden browser window reference in this class (it just sounds horrible, doesn't it?), I turned to the Windows Script Host. As WHS process takes some time to start, it is practically impossible to start an individual WSH process for every JavaScript lint file in big projects. So, during checking, I join all the scripts into one big temporary lint file, and then split results to provide links to the original scripts in the Task list.
To sum up everything said, here is the class diagram showing the main parts of the previously mentioned classes. You can also notice the additional, less important, helper classes – for holding data (FileDataHolder, JSLintOptionsItem) and serializing JSLint options to hard disk (DictionarySerializer).
I left lots of comments in the code, so I'm sure that you'll manage on your own if you are into further extending this add-in. Requesting features through comments that I'll implement for you is always an option.
As said in the introduction, I hope that reading this article enriched your development arsenal with one useful tool. Before leaving you to play with the source code, one final word of warning – as Douglas said in one of his speeches – JSLint will probably insult you. If you are an average JavaScript coder, in the first few runs, you'll be buried with errors, so be ready on JSLint notifications that tell you - your code is crap.
On the other hand, every error is followed by a concise description of the problem (while this website contains detailed explanations on why something is preferred) – meaning that by fixing errors, you'll develop nice JavaScript coding habits. The more of us have those, the more understandable and maintainable JavaScript code we'll see in the future... enabling us easier sharing and learning, while trying to live up to the big hype that surrounds Web 2.0.
- January 28, 2009 - Bugfixes related to build integration, CodePlex page (thanks to Alexander Turlov & Frederick Staats)
- December 11, 2007 - Updated add-in to support Visual Studio 2008, a few small bug fixes.
- November 25, 2007 - Initial version of the article.
