jQuery Intellisense in VS 2008

Last month I blogged about how Microsoft is extending support for jQuery.  Over the last few weeks we've been working with the jQuery team to add great jQuery intellisense support within Visual Studio 2008 and Visual Web Developer 2008 Express (which is free).  This is now available to download and use.

Steps to Enable jQuery Intellisense in VS 2008

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:

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

You can then reference the standard jquery file with an html <script/> element like so:

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

As well as help/intellisense for the $.getJSON() method's parameters:

 

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:

And for each of the items we could execute another nested callback function:

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

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:

Notice how the jQuery intellisense works cleanly at each level of our code. 

JavaScript Intellisense Tips and Tricks

Jeff King from the Web Tools team wrote up a great post earlier this week that answers a number of common questions about how JavaScript intellisense works with VS 2008.  I highly recommend reading it.

One trick he talks about which I'll show here is a technique you can use when you want to have JavaScript intellisense work within user-controls/partials (.ascx files).  Often you don't want to include a JavaScript library <script src=""/> reference  within these files, and instead have this live on the master page or content page the user control is used within.  The problem of course when you do this is that by default VS has no way of knowing that this script is available within the user control - and so won't provide intellisense of it for you.

One way you can enable this is by adding the <script src=""/> element to your user control, but then surround it with a server-side <% if %> block that always evaluates to false at runtime:

At runtime ASP.NET will never render this script tag (since it is wrapped in an if block that is always false).  However, VS will evaluate the <script/> tag and provide intellisense for it within the user-control.  A useful technique to use for scenarios like the user control one.  Jeff has even more details in his FAQ post as well as his original jQuery intellisense post.  Rick Strahl also has a good post about using jQuery intellisense here.

More Information

To learn more about jQuery, I recommend watching Stephen Walther's ASP.NET and jQuery PDC talk. Click here to download his code samples and powerpoint presentation.

Rick Strahl also has a really nice Introduction to jQuery article that talks about using jQuery with ASP.NET.  Karl Seguin has two nice jQuery primer posts here and here that provide shorter overviews of some of the basics of how to use jQuery. 

I also highly recommend the jQuery in Action book.

Hope this helps,

Scott

Published Friday, November 21, 2008 2:07 AM by ScottGu

Comments

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 5:18 AM by Spark

That's great!

Thanks!

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 5:21 AM by Johan Nordberg

How about Prototype.js? Is it possible to get intellisense for that too?

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 5:23 AM by ScottGu

Hi Johan,

>>>>> How about Prototype.js? Is it possible to get intellisense for that too?

The intellisense engine works for Prototype.js as well.  We don't have a custom -vsdoc.js file for Prototype right now (although anyone could build one).  You should be able to use SP1 and get basic intellisense as-is.

Thanks,

Scott

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 5:24 AM by Shankar

Will Jquery traverse the Silverlight 2/3 DOM which is hosted in ASP.NET?

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 5:27 AM by ScottGu

Hi Shankar,

>>>>>> Will Jquery traverse the Silverlight 2/3 DOM which is hosted in ASP.NET?

No - jQuery only traverses the HTML DOM.  You can call managed methods in Silverlight from JavaScript.  But the control tree within Silverlight is separate from the HTML one.

Hope this helps,

Scott

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 6:25 AM by Frederik Vig

You could also use a placeholder with visible set to false instead of the server side <% if %> for the javascript file(s).

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 7:27 AM by Johan Nordberg

I cant get prototype.js intellisense to work. Shouldn't work with a regular script src-tag and reference prototype.js?

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 9:31 AM by Chrissteven81

I'm not sure if I'm Missing something but I seem to have run into a few problems.

1. Back in VS 2005 there was a bug where we could not use the name asp:Scriptmanager because we would always get a squiggly line under asp and it would through an error. Carried over to 2008 my Name is Ajax.UI.ScriptManager which does not seem to trigger the intelisense. Is this a limitation?

2. I am realy big on keeping my code seperate I realy hate reading code that has html mixed with VB mixed with JS mixed with XML. I'm so big about it that I changed VS registers so my files nest

ex:

Page.aspx

-Page.aspx.js

-Page.aspx.vb

-Page.aspx.resx

-...

and only my Global JS files go in my scripts folder. That said I am having trouble getting jquery intelisense for files that are not in the same folder as the jQuery js files. What is the best way to do this?

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 9:53 AM by MorningZ

So does it make sense to make the "packed" or "minified" versions file name the plain one and then make the full/debug version the "-vsdoc.js" one?

For example....  all the jQuery UI stuff comes in three flavors

ui.tabs.js  (full commented version)

