Microsoft: Adding IntelliSense for jQuery in WebMatrix and Microsoft development tools.

I had the opportunity to work with HTML5 APIs and jQuery development inside Microsoft WebMatrix, it is a light IDE and installed with libraries and extensions that made development richer.

In order for WebMatrix to really be a useful as an editor for jQuery, I really wanted to have IntelliSense support for jQuery. However, the annoying issue is that WebMatrix does not have a built-in IntelliSense support for jQuery in and other JavaScript tools.

As jQuery is one of our focuses here in this post, adding IntelliSense for jQuery is extremely easy, therefor I am going to explain how to add the IntelliSense support for jQuery into WebMatrix or other Microsoft development tools in an easy step.

The idea
---------------
Microsoft's developer tools like WebMatrix, Visual studio 2008 SP1 and upper versions, allow you to add IntelliSense for any JavaScript library by adding a Reference Directives (.vsdoc JavaScript file) to your page.

The files that you would use for your reference directives are available at the same Microsoft CDN where you can get the jQuery library from at:

http://www.asp.net/ajaxlibrary/cdn.ashx

How to do it
-------------------
In order to use IntelliSense for jQuery, you need to download the appropriate jquery-n.n.n-vsdoc.js file for the version of jQuery that you are using and store that in your page.

1. Your project structure should be as the following
   
   
   
   
   
   
   
2. Add the reference directive (jquery-2.0.3-vsdoc.js) into your html page as the following
   
   
   
   
   
   
   
3. You also can add it to you JavaScript library file, to get the power of IntelliSense for jQuery as the following
   
   
   
   
   

Result
-------------
Now you have added the library reference directives for jQuery version, into your IDE inside your page write jquery call by just jQuery or $ you will get:

Hit the .(dot) and you will also get

Conclusion
-----------------

Also as you notice in the previous pictures, the reference not just get the IntelliSense but more than this, it gives you the power of getting the methods documentation and parameters explanations on the fly, or by hover over the method after writing it.

Thanks to Microsoft reference directives.

References
----------------
1- Microsoft Ajax Content Delivery Network.