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 1 and 8 and type the answer here:
  • Post
  • How to Use Visual Studio jQuery IntelliSense Supported Through Hotfix

  • Visual Studio 2008 Hotfix for jQuery IntelliSense

  • Much like before this "update" recommended above, i am getting the "warning" in VS2008 of

    Error updating JScript IntelliSense: C:\Projects\Website\ScriptLibrary\jQuery\1.2.6\jquery.vsdoc.js: 'childNodes' is null or not an object @ 1571:4

    and this is seemingly preventing Intellisense from working at all

    does this for the "stock" version of jQuery as well....

    rendering all this updating and excitement absolutely useless for me

  • I forgot to mention, line 1571 in the "vsdoc" file is a blank line, so studio has absolutely zero clue what's going on

  • Stephen,

    I noticed in the error message the name of the file is "jquery.vsdoc.js". The standard file we provide is "jsquery-vsdoc.js". There is a "-" instead of a "." in front of "vsdoc".

    Also, would you please let us know how exactly you include the file?

    Finally, would you please confirm that you have SP1 installed?

    Thanks,

    Alex

  • This is great but I've noticed that it doesn't pick up on absolute URLs so if you have:

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

    It won't relate it to the file located in ../js/

    Had me going for a while.

    Tim

  • I am having same problem, I install SP1 today, later the hotfix, I try this forms for using the file:

    <script type="text/javascript" src="/scripts/jquery.js"></script>

    <script type="text/javascript" src="~/scripts/jquery.js"></script>

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

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

    and never get intellisense work :(

    Always say problem with js Intellisense.

    Best regards.

  • Absolute URL won't work for IntelliSense purposes. This is because absolute URL is resolved against the location where your application is deployed at runtime. There is no way for Visual Studio at design-time know how to resolve "/foo/file.js" - this starts at the server root, not project root.

    App-relative URL doesn't work in <script> tag because it is ASP.NET control server-side syntax, it is not standard HTML. That's why you cannot use "~/foo/file.js" inside of a <script> tag. It would work fine inside of a Script Manager control, such as

    <asp:ScriptManager id="sm1" runat="server>

       <asp:ScriptReference path="~/foo/file.js" />

    </asp:ScriptManager>

    For IntelliSense purposes, you can use relative URLs, such as "../foo/file.js"

  • oh, thx, I can take some intellisense using only  <script type="text/javascript" src="scripts/jquery.js"></script> I get some methods, but $('div'). or $('#mydiv'). dont show me anything :(

  • Hi JM,

    Are you using Visual Studio 2008 SP1? Do you have jquery-vsdoc.js file in your project at the same location as jquery.js?

    Thanks,

    Alex

  • yeah, I just installed sp1 today, and later the hotfix. I try using the -vsdoc.js file directly, but I can't get intellisense working ok.

    best regards

  • I can't get intellisense to work if I have more than one .js file.  

    For instance in my head if I only have <script src="Support/jquery-1.2.6.js" type="text/javascript"></script> intellisense works fine.  But once I add other files such as <script src="Support/jquery.ui.all.js" type="text/javascript"></script> I lose intellisense.  I noticed that ui doesn't contain the intellisense markup - but does that mean if I want to use a plugin I have to go without intellisense?

  • @Alex:

    "I noticed in the error message the name of the file is "jquery.vsdoc.js". The standard file we provide is "jsquery-vsdoc.js". There is a "-" instead of a "." in front of "vsdoc"."

    Yeah, i changed my file name to match my other js file naming convention....  none the less, it didn't work with the regualar file name anyways

    "Also, would you please let us know how exactly you include the file?"

    Inside my master page's <head runat="server"> section

    <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.vsdoc.js" type="text/javascript"></script>

    </asp:Literal>

    "Finally, would you please confirm that you have SP1 installed?"

    It is indeed installed along with the linked "hotfix" in this blogpost

    Thanks,

    Alex

  • Stephen,

    You need to change the path in the <script src="..." />. I already explained this a couple of posts above, but let me try again since this issue keeps coming up.

    Absolute URLs don't work at design-time for JScript IntelliSense. In your case, your URL is server-relative. Basically, you are saying "my script is in the /ScriptLibrary folder that is at the root of my web server". However, your application won't necessarily be deployed to the root of your web server. It can be deployed to any subfolder of your web server.

    There is no way for Visual Studio to know at design time where your application will be deployed at run-time. If Visual Studio were to make the assumption that the application will be deployed to the root of the web server and resolve the /ScriptLibrary folder as being at the root of the project, than it may give you a false sense of security. If you were to deploy the project in a subfolder of your web server root (e.g., http://www.myserver.com/myapplication/ScriptLibrary"), your code wouldn't work at runtime even though intellisense would work at design-time. We had a number of complaints from the users that when IntelliSense works, they assume they are doing everything correctly, but then at runtime things don't work, and they have hard time understanding why.

    I hope the implementation makes sense. Meanwhile, to fix the issue, you can use document-relative URL or absolute URLs that include server name. E.g., if your document is in folder "subfolder/mydocument.aspx", and your scrits are in folder "ScriptLibrary" relative to the root of your project, then in "mydocument.aspx" you would use

    <script src="../ScriptLibrary/jquery.js" />

    That is a safe practice in general, because your paths will always resolve at runtime regardless of whether your app is deployed at the root of your web server or in a virtual directory/subfolder of your web server. IntelliSense will work in that case. Or else you can use ScriptManager control and app-relative URL (see example in my post above).

    Thanks,

    Alex

  • Brian,

    Unfortunately, we do not currently support all jQuery plug-ins. Some work, some do not work yet. As a temporary workaround, would you please try these suggestions?

    Thanks,

    Alex

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

Page 3 of 5 (73 items) 12345