To enable intellisense completion for jQuery within VS
you'll want to follow three steps:
Step 1: Install VS 2008 SP1
VS 2008 SP1 adds richer JavaScript intellisense support to
Visual Studio, and adds code completion support for a broad range of JavaScript
libraries.
You can download VS 2008 SP1 and Visual Web Developer 2008
Express SP1 here.
Step 2: Install VS 2008 Patch KB958502 to Support
"-vsdoc.js" Intellisense Files
Two weeks ago we shipped a patch that you can apply to VS
2008 SP1 and VWD 2008 Express SP1 that causes Visual Studio to check for the
presence of an optional "-vsdoc.js" file when a JavaScript library is
referenced, and if present to use this to drive the JavaScript intellisense
engine.
These annotated "-vsdoc.js" files can include XML
comments that provide help documentation for JavaScript methods, as well as
additional code intellisense hints for dynamic JavaScript signatures that cannot
automatically be inferred. You can learn more about this patch here. You can download it for free here.
Step 3: Download the jQuery-vsdoc.js file
We've worked with the jQuery team to put together a
jQuery-vsdoc.js file that provides help comments and support for JavaScript
intellisense on chained jQuery selector methods. You can download both jQuery
and the jQuery-vsdoc file from the official
download page on the jQuery.com site:
Figure 1
Save the jquery-vsdoc.js file next to your
jquery.js file in your project (and make sure its naming prefix matches the
jquery file name):
Figure 2
You can then reference the standard jquery
file with an html <script/> element like so:
Figure 3
Or alternatively reference it using the
<asp:scriptmanager/> control, or by adding a /// <reference/>
comment at the top of a standalone .js file.
When you do this VS will now look for a
-vsdoc.js file in the same directory as the script file you are referencing,
and if found will use it for help and intellisense. The annotated
For example, we could use jQuery to make a
JSON based get request, and get intellisense for the method (hanging off of
$.):
Figure 4
As well as help/intellisense for the
$.getJSON() method's parameters:
Figure 5
The intellisense will continue to work if you
nest a callback function within the method call. For example, we might
want to iterate over each JSON object returned from the server:
Figure 6
And for each of the items we could execute
another nested callback function:
Figure 7
We could use the each callback function to
dynamically append a new image to a list (the image src attribute will point to
the URL of the returned JSON media image):
Figure 8
And on each dynamically created image we could
wire-up a click event handler so that when it is pressed it will disappear via
an animation:
Figure 9
Notice how the jQuery intellisense works cleanly at each
level of our code.