Setting up Visual Studio Intellisense for jQuery

read 26 comments

In September 2008, at the jQuery Conference, it was announced that Microsoft would be shipping its upcoming releases of Visual Studio with jQuery built in. They would not fork or change the jQuery code but ship it as is. Microsoft also announced that they would distribute IntelliSense-annotated documentation JavaScript files for Visual Studio 2008 that developers can reference in their files to enable IntelliSense for jQuery. The following instructions will help you get started using this tool to make writing jQuery scripts faster than ever.

Setting up Your Files for jQuery IntelliSense

First, set up jQuery on your page by downloading the latest version from the jQuery site.

Next, you will need to download the jQuery Documentation file from the jQuery site.

download documentation

Download the files and add them to your project.

IntelliSense in external JavaScript files

At the top of the JavaScript file in which you would like to have jQuery IntelliSense enabled, you will need to add a line to reference the documentation file:

/// <reference path="jquery-1.3.2-vsdoc2.js" />

IntelliSense inline on your ASPX page

There are a couple of scenarios that may affect if you include a reference to the VSDOC file or not. If in doubt, just add a reference to the documentation file.

If you are linking to jQuery by the Google Code AJAX Library or are linking to jQuery from anywhere outside of your project you will need to reference the documentation file.

From each ASPX page you want jQuery IntelliSense you’ll want to call the reference within a server-side conditional statement so that the documentation file will still load in Visual Studio but will not load at run-time. Add the following after your jQuery declaration:

ASP:
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  2. <% if (false) { %>
  3.   <script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>
  4. <% } %>

If you downloaded jQuery and saved it to your project Visual Studio will look for the vsdoc.js file automatically if the following conditions are met.

You've downloaded and installed the hotfix for Visual Studio.

jQuery and the documentation file need to be named the same with the exception that the documentation file end with -vsdoc.js. So when you add jQuery to your project make sure to rename them similarly. For instance, jquery-1.3.2.js is your jQuery library, Visual Studio will look for the documentation file at jquery-1.3.2-vsdoc.js and load it.

(Note: the jQuery 1.3.2 documentation file is named jquery-1.3.2-vsdoc2.js on the Download page so make sure you take out the 2 so that the file will be found by Visual Studio)

If you can't meet these conditions you'll need to reference the documentation file as shown above.