ui.tabs.min.js (whitespace stripped and variable names shortened)

ui.tabs.packed.js (packed up using a tool like Dean Edwards "packer")

So as a programmer in VS2008 all day and night does it make sense to  (i usually use the mini versions)

rename

"ui.tabs.js" to "ui.tabs-vsdoc.js"

and then

"ui.tabs.min.js" to just "ui.tabs.js"

That way when i am working on a site, studio is seeing the full versions (no "comments" because they haven't been worked like the core jQuery file, but at least the full parameter names are available, which is a huge help)...  and when i deploy the non-"-vsdoc" files that the project will use are really the more production-friendly minified versions?

Does that make sense to others?

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 11:04 AM by Viktar Karpach

Very fast response. It's been less than a month, when I read about jQuery Intellisense support in MS Visual Studio 2008 and here it is.

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 11:05 AM by ScottGu

Hi MorningZ,

>>>>>>> So does it make sense to make the "packed" or "minified" versions file name the plain one and then make the full/debug version the "-vsdoc.js" one?

Yes - I think that makes a lot of sense to-do.  That is what I do with the core jQuery library.  I link to the -min version and have the -vsdoc file match that name.

Hope this helps,

Scott

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 11:06 AM by Mike

Anyone else having problems getting this to work. Followed the steps and now when I am viewing a .aspx page in my ASP.NET MVC project (using MVC Beta) I get the following in my error pane:

Error updating JScript IntelliSense: [PATH]\jquery-1.2.6-vsdoc.js: 'childNodes' is null or not an object @ 1571:4

If I comment out that line everything works great.

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 11:08 AM by ScottGu

Hi Richard,

>>>>>>> I am just curious. I am using VS Team System 2008 SP 1 and I am experiencing really really slow behaviour on the javascript intellisense, and javascript files in general. If the js files grows relativly large, like +1000 lines or so. The editor becomes almost impossible to use. I mean if I type a key, it takes a few seconds for the editor to respond, it lagges behind. It seems to hog the entire environment to a unbearable pace.

That seems wrong - you shouldn't have an issue like that.  Can you send me more information (email: scottgu@microsoft.com) about the files you are referencing?  Can you also pull up the Help->About menu in VS and select the "Copy Info" button and paste it into the email you send?  We have seen some third party plugins cause issues in the past related to Intellisense - that might be the possible cause.

Thanks,

Scott

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 11:29 AM by David

If I buld a JQuery plugin is it necessary to have a seperate JQuery.MyPlugin-vsdoc.js  file?

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 12:18 PM by jeff.aspx

@David: While great to have, "vsdoc" files are not required for IntelliSense to work.  You should get basic IntelliSense for your plug-in even without the "vsdoc" file.  If there are function return types that are difficult to infer by our parser, then that's where XML Doc Comments would be helpful and you can put those in the "vsdoc" file to avoid making your regular file heavier.

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 12:23 PM by jeff.aspx

@Richard: There is a known issue where typing in 1000+ line-long files will be really slow, sorry!  We currently don't have a great workaround, but we have fixed the bug in our internal builds so you should see it in the next release.  Feel free to email me at jking at microsoft dot com if you have any more questions.  Thanks!

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 1:09 PM by Tony

Is it possible to get this working in VS 2005?

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 2:29 PM by dimitri

What about scenarios where we are adding .js files at runtime in codebehind to a basepage?

For example, I have a basepage which has a collection of URI's which it iterates through to load .js files.  In a page that inherits from that basepage, I include jquery...

How do we get intellisense working with that type of setup?

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 2:45 PM by James

Mootools support would be great!

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 4:13 PM by shailatlas

@Tony

Not its not available in VS 2005. But still if you need to see its in action or want to learn how to use that with ASP.Net download the trial version of VS 2008 ( Together with service pack and patch ) and use it there.

Even you can open your VS 2005 solution in VS 2008 ( after making a copy of .sln file ). This way you can see the intellisense, and you can learn more about jQuery.

And the best is use VS 2008 express edition ( it is also updated for intellisense )

Shail

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 4:18 PM by shailatlas

@Dimitri

For your case, you can still use the <% if ( false ) ...%> tag around the script reference for the doc file. Doesn't matter whether you decide in your code behind to include the main file or not.

VS will look for doc file, if you have script tag in aspx file, not the code behind file. It has no way to understand what you are writing inside string ="<scri" ...............Or even if you include that by accessing scriptmanager in code behind.

Shail

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 4:58 PM by gbogea

That's great news. I was already using the jQuery VS file with ASP.NET MVC and it works great.

The use of jQuery without branching it to a MS version is great news and shows a really promising future for Microsoft. The community has a lot to offer and making everyone a part of development effort will bring a lot more people to the .NET platform. I'm sure you are already noting this with the MVC development.

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 6:35 PM by Robert

It's funny that only x86 is offered when 75% installs of VS2008 are x64.  On top of most servers are x64 too.

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 6:47 PM by Justin Zhang

Hi Scott

I got a problem. I reference two js files ('jquery-1.2.6.js and 'ui.datepicker.js') on my page and the Intellisense doesn't work on this page. Then after I remove the reference to 'ui.datepicker.js' file, the Intellisense works well~~~ Is this a bug? :)

# re: jQuery Intellisense in VS 2008

Friday, November 21, 2008 11:52 PM by Vishal

Hi Scott,

I am using Visual Studio 2008 SP1.

Initially it takes a lot of time to load JQuery intellisense in Visual Studio, when you reference JQuery.js first time in any web form. Afterwards, it works as usual without any problems.

--

Vishal.

# re: jQuery Intellisense in VS 2008

Saturday, November 22, 2008 6:40 AM by jenyyoung

Looks promising and in the right direction. Thanks.

# re: jQuery Intellisense in VS 2008

Saturday, November 22, 2008 11:01 AM by Steve

Scott, this is only working for webforms for me.

ie. in my asp.net mvc site - with jquery in the master page - it's not working?

Most my javascript is in separate js files as well

Is there a limitation to this to embedded js within a webform page?

# re: jQuery Intellisense in VS 2008

Sunday, November 23, 2008 7:21 AM by shailatlas

@Vishal

This is because , VS will start updating its intellisense and intellisense cache, the first time you reference a script file. So you will see intellisense for only included script sources. You will not get intellisense for any file which is not included or referenced. Check this line in the blog

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

Shail

# re: jQuery Intellisense in VS 2008

Sunday, November 23, 2008 8:06 PM by chanva

This post is always very helpful.

# re: jQuery Intellisense in VS 2008

Monday, November 24, 2008 7:59 AM by orip

What's the logic used to find the -vsdoc.js file? (I wasn't sure from your response to MorningZ)

