jQuery Intellisense in Visual Studio 2008

In this article i will discuss how to add jQuery intellisense in Visual Studio 2008. I will discuss

•    How to add jQuery intellisense in .aspx page.
•    How to add jQuery intellisense in  external  javascript file.
•    How to add jQuery intellisense in .ascx usercontrol.


Step1:Install  Visual Studio 2008 Service Pack 1.

To see whether you have already installed version of Visual Studio 2008 Service Pack 1.
Open Visual studio. Go to Help>>About Microsoft Visual Studio

The About Microsoft Visual Studio window will open.

Notice that there should be Version…..SP.  That is SP denotes that service pack is installed on your machine.

If visual studio service pack is not installed then your first step is to install it.




Step2:Download and install VS2008 SP1 Hotfix to Support "-vsdoc.js" IntelliSense Doc Files
You can get information regarding hot fix in detail on below links
http://blogs.msdn.com/webdevtools/archive/2008/11/07/hotfix-to-enable-vsdoc-js-intellisense-doc-files-is-now-available.aspx
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736

Step3:Download the jQuery-vsdoc.js file
Go to http://docs.jquery.com/Downloading_jQuery#Download_jQuery
You will find different releases of jQuery .I am showing you an example of jQuery 1.3.2 release.

Click Visual Studio link in front of Documentation tag. You will be redirected to next page.
In next page you can found the link for downloading jQuery-vsdoc.js file

Note the file name is  jQuery-VersionNumber-vsdoc2.js.After downloading that rename it to jQuery-VersionNumber-vsdoc.js. You would have noticed that I have removed 2 from the vsdoc2 in the end. Now there are two scenarios’ you might be working with
•    jQuery-VersionNumber.js (for example jquery-1.3.2.js)
•    jQuery-VersionNumber.min.js (for example jquery-1.3.2.min.js)

I will explain how to deal with both scenarios
I have taken a scripts name folder in my root directory.

In first case jQuery-VersionNumber.js (for example jquery-1.3.2.js)
Now my jQuery script file is  jquery-1.3.2.js.And I have renamed that vs doc file as jQuery-VersionNumber-vsdoc.js ie I have named that file as  jquery-1.3.2-vsdoc.js






In second scenario jQuery-VersionNumber.js (for example jquery-1.3.2.min.js)
Now my jQuery script file is jquery-1.3.2.min.js.And I have renamed that vs doc file to  jQuery-VersionNumber.min-vsdoc.js i.e. I have renamed that file as  jquery-1.3.2.min-vsdoc.js

I have added an .aspx page Default.aspx in the root directory.
Got to Source view of Default.aspx page





Add reference of jquery script file to Default.aspx page

Now press CTRL+ SHIFT+J to update the Jscript intellisense or Go to
Edit>>IntelliSense>>Update Jscript Intellisense

You will see Update JScript Intellisense message.

And that’s it you are done.:)
Now you can test that your jQuery intellisense has started working.

How to add  jQuery Intellisense in External javascript file

I have added one more javascript file with name My.js in script folder

Add the reference of jQuery file at the top of My.js file
/// <reference path="jquery-1.3.2.min.js" />

Now press CTRL+ SHIFT+J to update the Jscript intellisense or Go to
Edit>>IntelliSense>>Update Jscript Intellisense
And that’s it you are done.:)




You can check in My.js for jQuery intellisense.



How to add  jQuery Intellisense in UserControl

I have added one folder with name usercontrols and also added on usercontrol with name TestUserControl.ascx.



Add the below code at the top of the TestUserControl.ascx page

<%  if (false) {%>
<script type="text/javascript" src="../scripts/jquery-1.3.2.min.js"></script>
<%} %>

Now press CTRL+ SHIFT+J to update the Jscript intellisense or Go to
Edit>>IntelliSense>>Update Jscript Intellisense
And that’s it you are done.:)

You can check in TestUserControl.ascx for jQuery intellisense.Now you will be wondering why I have added that script tag
<script type="text/javascript" src="../scripts/jquery-1.3.2.min.js"></script> in this TestUserControl.ascx usercontrol ,as in most scenarios I believe  that reference to the script file is already present in Master page or in the .aspx page where you want this usercontrol to be present.Then Why??? and one thing more you would have noticed in the code
<%  if (false) {%>
……..
<%} %>

The logic behind is that at run time if (false ) will always return false.So ASP.NET engine will never render that script tag. But Visual studio will catch that and provide you intellisense while you are working with your code development.

So In above article I hopes you are cleared with these
•    How to add jQuery intellisense in .aspx page
•    How to add jQuery intellisense in .aspx external  javascript file
•    How to add jQuery intellisense in .ascx usercontrol.

More References

http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx
http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx
http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx
http://blogs.msdn.com/webdevtools/archive/2008/11/18/jscript-intellisense-faq.aspx
http://www.west-wind.com/Weblog/posts/536756.aspx


Happy Reading !