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.
- Install Visual Studio SP1.
- We need to download the vsdoc file from here.
- Install the hotfix for visual studio before proceed.
- 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.
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.
<% 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.
Hi Praveen,
ReplyDeleteIn Visual studio 2008 with SP1 installed and over that the patch which you mentioned,if all this is installed then we don't need
"script src="jquery-1.3.2.min.js" type="textjavascript"script
% if (false) { %
script src="jquery-1.3.2.min-vsdoc.js" type="text/javascript" script
% } %"
to be included vsdoc file is automatically found but the important thing is that both jquery.js and jquery-vsdoc.js file should be in the same folder.
Ashish, thanks for the comment.
ReplyDeleteIf you are correct, then we don't need to write the server-side code for if(false)? I didn't test it and if you are right, will see how VS is removing from the response HTML that script tag for vsdoc file.
Hi Praveen,
ReplyDeleteI have used it earlier in my project but i am not sure about the min file but for the main .js file it works there were talks to support the min file also at that time.
Meanwhile you can have a look at this link although it's a little old hehe........
http://www.west-wind.com/weblog/posts/536756.aspx
interesante la publicación :):):):):):)
ReplyDeleteSuper article to use jquery intellisense in visual studio.. thanks
ReplyDelete