Rich IntelliSense for jQuery

Rich IntelliSense for jQuery

  • Comments 73

Update: A new Hotfix is availble to complement this file.

A while back we updated VS2008 IntelliSense to not fail when referencing jQuery.  However, getting IntelliSense for chained calls and rich summary/parameter hints still required adding special comments to a few thousand lines of jQuery.  If you didn't have the time, you could download such a file from friendly members of the community such as James and Brennan.

As part of our new partnership with jQuery, yesterday we announced the availability of the official IntelliSense documentation file.  As you can see, our friends at jQuery have added a new download link for Visual Studio at http://docs.jquery.com/Downloading_jQuery#Download_jQuery.

image

You can also download the file directly from http://code.jquery.com/jquery-1.2.6-vsdoc.js.  As you might guess, this documentation file corresponds with the latest version of jQuery (which is currently 1.2.6).  While this file has a "js" extension, it's really just a documentation file.  You do not want to run this file in the browser.

How do I use this file (today)?

If you're inside an ASPX page, you will need to add the following lines of code into (normally) the head of your page:

image

Why do we have a server-side conditional statement?  IntelliSense disregards conditional statements of this type, and thus loads the "vsdoc" file (overriding the normal one).  At runtime the if (false) statement will ensure it this documentation file is not rendered (and executed) as script.  This trick allows the "switching" behavior you want.

If you're in a JavaScript file, use the normal file reference syntax to refer to the "vsdoc" file.

image

There's no need for tricks here since this comment is only meaningful to IntelliSense.

How do I use this file (in the near future)?

The ideal user experience should be one where you do not need special tricks as mentioned above.  Really, you shouldn't need to mention the "vsdoc" file name at all.  To that end, we plan on releasing a Hotfix that will enable this (stay tuned!).  Given normal references such as...

image image

...IntelliSense will opportunistically search for "jquery-1.2.6-vsdoc.js" and load that file instead.  Generally, given script name "x", IntelliSense will opportunistically search for "x-vsdoc.js".  If not found, it will then search for "x.debug.js".  You just need to make sure to place your "vsdoc" file next to the normal file.  Note, if you use jquery-1.2.6.min.js, you may need to rename the file to match the search pattern.

What are the advantages of this file?

One unique benefit of the file we have released is that it supports and understands jQuery plug-ins.  For example, given the plug-in below...

image

...you would see "myplugin" show up in IntelliSense.

image

We've noticed a few plug-ins do not work, and commonly this is because there is an IntelliSense incompatibility issue with the plug-in itself (as opposed to the jQuery documentation file).

Hope this helps!

Jeff King
Program Manager
Visual Studio Web Tools

