by Ralph Whitbeck
In September 2008, at the jQuery Conference, it was announced that Microsoft would be shipping its upcoming releases of Visual Studio with jQuery built in. They would not fork or change the jQuery code but ship it as is. Microsoft also announced that they would distribute IntelliSense-annotated documentation JavaScript files for Visual Studio 2008 that developers can reference in their files to enable IntelliSense for jQuery. The following instructions will help you get started using this tool to make writing jQuery scripts faster than ever.
Setting up Your Files for jQuery IntelliSense
First, set up jQuery on your page by downloading the latest version from the jQuery site.
Next, you will need to download the jQuery Documentation file from the jQuery site.
Download the files and add them to your project.
IntelliSense in external JavaScript files
At the top of the JavaScript file in which you would like to have jQuery IntelliSense enabled, you will need to add a line to reference the documentation file:
/// <reference path="jquery-1.3.2-vsdoc2.js" />IntelliSense inline on your ASPX page
There are a couple of scenarios that may affect if you include a reference to the VSDOC file or not. If in doubt, just add a reference to the documentation file.
If you are linking to jQuery by the Google Code AJAX Library or are linking to jQuery from anywhere outside of your project you will need to reference the documentation file.
From each ASPX page you want jQuery IntelliSense you’ll want to call the reference within a server-side conditional statement so that the documentation file will still load in Visual Studio but will not load at run-time. Add the following after your jQuery declaration:
ASP:
1: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
2: 3: <% if (false) { %>
4: 5: <script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>
6: 7: <% } %>If you downloaded jQuery and saved it to your project Visual Studio will look for the vsdoc.js file automatically if the following conditions are met.
You've downloaded and installed the hotfix for Visual Studio.
jQuery and the documentation file need to be named the same with the exception that the documentation file end with -vsdoc.js. So when you add jQuery to your project make sure to rename them similarly. For instance, jquery-1.3.2.js is your jQuery library, Visual Studio will look for the documentation file at jquery-1.3.2-vsdoc.js and load it.
(Note: the jQuery 1.3.2 documentation file is named jquery-1.3.2-vsdoc2.js on the Download page so make sure you take out the 2 so that the file will be found by Visual Studio)
If you can't meet these conditions you'll need to reference the documentation file as shown above.
To test to make sure the documentation file loaded correctly, you can type $( and you should be presented with some documentation.
Additionally, you can type in $(document).r and you will be presented with a drop down of available options to choose from, one being "ready."
Now as you write your jQuery code, you'll be helped along by seeing what methods and properties are available to you.
Related Links
- Rich IntelliSense for jQuery
- jQuery and Microsoft
- jQuery, Microsoft and Nokia
- VS2008 SP1 Hotfix to Support "-vsdoc.js" IntelliSense Doc Files
Update
I've updated the post to reflect the hotfix for Visual Studio which enables Visual Studio to automatically load the documentation file for inline jQuery on ASPX pages if it's named similarly to the jQuery file. Thanks to Dave Ward for pointing this out in the comments.
Original post can be found here...
