Click here to Skip to main content
15,867,756 members
Articles / Programming Languages / Javascript

JSLint.VS - JavaScript Verifier for Visual Studio

Rate me:
Please Sign up or sign in to vote.
4.88/5 (29 votes)
9 Nov 2009CPOL5 min read 193.3K   964   82   36
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)


Written By
Chief Technology Officer
United States United States
If you liked this article, consider reading other articles by me. For republishing article on other websites, please contact me by leaving a comment.

Comments and Discussions

 
Questionhow to procedding these things in vs2012 Pin
Member 100425048-Jul-13 0:36
Member 100425048-Jul-13 0:36 
GeneralIf you see 'no found errors' on any js code - read this :) Pin
Sigura1-Feb-10 5:23
Sigura1-Feb-10 5:23 
1. Install lattest Windows Script Host
2. By default windows script host dont known 'js' exttension (Addin use it). Article with fix:

http://www.winhelponline.com/articles/230/1/Error-There-is-no-script-engine-for-file-extension-when-running-js-files.html

That is all Wink | ;)
GeneralRe: If you see 'no found errors' on any js code - read this :) Pin
zachgotnosauce7-Jun-10 9:10
zachgotnosauce7-Jun-10 9:10 
QuestionOptions? Pin
Kenny G12-Nov-09 4:57
Kenny G12-Nov-09 4:57 
AnswerRe: Options? Pin
Kenny G12-Nov-09 5:24
Kenny G12-Nov-09 5:24 
Questionanyone willing to take on the mantle? Pin
andychurchill30-Oct-09 7:34
andychurchill30-Oct-09 7:34 
GeneralJSLint updates Pin
khennadiy8-Oct-09 23:29
khennadiy8-Oct-09 23:29 
GeneralI unzipped, changed the post entries, and built, get error on start of VS2008 Pin
intrader10-Mar-09 12:04
intrader10-Mar-09 12:04 
AnswerRe: I unzipped, changed the post entries, and built, get error on start of VS2008 Pin
saremba_siemens1-Jul-09 4:26
saremba_siemens1-Jul-09 4:26 
GeneralMy vote of 1 Pin
Member 28214859-Mar-09 2:18
Member 28214859-Mar-09 2:18 
GeneralIssues under VS2K8 Pin
RichardGrimmer30-Jan-09 1:00
RichardGrimmer30-Jan-09 1:00 
QuestionWhat about JS libraries support? Pin
Alexander Turlov21-Jan-09 10:21
Alexander Turlov21-Jan-09 10:21 
AnswerRe: What about JS libraries support? Pin
lepipele21-Jan-09 10:30
lepipele21-Jan-09 10:30 
GeneralNice work! Pin
Alexander Turlov21-Jan-09 8:26
Alexander Turlov21-Jan-09 8:26 
GeneralRe: Nice work! Pin
lepipele21-Jan-09 10:27
lepipele21-Jan-09 10:27 
GeneralJSLint bug fixes and Edition 2009-01-22 (was Re: Nice work!) Pin
Frederick Staats28-Jan-09 14:56
Frederick Staats28-Jan-09 14:56 
GeneralRe: JSLint bug fixes and Edition 2009-01-22 (was Re: Nice work!) Pin
lepipele28-Jan-09 16:33
lepipele28-Jan-09 16:33 
Questionwhat about vs2005? Pin
irwinhurst14-Jan-09 6:33
irwinhurst14-Jan-09 6:33 
AnswerRe: what about vs2005? Pin
irwinhurst14-Jan-09 7:31
irwinhurst14-Jan-09 7:31 
GeneralIt doesn't seem to work Pin
ESTAN26-Nov-08 1:07
ESTAN26-Nov-08 1:07 
GeneralBrilliant Pin
justintimberlake3-Dec-07 17:41
justintimberlake3-Dec-07 17:41 
GeneralRe: Brilliant Pin
lepipele10-Dec-07 12:44
lepipele10-Dec-07 12:44 
GeneralVery Useful!!! Pin
docwhosv1-Dec-07 22:33
docwhosv1-Dec-07 22:33 
GeneralRe: Very Useful!!! Pin
lepipele2-Dec-07 1:37
lepipele2-Dec-07 1:37 
GeneralInstaller Pin
rodrigo diniz29-Nov-07 6:37
rodrigo diniz29-Nov-07 6:37 

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

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