If I have foo-vsdoc.js, which of the following script references will cause VS to find it?

foo.js

foo.min.js

foo-min.js

Is it possible to tell VS to look for the -vsdoc.js file explicitly regardless of its name?

Thanks!

# re: jQuery Intellisense in VS 2008

Monday, November 24, 2008 8:32 AM by orip

BTW - I forgot about the "if(false)" hack (from Jeff King's post), should work fine.

# re: jQuery Intellisense in VS 2008

Monday, November 24, 2008 1:32 PM by massfellows

interesting information as always.

# re: jQuery Intellisense in VS 2008

Monday, November 24, 2008 2:50 PM by Bryan

Great post! I can't wait to dig in. I only have one complaint with your team, too much good stuff coming out so fast I can't keep up! :)

Thanks for the work!

B

# re: jQuery Intellisense in VS 2008

Monday, November 24, 2008 8:25 PM by Ryan Connelly

I'm impressed. Now if only we could get prototype support...

# re: jQuery Intellisense in VS 2008

Tuesday, November 25, 2008 11:12 AM by Chris Rock

I remember the code in this post from a demo but can't recall where it was.  Does anyone recall?  It displayed several images and when you clicked on one the image disappeared.

# re: jQuery Intellisense in VS 2008

Tuesday, November 25, 2008 12:30 PM by Steven.co.uk

This is a great addition to Visual Studio and will definitely increase productivity. It's also good to see Microsoft embracing a 3rd party tool.

# re: jQuery Intellisense in VS 2008

Wednesday, November 26, 2008 3:50 AM by Thijs Karreman

Scott, thank you for the information.

For the people who want to use the intellisense in a seperate *.js file append the following line at the top of your *.js file:

/// <reference path="jquery-1.2.6.js"/>

# re: jQuery Intellisense in VS 2008

Wednesday, November 26, 2008 10:15 AM by ChrisBill

Good to hear that Microsoft is integrating jquery into VS 2008.

What I think is strange, is that JQuery, an open source project, created by volunteers only (afaik), is being integrated in a commercial product that people have to buy from Microsoft.

I know that the express edition is for free, but the "full" versions of VS 2008 aren't. Basically I really like the idea that different development teams collaborate and share knowledge and even code, but on the other hand JQuery is built by people who do not get any money for their efforts. Now Microsoft uses Jquerys ideas and work to enhance their own products for which they want money from the people.

Do I misunderstand the whole situation or is everyone just excited about the JQuery - VS integration or did Microsoft donate JQuery salaries for the next 5 years? :)