Leave a Comment
  • Please add 8 and 1 and type the answer here:
  • Post
  • Hi JM,

    Do you have your website online somewhere so that I can take a look at the HTML source? And/or could you please paste the exact way your include jQuery and other JS files you are using in your page?

    Also, would you please take a look at this

    http://blogs.msdn.com/webdevtools/archive/2008/11/07/hotfix-to-enable-vsdoc-js-intellisense-doc-files-is-now-available.aspx#9054488

    and see if that solves your issue?

    Thanks

    Alex

  • "Absolute URLs don't work at design-time for JScript IntelliSense."

    Then this excitement/work-to-make this happen is 100% useless

    "I hope the implementation makes sense"

    No, no it doesn't..... if i had the following structure

    C:\Projects

      - MyProject

          - MyMaster.Master

          - Default.master

          - Contact.aspx

          - Reports.aspx

          - Users.aspx

    Then great, it makes sense, but lets look at reality....  web applications can get big, few hundred pages big....

    and the structure

    Design (Folder)

      - MyMaster.Master

    - Reports (Folder)

      - Bought.aspx

      - Sold.aspx

    - Manage (Folder)

      - Users (Folder)

         - List.aspx

         - Add.aspx

      - Clients (Folder)

         - List.aspx

         - Add.aspx

      - Default.aspx

    - Scripts (Folder)

      - jQuery

         - jquery.js

         - jquery-vsdoc.js

    - Default.aspx

    Which I am sure is more "real life" than all aspx files in one folder to better organize common functionality

    Whatever though... the VS team thinks the first scenario is the way people program, then so be it, but they should get more feedback from real programmers out there writing real world applications...

    and with the code

    <script src="/ScriptLibrary/jQuery/1.2.6/jquery.js" type="text/javascript"></script>

    <asp:Literal ID="ScriptsToReference" Visible="false" runat="server">

      <script src="../../ScriptLibrary/jQuery/1.2.6/jquery-1.2.6-vsdoc.js" type="text/javascript"></script>

    </asp:Literal>

    Shouldn't studio ignore the first <script> (which is the *only* way that the script gets included if i am 0 to n folders deep in my application), and pick up the second "fake" reference, and as a result give me Intellisense, that is in relation to the location of the Master page?

    I mean look, I am a Microsoft developer, have been for almost 9 years now, but time and time again over that time after going to 5 to 6 DevConnections and jumping into the latest and greatest every time:  it seems like all this "gee wiz" stuff that comes out is absolutely useless in real world applications.....

  • Hi Stephen,

    I guess I am not sure what you mean. The relative URLs can be used in a web site of any complexity with any folder structure. It is fine to use them in master pages. You do not need to use to different URLs (.js and -vsdoc.js) if you install the QFE that Jeff mentions in his post.

    To help me explain this, I created a web site that uses a master page and roughly follows the structure you outlined (including multiple folders with subfolders, master page, script library folder, etc.). Would you please take a look at

    http://cid-a02828f5daafb84a.skydrive.live.com/self.aspx/WebSiteSamples/ExampleSite.zip

    and explain to me if this somehow doesn't work for you.

    Thanks,

    Alex

  • VS2008 SP1 Hotfix to Support -vsdoc.js IntelliSense Doc Files

  • "Would you please take a look at"

    And it doesn't work  :-(

    Your MyMaster.master is this

    http://paste.pocoo.org/show/90995/

    Which the <script> tag for the jQuery file says:

    - go up one folder (which is the project root)

    - Go into "ScriptLibrary" folder

    - Go into "jQuery" folder

    - Get "jquery-1.2.6.js" (or the vsdoc version)

    So that's fine, *from the master page's point of view*

    Pulling up "Manage/Users/Add.aspx" is a fat ol 404 error for the JavaScript reference, as it's generated HTML is:

    <script src="../ScriptLibrary/jQuery/jquery-1.2.6.js" type="text/javascript"></script>

    Which says:

    - Go up a folder (Which in this case is *not* the root but rather "Manage")

    - And then go a folder down into "ScriptLibrary" (which doesn't work since we aren't on the root!)

    That make sense why it doesn't work?

  • Hi, first I want to say that the js intellisense is great.  If it wasn't I wouldn't have tried so hard to make it work.  

    Here's how I did:

    1. Read above article

    2,3,4... Discover which js files are confusing intellisense, have your error list visible to show warnings (note that I noticed the jquery file to be fine (the vs doc one) but when sometimes ui core and some ui plugins usually will break intellisense (but the error will mention the jquery file, not the file which is actually problematic).  

    Close any files in Visual studio you are not using

    for the aspx file, comment out all references to js files.  

    Go to the js file you are writing and want intellisense for :

    comment out all the references by removing all triple slashes (use 2 slashes) and don't leave the word "reference" intact.  

    One by one, (taking great care to use relative urls as in this article) reference another single js for intellisense purposes, pressing save and checking for errors (as a warning), and testing intellisense (CTRL + Space (or your completion shortcut) to see a list including non window object stuff like a $ for jquery etc)

    Once intellisense is broken again by adding a file, comment them all out to get intellisense to work again, then add them one by one, but stop before the first one to cause problems.  

    ?!?

    You might be thinking, hey, now all the scripts are commented out in the aspx, and you are right, this is a pain.  

    to get around this, add the scripts here in such a way as for intellisense not to see them, like using an absolute reference.

    (This absolute reference use is a pain for us since we will have to change that part before checking code in for other developers to use, building for deployment to different test servers or release by installer!)

    I haven't tried the hotfix (I don't want to break my VS installation), but it sounds like it doesn't fix the bug, but rather makes it more convienient to include different versions for documentation.

    Maybee it could help however, what if one were to make a -vsdoc.js file for each of the problematic js files which could be a blank file to stop breaking intellisense for everything else.  

  • @Guido

    If you want to get jQuery (or general rich IntelliSense) in an external file, you will need to use the /// <reference> tag.  See my post here for more details: http://blogs.msdn.com/webdevtools/archive/2007/11/06/jscript-intellisense-a-reference-for-the-reference-tag.aspx.  Note, this approach fully supports the VSDOC format as I describe here: http://blogs.msdn.com/webdevtools/archive/2008/11/07/hotfix-to-enable-vsdoc-js-intellisense-doc-files-is-now-available.aspx.  Thanks for reading!

  • @Stephen

    This is Jeff, and I work with Alex on the same team.  I see what you're saying but, I'm not sure if you're asking us to assume absolute paths resolve to the project root.  Since this list of 52 comments is quickly becoming unreadable, feel free to email me at jking at microsoft dot com.  I'd love to hear from you. Thanks!

  • Last month I blogged about how Microsoft is extending support for jQuery .&#160; Over the last few weeks

  • Last month I blogged about how Microsoft is extending support for jQuery .&#160; Over the last few weeks

  • 【原文地址】jQueryIntellisenseinVS2008【原文发表日期】Friday,November21,20082:07AM

    上个月,我在博客里宣布了微软...

  • Hi, found a more elegant solution to allow the javascript intellisense to work for those files which don't crash intellisense, while still including at runtime those which do.  

    This time it avoids the use of absolute referenced URLs to js files.  

    Now in the ASPX it looks something like

       <% if (false) {%>

           <script src="js/jquery/jquery-1.2.6-vsdoc.js" type="text/javascript" />

       <% } %>

       <asp:ScriptManager ID="ScriptManager1" runat="server">

           <Scripts>

               <asp:ScriptReference Path="~/js/v1/MyUtil1.js" />    

               <asp:ScriptReference Path="~/js/jquery/jquery-1.2.6.min.js" />

               <asp:ScriptReference Path="~/js/jquery/jquery-jtemplates.js" />

    <%--  do not include here, breaks intellisense

               <asp:ScriptReference Path="~/js/jquery/ui/minified/ui.core.min.js" />

               <asp:ScriptReference Path="~/js/jquery/ui/minified/ui.datepicker.min.js" />

               <asp:ScriptReference Path="~/js/jquery/bgiframe-2.1/jquery.bgiframe.pack.js" />

               <asp:ScriptReference Path="~/js/jquery/jquery.clockpick.1.2.4/jquery.clockpick.1.2.4.min.js" />

               <asp:ScriptReference Path="~/js/p1/QuickTasksActions.js" />--%>

           </Scripts>

       </asp:ScriptManager>

    <%=string.Concat(

              "<script src=\"js/jquery/ui/minified/ui.core.min.js\"  type=\"text/javascript\" ></script> \n",

              "<script src=\"js/jquery/ui/minified/ui.datepicker.min.js\"  type=\"text/javascript\"  ></script> \n",

              "<script src=\"js/jquery/bgiframe-2.1/jquery.bgiframe.pack.js\"  type=\"text/javascript\" ></script> \n",

              "<script src=\"js/jquery/jquery.clockpick.1.2.4/jquery.clockpick.1.2.4.min.js\" type=\"text/javascript\" ></script> \n",

              "<script src=\"js/p1/myPage.js\"  type=\"text/javascript\"  ></script> \n"

              ) %>

    Note that the script declarations end in "></script>" with a newline, this is important, because if they end in /> in the same tag it will not work.  

    The external js file has something like this at the top

    /// <reference name="MicrosoftAjax.js"/>

    /// <reference path="../v1/MyUtil1.js" />

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

    /// <reference path="../js/jquery/jquery-jtemplates.js" />

    // < r eference path="~/js/jquery/ui/ui.core.js" />

    // < never r eference this one (breaks intellisense) r eference path="~/js/jquery/ui/ui.datepicker.js" />

    // < never r eference this one (breaks intellisense) r eference path="~/js/jquery/jquery.clockpick.1.2.4/jquery.clockpick.1.2.4.js" />

    This seems to do the trick for getting intellisense to work, but still doesn't stop visual studio from crashing and restarting from time to time, but especially when within a function called by the jquery method which is called when the dom document is ready.  

    Hope this helps.

  • [转自MSDN]

    在VS2008中启用jQueryIntellisense的步骤

    要在VS中启用jQuery的intellisense完成,你要遵循三个步骤:

    第一步:安装VS2008...

  • 【原文地址】jQuery Intellisense in VS 2008 【原文发表日期】 Friday, November 21, 2008 2:07 AM 上个月,我在博客里宣布了微软将对jQuery提供支持。在过去的几个星期里,我们与jQuery开发团队合作,在Studio 2008 和 Visual Web Developer 2008 Express版本(免费的)中增加了很好的jQuery intellisense支持。现在这个支持可以下载使用了。 在VS 2008中启用jQuery Intellisense的步骤

  • 【原文地址】 jQuery Intellisense in VS 2008 | VS 2008中的jQuery Intellisense 【原文发表日期】 Friday, November 21, 2008

Page 4 of 5 (73 items) 12345