Enable JQuery Intellisense in Visual Studio

Hi,

While working with JQuery we normally feel a need of intellisense facility which can guide us about various JQuery syntax and functions.

Such documentation about JQuery is now available at http://appendto.com/community/jquery-vsdoc.

Here, I am going to explain the steps with example about how to enable JQuery documentation.

1. Navigate to http://appendto.com/community/jquery-vsdoc

2. Select the version of the JQuery for which you want to download the Documentation.

    In my example I have selected the latest JQuery Version which is (1.8.1)

     In fact you can download JQuery file also if you don't have it.

     Clicking on links will show the file contents in the browser itself which you can then save to your computer.

     For my example I actually have downloaded minified version of JQuery 1.8.1 from http://jquery.com/download/

3. Once files are downloaded place them to the proper location from where you are going to refer the them in your project or other html/aspx/js files.

   For the example I have created an ASP.NET application, and removed all other files from "Script" folder as they were old version of JQuery and saved downloaded JQuery and VSDoc files to that "Script" folder.

4. Include only JQuery file to your project if you are using Visual Studio.  

VSDoc file is not needed to be part of the project as it will be referred by relative path and also it won't be part of your final deployable version of the application.

And that's it, now you are all set up to use the JQuery documentation while you are writing javascript in script file (.js file) or in .aspx file or in .html file.

Let's see how.

1. In HTML file.

    You need to first refer the JQuery file to your html.

  Now as you write the JQuery cod in another script tag, you will be able to see the JQuery documentation as following.

Bingo, as you see the documentation show you about expected arguments of the JQuery function with their descriptions.

2. In ASPX file

  The same steps as for HTML file explained above, you need to follow to enable JQuery documentation in ASPX file too.

3. In .JS File.

Let say instead of writing all your scripts in HTML or ASPX files, you chose to have a separate JS file where you will write all your scripting code.

To enable JQuery documentation in JS file you only need to refer the VSDoc file in your JS file.

  

In the image above you can see that once documentation is enabled, you will be able to see all available methods for selected jquery object as you type in. Not much difference than writing code in C# or VB in Visual Studio.

 

Once you select a method and type opening parenthesis you get details about the parameters of the method and also the overloaded version of the method.

Courtesy

There is another nice blog about JQuery Documentation in VS2008 by Scott Guthrie available here.

Also there is a very nice descriptive video by Dan Wahlin about JQuery Fundamentals available here

I hope this will help the newbies in JQuery and scripting world in making their development smoother and more organized and hassle free.

Will be happy to see Comments/Suggestions/Views and to answer questions.

Thanks and regards,

Chetan Ranpariya