This is a small tip I want to tell to my readers. I know, most of the dev's think like if Jquery intellisense is available in visual studio then that will be good :). So, this post will help you to solve that problem.
Below are the steps we need to follow to get the intellisense working in Visual studio 2008. Before start with the steps I will tell you how it helps us.
- Learn more and implement more: Because of having this intellisense support in vs 2008, we can solve so many problems and can implement so much in JQuery. It will be very difficult for everyone to remember all the functions and members for the Jquery objects. So, This will give more support to learn more and implement more.
- Fast and rapid development of the client side scripting. Until you don't know what methods and properties it has you can't write program fast and efficient.
- Time saving: Complete documentation for all Jquery objects, methods and properties. The inline description is more than enough to understand it well. Till these days, every time need to go to Jquery documentation site and need to search for what we need and read about them. But, now everything is in visual studio. Big time saving here.
- Load time: I know, at this point you may think how it will effect load time by adding the Jquery documentation file to page. By adding the vsdoc file [~188Kb] to the page won't increase the page size or won't effect the load time at all. We will refer the documentation file while coding or at development time only but it won't render on the client side. How? I will explain it later in this post.
Requirements:
- Install Visual Studio SP1.
- We need to download the vsdoc file from here.
- Install the hotfix for visual studio before proceed.
Steps to refer the documentation file(vsdoc):
- Refer the documentation file to js file: If you need jquery intellisense on the js file then you need to write the below declaration as the first line of your js file.
/// <reference path="jquery-1.3.2-vsdoc.js" />
Note: the path value is the actual path of the vsdoc file.
- Refer documentation file in ASPX page: This is what we need most of the times for writing inline scripting on the page. So, add below code to the <head> tag of the page for JQuery intellisense.
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<% if (false) { %>
<script src="jquery-1.3.2.min-vsdoc.js" type="text/javascript"></script>
<% } %>
Note: The Jquery file reference should always be the top of the Jquery documentation file reference. And if you install Visual studio SP1 and the hot fix then there is no need to place the complete IF block from the above code. And the vsdoc file should be in the same folder where the jquery file is.
Note: The short cut for the update intellisense in Visual Studio is
Ctrl + Shift + J. So, once reference added please done it once to update the intellisense.
How, Jquery intellisense work in Visual Studio?
It's simple. What JQuery –vsdoc.js file contains? Nothing but the description text for all the defined methods and properties. So, when you refer the vsdoc file in js file, it will load that file into memory and set the meta data for the Jquery methods and properties. If you refer the vsdoc file in ASPX pages, then it will set the metadata as follows.
First, Visual studio will look for the JQuery file, example jquery-1.3.2.js. And then it will look for the file which has the format jquery-1.3.2-vsdoc.js. If it matches then only visual studio loads the meta data and intellisense will work, otherwise not. So, your jquery file and documentation file should be having the same name with –vsdoc at end of the documentation file name.
Note: Jquery file: jquery-1.3.2.js and Jquery visual studio documentation file name: jquery-1.3.2-vsdoc.js
Lastly, I want to explain about the
load time from above mentioned bullet. If you observe the code I have given, it has some server-side code integrated in it. I wrote if condition which always fails to execute the code inside the if block because I am passing false always to it. So, it never runs the code inside the if block and nothing loads on the client side related to vsdoc file. At the time of development, server-side code won't run but all the meta data will load because there is a script tag on the page. So, at development time, the vsdoc file will load, but when you browse the page, vsdoc file won’t render.
That's it!!! I hope this will give nice idea of how Jquery documentation work in visual studio and how to add the reference to your files. Isn’t it? Please give your valuable feedback or comments on this post.
