Click here to Skip to main content
Click here to Skip to main content

JSLint.VS - JavaScript Verifier for Visual Studio

, 9 Nov 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
A Visual Studio add-in that uses JSLint to verify JavaScript files that are part of a solution.

Introduction

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.

Show Me What You've Got

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:

JSLint.VS validating file

And, here it is validating a code statement:

JSLint.VS validating code section

Finally, here is JSLint.VS in action when the programmer decides to Build Solution:

JSLint.VS validation starts up on Build Solution command

How it Works?

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:

JSLint.VS Options Form

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).

JSLint.VS Class digram

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.

Conclusion

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.

References

History

  • 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Predrag Tomasevic
Chief Technology Officer Atama Group
United States United States

Comments and Discussions

 
Questionhow to procedding these things in vs2012 PinmemberMember 100425048-Jul-13 1:36 
GeneralIf you see 'no found errors' on any js code - read this :) PinmemberSigura1-Feb-10 6:23 
GeneralRe: If you see 'no found errors' on any js code - read this :) Pinmemberzachgotnosauce7-Jun-10 10:10 
I wish this fixed it for me, but it didn't.
 
My scenario is:
Windows 7 x64 prof
VS 2005 Prof running as admin.
assoc .js response:
.js=JScript
 
also tried the vista registry, didn't help.
 
any thoughts anyone?
QuestionOptions? PinmemberKenny G12-Nov-09 5:57 
AnswerRe: Options? PinmemberKenny G12-Nov-09 6:24 
Questionanyone willing to take on the mantle? Pinmemberandychurchill30-Oct-09 8:34 
GeneralJSLint updates Pinmemberkhennadiy9-Oct-09 0:29 
GeneralI unzipped, changed the post entries, and built, get error on start of VS2008 Pinmemberintrader10-Mar-09 13:04 
AnswerRe: I unzipped, changed the post entries, and built, get error on start of VS2008 Pinmembersaremba_siemens1-Jul-09 5:26 
GeneralMy vote of 1 PinmemberMember 28214859-Mar-09 3:18 
GeneralIssues under VS2K8 PinmemberRichardGrimmer30-Jan-09 2:00 
QuestionWhat about JS libraries support? PinmemberAlexander Turlov21-Jan-09 11:21 
AnswerRe: What about JS libraries support? PinmemberPredrag Tomasevic21-Jan-09 11:30 
GeneralNice work! PinmemberAlexander Turlov21-Jan-09 9:26 
GeneralRe: Nice work! PinmemberPredrag Tomasevic21-Jan-09 11:27 
GeneralJSLint bug fixes and Edition 2009-01-22 (was Re: Nice work!) PinmemberFrederick Staats28-Jan-09 15:56 
GeneralRe: JSLint bug fixes and Edition 2009-01-22 (was Re: Nice work!) PinmemberPredrag Tomasevic28-Jan-09 17:33 
Questionwhat about vs2005? Pinmemberirwinhurst14-Jan-09 7:33 
AnswerRe: what about vs2005? Pinmemberirwinhurst14-Jan-09 8:31 
GeneralIt doesn't seem to work PinmemberESTAN26-Nov-08 2:07 
GeneralBrilliant Pinmemberjustintimberlake3-Dec-07 18:41 
GeneralRe: Brilliant PinmemberPredrag Tomasevic10-Dec-07 13:44 
GeneralVery Useful!!! Pinmemberdocwhosv1-Dec-07 23:33 
GeneralRe: Very Useful!!! PinmemberPredrag Tomasevic2-Dec-07 2:37 
GeneralInstaller Pinmemberrodrigo diniz29-Nov-07 7:37 
GeneralRe: Installer [modified] PinmemberPredrag Tomasevic29-Nov-07 7:56 
GeneralRe: Installer Pinmemberzhq_44257735831-Jan-10 20:41 
QuestionVS 2008 PinmemberMohamed A. Meligy26-Nov-07 11:20 
AnswerRe: VS 2008 PinmemberPredrag Tomasevic26-Nov-07 11:32 
GeneralRe: VS 2008 PinmemberMohamed A. Meligy26-Nov-07 11:58 
GeneralRe: VS 2008 PinmemberPredrag Tomasevic26-Nov-07 12:10 
GeneralRe: VS 2008 PinmemberPredrag Tomasevic10-Dec-07 13:42 
GeneralRe: VS 2008 PinmemberDaniel Rucareanu11-Dec-07 3:51 
GeneralRe: VS 2008 PinmemberPredrag Tomasevic11-Dec-07 14:14 
GeneralRe: VS 2008 PinmemberMember 23706238-Aug-08 15:39 
GeneralRe: VS 2008 PinmemberMember 23706238-Aug-08 15:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141216.1 | Last Updated 10 Nov 2009
Article Copyright 2007 by Predrag Tomasevic
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid