Contact   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

jQuery Intellisense Updates from Microsoft


In case you missed it: Microsoft released the second part of their support tools for jQuery in Visual Studio this week. The second part comes in the form of a hotfix for Visual Studio 2008 SP1 that provides built-in support for –vsdoc.js files to – when present – automatically provide Intellisense support in Javascript documents. In combination with the recently released jQuery Intellisense file that Microsoft released you can now very easily get jQuery Intellisense in Visual Studio.

Here’s what this now looks like when accessing jQuery elements in the page:

jqueryIntellisense[1]

Note that you get Intellisense all the way down the chain – ie. not just on the first element. Notice also that plug-ins (draggable in this case) shows up as well in the list of ‘attached’ jQuery wrapped set functions.

Just as useful is Intellisense on individual members:

jQueryIntellisense2

with all parameters and some fairly detailed information provided on methods, and their parameters although there are a few functions that have missing parameters (all the before/after/append/appendto/prepend/prependTo etc.).

Notice also that the jQuery parameter stored into an instance variable is also recognized as a jQuery instance and so Intellisense works on the win variable as well as an explicit $() function.

What you need to use jQuery Intellisense effectively

Here are all the things that you need to get the best jQuery support in the VS 2008 editor:

  • Visual Studio 2008 SP1
    SP1 provides a number of enhancements to the Javascript Intellisense engine in Visual Studio and is the basis on which all the other enhancements run on. These improvements include faster parsing and some built-in knowledge of a few common Javascript libraries including jQuery to find and provide at least basic Intellisense support.

  • jQuery Intellisense document file (jQuery-1.2.6-vsdoc.js)
    This .js file is an annotated version of the base jQuery.js that includes detailed Visual Studio style Intellisense information about each of jQuery’s functions and utilities. None of the code is changed – only comments have been added. This file isn’t meant to replace your original jQuery.js file, but rather to serve as a more complete Intellisense file during development. Not meant for production.

  • VS 2008 SP1 Hotfix for –vsdoc.js Intellisense (KB958502)
    This hotfix enables any file with –vsdoc.js extension to act as an Intellisense background file for any referenced .js file. So if you have a script src referencing jquery.js all you have to do is have the jquery-vsdoc.js in the same folder as jquery.js and Visual Studio will automatically find and use the –vsdoc file for Intellisense. This works for jQuery with the above mentioned files as well as your own files.

This is all very nice and it works great.

I’ve talked about Intellisense some time back and I basically did something similar to my copy of jquery.js by providing a few key functions with Intellisense markup. So then when referencing the .js file I’d get the same Intellisense. With this support provided in Visual Studio it’s now become a lot easier to provide documentation in an external file simply by having a –vsdoc.js file for the same file.

The way this works is that Visual Studio first looks for the –vsdoc.js file, then a debug.js file and finally for the file you actually specified in the source.

In Practice

This works in basic script includes in the <head> tag or inside of the document inside of ASPX pages:

<head runat="server">
    <title>jQuery 101</title>   
    <script src="scripts/jquery.js" type="text/javascript"></script>
</head>

in script manager code:

<asp:ScriptManager ID="ScriptManager" runat="server">
    <Services>
        <asp:ServiceReference Path="~/MsAjax/MsAjaxStockService.svc" />            
    </Services>
    <Scripts>
        <asp:ScriptReference Path="~/scripts/jquery.js" />
    </Scripts>
</asp:ScriptManager>

or in script source files:

/// <reference path="~/scripts/jquery.js" />
/// <reference path="~/scripts/ww.jquery.js" />

Note that I prefer NOT to use the version number with my jQuery.js file to avoid later update renaming issues so my Intellisense file is actually jquery-vsdoc.js. Match whatever your main file name is version nunmber or not. Here’s what this looks like in a project in Visual Studio for me:

jqueryIntellisense

Note that I also have a jquery.min-vsdoc.js file in case I decide to embed the minimized version. Visual Studio is not checking for .min.js files and mapping them to the plain –vsdoc.js file – yet. So the following also works, but only if jquery.min-vsdoc.js is provided.

<head runat="server">
    <title>jQuery 101</title>   
    <script src="scripts/jquery.min.js" type="text/javascript"></script>
</head>

I spoke with Jeff King last week at PDC and there’s a chance that support for .min.js files might be added in the future natively. But even having the extra file should be no big deal because they are not used at runtime anyway so they don’t need to be deployed.

The Intellisense file and the hotfix in combination are a welcome addition to Visual Studio – it makes working with jQuery inside of the VS Javascript editor a lot easier because the documentation provided through the Intellisense interface is pretty rich and helpful in many situations.

Check it out if you haven’t already.

The Release/Debug Problem for Javascript

Although jQuery is specifically targeted here – this mechanism works with any .js file, so if you want to create Intellisense script for your own javascript files you can also store them externally. The downside is that maintaining comments in an external javascript code file is pretty much a maintenance nightmare – Intellisense currently needs to have a running Javascript file in order to interpret the comments. A better solution for this is eventually needed or else some built in tools that can strip comments automatically.

I’m doing the latter now through a custom script manager that minimizes and zips output, but really this should just not be necessary. ScriptManager does something similar but even it requires both debug and release scripts. Either way these  approraches work well only if you use resources or otherwise have ASP.NET serve the scripts rather than letting IIS optimize and do it. It’d be really nice if IIS natively could somehow participate in this process and provide minimization. I know I can do this with some ASP.NET code in a module myself, but IIS is already extremely optimized for the compression scenarios where it builds temporary files that are served with compressed data. This is something that ultimately would be nice to have native support for so developers can set a switch and not have to think about whether you’re working with release or ‘debug’ versions of files.

