Jul 16 2009

Setting up Visual Studio Intellisense for jQuery

read 24 comments
by Ralph Whitbeck

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:

PLAIN TEXT
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

24 comments

  1. Mario
    July 16, 2009 at 1:17 pm

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

    Reply
  2. Frédéric Hewitt
    July 16, 2009 at 2:25 pm

    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.

    Reply
  3. Dave Ward
    July 16, 2009 at 3:42 pm

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

    Reply
    • Ralph Whitbeck
      July 16, 2009 at 3:45 pm

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

      Reply
      • Dave Ward
        July 16, 2009 at 4:12 pm

        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).

        Reply
        • Ralph Whitbeck
          July 16, 2009 at 4:26 pm

          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?

        • Dave Ward
          July 16, 2009 at 5:23 pm

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

        • Ralph Whitbeck
          July 16, 2009 at 9:45 pm

          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.

        • Baldwin
          July 22, 2009 at 9:41 pm

          Great. Thanks for your sharing.

  4. Felipe Lima
    July 17, 2009 at 12:06 am

    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.

    Reply
  5. Jack F
    July 19, 2009 at 8:48 am

    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.

    Reply
  6. MS
    July 19, 2009 at 12:03 pm

    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!

    Reply
  7. Ali
    July 26, 2009 at 1:37 am

    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.

    Reply
  8. alphonse
    August 14, 2009 at 6:00 am

    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?

    Reply
  9. Arnold
    August 19, 2009 at 9:02 am

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

    Reply
  11. Diego
    February 19, 2010 at 11:58 am

    Does it work with Visual Web Developer Express edition?

    Reply

6 Pings

  1. fadeout, fadein not working in firefox and vsdoc.js « My life with tech everyday
    July 22, 2009 at 6:03 pm

    [...] 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. jQuery fadeout, fadein, toggle and some events not working in firefox and vsdoc.js « My life with tech everyday
    July 22, 2009 at 6:11 pm

    [...] 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
    September 20, 2009 at 4:22 am

    [...] 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. links for 2009-09-23 « Minesa IT
    September 23, 2009 at 4:01 pm

    [...] 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. » Linkroll for January 12th through January 13th booyaa dot org
    January 13, 2010 at 6:55 am

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

  6. jQuery: » The Official jQuery Podcast – Episode 11 – Yehuda Katz
    February 15, 2010 at 9:35 am

    [...] 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 [...]

Leave a Comment

IMPORTANT:

  • If you wish to post code examples, please wrap them in <code> tags.
  • Multi-line code should be wrapped in <pre><code> </code></pre>
  • Use &lt; instead of < and &gt; instead of > in the examples themselves. Otherwise, you could lose part of the comment when it's submitted.