To test to make sure the documentation file loaded correctly, you can type $( and you should be presented with some documentation.

test IntelliSense

Additionally, you can type in $(document).r and you will be presented with a drop down of available options to choose from, one being "ready."

test with document ready

Now as you write your jQuery code, you'll be helped along by seeing what methods and properties are available to you.

Related Links

Update

I've updated the post to reflect the hotfix for Visual Studio which enables Visual Studio to automatically load the documentation file for inline jQuery on ASPX pages if it's named similarly to the jQuery file. Thanks to Dave Ward for pointing this out in the comments.


comment feed

26 comments

  1. Mario

    We already have that in textmate, but it would be cool to have that kind of prediction. And Apple should pay attention very close...

  2. Frédéric Hewitt

    Note that the use of the shorthand method for jQuery, with the parameter for avoiding library conflict jQuery(function ($) {}); break the IntelliSense because the $ sign is not recognized.

    I've finally opted for:

    (function($) {
        jQuery(function () {
            
        });
    })(jQuery);

    But it's certainly not the shortest method... On other side, it's also good for wrapping code who don't need to wait the DOM ready event in the closure.

  3. If you use the /// syntax in an external .js file, you don't need the if(false) script include. The reference alone will work.

    • Ralph Whitbeck

      Correct the if(false) is if you are doing inline jquery on your ASPX page.

      • For inline usage, you can get this hotfix: http://blogs.msdn.com/webdevtools/archive/2008/11/07/hotfix-to-enable-vsdoc-js-intellisense-doc-files-is-now-available.aspx

        It will automatically search for the vsdoc, without the if(false) reference. You would still need to use that trick if you're working with the Google hosted jQuery though (or otherwise referencing it from outside your project).

        • Ralph Whitbeck

          Thanks Dave I made an update to the post regarding this.

          I haven't tested it but will this still work if you don't rename the latest doc file for 1.3.2 which is named ...vsdoc2.js? Since VS would be looking for the a file named ...vsdoc.js? Should I also update the post to make sure people rename the file?

        • Yes, you do need to rename it to match whatever your jQuery include is named.

        • Ralph Whitbeck

          Dave, I've significantly updated the post to reflect the hotfix for Visual Studio. Thank you very much for bringing this to my attention.

          The main reason I wrote this post was to help others in the jQuery/ASP.NET community figure out how to use the documentation file as it seems the instructions are scattered all over various blogs. It definitely took me some searching to figure out how to use it the first time.

        • Great. Thanks for your sharing.

  4. I wrote a post in my blog yesterday about this subject, sharing my findings and saying that I just have given up trying to make intellisense to work. After reading this post, I was able to make it work in minutes with no effort. This is great! Thanks for sharing!
    Really great site.

  5. Jack F

    Komodo Edit has a similar kind of thing, not quite so sophisticated, built in as well, under Preferences->Code Intellegence. It's my editor of choice and free as well.

  6. MS

    hi,
    i can use intellisense with jquery-1.2.6.js and it's work fine
    but when i usin jquery-1.3.2.js with jquery-1.3.2-vsdoc2.js file it's not working !!!
    anybody can help me?(why not working when i usin jquery-1.3.2.js)
    tank3 my friend!

  7. Ali

    I faced a problem when using UI along the the core JQuery file. One suggested creating a blank UI*-vsdoc.js file but it didn't work for me. IntelliSense does not work if both the JQuery and UI are referenced in the same page.

  8. alphonse

    Hi there,

    thanks for the post, since I'm using a lot pdt, I was wondering if someone knows how to activate intellisense for jQuery in Eclipse?

  9. Arnold

    why I didnt see any more tutorials out here...?Im just curious
    nice tutorial anyway...

  10. Does it work with Visual Web Developer Express edition?

  11. When trying to apply the plugin pattern by Mike Alsup: http://www.learningjquery.com/2007/10/a-plugin-development-pattern , Visual studio jQuery Intellisense breaks down. But I found a solution:
    Getting Visual studio jQuery Intellisense working again within jQuery plugin pattern http://www.bnomad.com/2010/07/getting-visual-studio-jquery.html

9 Pings

  1. [...] Both jQuery and Moo Tools looked promising for my work but had to go with jQuery because of the intellisense support with Visual Studio 2008 ( You can get to know how to set up Visual Studio to get [...]

  2. [...] Both jQuery and Moo Tools looked promising for my work but had to go with jQuery because of the intellisense support with Visual Studio 2008 ( You can get to know how to set up Visual Studio to get [...]

  3. jQuery fadeout, fadein, toggle and some events not working in firefox and vsdoc.js | My Tech Life Everyday

    [...] Both jQuery and Moo Tools looked promising for my work but had to go with jQuery because of the intellisense support with Visual Studio 2008 ( You can get to know how to set up Visual Studio to get [...]

  4. [...] Setting up Visual Studio Intellisense for jQuery » Learning jQuery – Tips, Techniques, Tutori... tting up Visual Studio Intellisense for jQuery (tags: jquery visualstudio vs2008 webdev javascript microsoft development asp.net intellisense) [...]

  5. [...] Setting up Visual Studio Intellisense for jQuery » Learning jQuery – Tips, Techniques, T... – [...]

  6. jQuery: » The Official jQuery Podcast – Episode 11 – Yehuda Katz

    [...] 1.4.1 VSDOC file now available. If you want instructions on how to use the VSDOC you can read the tutorial on Learning jQuery. You can download the file for Visual Studio on the jQuery download page and look for Visual Studio [...]

  7. [...] 1.4.1 VSDOC file now available. If you want instructions on how to use the VSDOC you can read the tutorial on Learning jQuery. You can download the file for Visual Studio on the jQuery download page and look for Visual [...]

  8. [...] Setting up Visual Studio Intellisense for jQuery [...]

  9. [...] Also, note the first line in the JavaScript file that references the jQuery library. This line is just a plain comment and it does not do anything in the browser. However, if you are using Visual Studio/Web Developer, and if you have thejquery-1.7.1.vsdoc file, using this line you will have Intellisense support for JavaScript. When you type $. you will see a list of all the JavaScript methods that are available in the jQuery library with their descriptions (it is almost identical to the Intellisense support for regular C# code). See more details about JavaScript intellisense here. [...]

Sorry, but comments for this entry are now closed.


Advertise on our network
See our other websites