Make Donation
Posted in JavaScript  jQuery  


Feedback for this Post

 
# re: jQuery Intellisense Updates from Microsoft
by Kumar November 10, 2008 @ 10:10am
I just need to know how the intellisense will work in content pages (Each content page is using a script which is relevant to that and there are tones of content pages with only one master page). Do I have to include the reference to .js file in each content page to get the VS intellisense in the content page?
# re: jQuery Intellisense Updates from Microsoft
by Chris Marisic November 10, 2008 @ 1:31pm
Robert,

I was browsing my .Net blogs and came across a post that deals specifically with this, except in their case they use the data binding events to handle processing of the file location.

http://beckelman.net/post/2008/11/08/How-to-Use-Visual-Studio-jQuery-IntelliSense-Supported-Through-Hotfix.aspx
# re: jQuery Intellisense Updates from Microsoft
by Tom Groeger November 10, 2008 @ 4:55pm
Well, Intellisense for Javascript is something that I would have simply ignored one or two years ago, but now I find myself often writing more code in JS than in C# ... and I must admit that I like it a lot, specially since I use jQuery - my eternal thanks to Rick for bringing this wonderful piece of code to my attention.

I have played around with -vsdoc.js files ( prefer to name them *.debug.js ) and xml Javascript comments a lot in the last few days, great stuff for an oblivious person like I am. Here is a nice overview about the format:

http://weblogs.asp.net/bleroy/archive/2007/04/23/the-format-for-javascript-doc-comments.aspx

Anyway, what I would like to see for future ASP.NET Versions is a Server-Side support for Javascript files like .aspx or *.cs files have - like them, the JS Files should be 'compiled' ( iE: minified or compressed ) automatically after changes, then cached and delivered to the application, while the commented version stays on the server.

There should be a special Folder for Scripts like the .bin or App_code folders, so that we could 'import' Javascript files in pages and controls rather than trying to get unique <include> tags into our headers.
And I would _love_ to split huge Javascript files into seperate files and then have them automatically 'compiled' together in one minified production file .. maybe Visual Studio needs a 'JavaScript Project' type ?

Tom
# re: jQuery Intellisense Updates from Microsoft
by k_man November 11, 2008 @ 10:40pm
Thank you for all the jQuery articles. Made it a lot easier for me get up to speed on it.
# re: jQuery Intellisense Updates from Microsoft
by ScobY9 November 15, 2008 @ 2:43pm
don't install that hotfix, it messes up your javascript intellisense...
# re: jQuery Intellisense Updates from Microsoft
by Rick Strahl November 15, 2008 @ 5:48pm
What exactly? My Intellisense works fine - I mean besides jQuery.
# re: jQuery Intellisense Updates from Microsoft
by Godwin November 17, 2008 @ 5:42pm
Any signs of similar support for prototypa/Scriptaculous?
Thanks
# re: jQuery Intellisense Updates from Microsoft
by Chris December 13, 2008 @ 2:14am
Hi,

Is this limited to .html/.aspx files?

I try to keep all my JS in .js files, but can't seem to get the intiellisense to work in .js files. Is this a known issue?

Cheers,

Chris
# re: jQuery Intellisense Updates from Microsoft
by Iliya Tretyakov December 23, 2008 @ 11:04pm
It's nothing for case of Web-resources or Embedded Resource ;)

I'm crying.
# re: jQuery Intellisense Updates from Microsoft
by Iliya Tretyakov December 23, 2008 @ 11:33pm
For Web-resources or Embedded Resource
/// <reference path="~/jquery-1.2.6.js" />
is useless.
# re: jQuery Intellisense Updates from Microsoft
by Robert Werner April 21, 2009 @ 11:33am
Following your advice, I D/L both the Intellisense file and the HotFix. When I ran the latter on my Vista 64-bit machine it said that the required software was not present. VS2008 definitely is present but might the fact that my host environment is not 32-bit be causing this message?

Because the HotFix didn't run, does that mean that the Intellisense file will not be recognized and used?
# re: jQuery Intellisense Updates from Microsoft
by Rick Strahl July 21, 2009 @ 3:45am
@Robert - you probably need the 64 bit version of the hotfix.
# re: jQuery Intellisense Updates from Microsoft
by mark August 05, 2009 @ 5:30am
Hi Guys

im new to jquery and have just been trying to add intellisense support. I have vs2008 SP1, installed the hotfix (and rebooted), downloaded jquery-1.3.2-release.zip and unzipped it into my script directory. Ive also downloaded jquery-1.3.2-vsdoc.js

ive renamed jquery-1.3.2.js to jquery.js
renamed jquery-1.3.2-vsdoc.js to jquery-vsdoc.js

ive placed both in the jscript directory of my project and referenced the jquery.js file in my master page

typing some javascript into my content page does not activate the intellisense

var win = $("#FileNotFound"). ---> no intellisense

ive tried other code, but nothing works

standard javascript does work though, its only jquery

is there anything im missing here ?
# re: jQuery Intellisense Updates from Microsoft
by Gary Stafford March 11, 2010 @ 8:33pm
Rick - Thanks. Your advice on installing jQuery, –vsdoc.js file, and Microsoft's Intellisense update worked perfectly. I'm up and running. - Gary.
# re: jQuery Intellisense Updates from Microsoft
by Sergiy Shumakov September 15, 2011 @ 8:01am
Hello, thank you for such detailed article about VS 2008 IntelliSense JQuery support. I appreciate it :)
 


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2014