It has rapidly gained popularity with web developers and designers – now software manufacturers are starting to take note with industry leaders like Adobe & Microsoft adding tools to their web development environments to help make jQuery development even quicker.

Microsoft Visual Studio 2008

I spoke previously about getting Jquery intellisense in Visual Studio 2008. Since then Scott Guthrie announced that that Microsoft will be shipping jQuery with Visual Studio going forward and then just yesterday I spotted this article on the Visual Web Developer Team Blog with interesting updates to VS2008′s jQuery intellisense. The best development from my point of view is the ability to get code hints in your aspx & master pages, not just your .js files.

In order to take advantage of these improvements you’ll first need to install Visual Studio 2008 Service Pack 1and this hot fix.

Next download the jQuery IntelliSense documentation file and save it in to your website in (probably a good idea to put it in the same folder as your jQuery file).

To add jQuery intellisense to a javascript file simply add this line to the top of the file:

  /// <reference path="jquery-1.2.6-vsdoc.js"/>

To add it to aspx & master pages do add the following lines to the head of your document.

    <% if (false)
       { %>
        <script src="~/[PATH_TO_REFERENCE_FILE]/jquery-1.2.6-vsdoc.js" type="text/javascript">
        </script>
    <%} %>

Points to note:

• The “if (false)” statement will prevent the link to the reference file being rendered at runtime.  Microsoft are planning to release a hotfix to automatically search for the vsdoc file if the javascript file has a reference path in it meaning that these links in the head will become redundant.
• If you are using aspnet’s MVC framework you need to ensure that your path to the reference file starts with a tilde otherwise VS will not find the reference file.
• dding a link to the reference to a master page means all aspx pages that inherit that master page will have intellisense enabled.

Adobe Dreamweaver

CS4

Adobe have just released Dreamweaver CS4 which also has support for jQuery code hinting. Adobe have taken a different approach to Microsoft, they use “introspection” to parse any javaScript files you have linked to your page and provide code hints.

This seems to work pretty well, and even handles chaining. However, I do have a couple of minor gripes. Firstly as soon as I typed “$(” dreamweaver told me I had a syntax error which really confused me, in the end I realised that just had to keep typing and DW would eventually figure out what I was doing. The other thing is, as a VS user I’m used to to code hits appearing strait away, in DW you have to press Ctrl + [space]. It’s not a big deal but would take some getting used to.

Older Vesions

Users of older versions of Dreamweaver this extension from Chris Charlton adds excellent code hints for jQuery & jQuery UI and what’s more it prompts you as soon as you hit “.” good work Chris!

One thing that was missing until now though was a way of getting jQuery intellisense in VS2008. Yesterday I spotted this article by James Hart which describes how this missing functionality can be be added. You need to make sure that you have this Visual Studio 2008 Hotfix installed then follow the instructions in James’ article and as if by magic you’ll have intellisense for your jQuery code! This has gone down a treat here and looks set to make life an awful lot easier.