VS 2008 JavaScript Intellisense

One of the features that web developers will really like with VS 2008 is its built-in support for JavaScript intellisense.  This is enabled in both the free Visual Web Developer 2008 Express edition as well as in Visual Studio, and makes using JavaScript and building AJAX applications significantly easier. 

Below is a quick tour of some of the new JavaScript intellisense features to take advantage of:

JavaScript Type Inference

One of the things you'll notice immediately when you start typing within a script block is the richer support that Visual Studio 2008 now has for JavaScript keywords and language features:

JavaScript is a dynamic language, and doesn't support explicit type declarations, which has made implementing good intellisense difficult in the past.

Visual Studio 2008 adds support for type inference, which means that it evaluates and computes how a JavaScript block is being used and dynamically infers the variable usage and type information of the code to provide accurate intellisense support.

For example, Visual Studio below will infer that an html element is being retrieved by the document.getElementById() method, and provide appropriate html element intellisense for the variable result:

If I later assign a numeric value to the "myElement" variable (which in JavaScript converts it to a number), notice how VS will detect this and now provide integer intellisense for the variable later in the method:

Intellisense for External JavaScript Libraries

VS 2008 supports intellisense not just for in-line script, but also for externally referenced JavaScript files.  For example, assume we have a "getMessage" function like below defined within a "Util.js" javascript file:

I can then simply add a standard JavaScript script refrence element to my page, and I will then automatically receive intellisense support for it as I code:

Notice how VS automatically provides basic parameter intellisense information on the method without us having to do anything special to the JavaScript for it to appear:

Adding Intellisense Hints to JavaScript

As you saw above, Visual Studio will automatically provide basic intellisense help information for the method name and parameters of standard JavaScript.

You can optionally make this intellisense richer by adding comments to your JavaScript code that the intellisense engine can then pick up and use when you consume a method or library.  For example, I could add the below comments to the getMessage function in my util.js file:

And when I then code against it within my "Default.aspx" file Visual Studio will automatically display this summary information for the method:

As well as the parameter details:

We'll provide a tool that then allows you to automatically strip out your comments (and compress the whitespace and size) of your JavaScript once you've finished building your application.  For more details about the comment format that both VS and ASP.NET AJAX support, please read Bertrand Le Roy's post here.

Intellisense within External JavaScript files

Obviously you get full intellisense support within external JavaScript files, just like you do within script blocks inside .htm and .aspx files.

One of the interesting characteristics about external JavaScript files is that they can call and use the JavaScript functions and variables declared within other JavaScript files that a page loads. 

For example, if we declare two external Javascript files referenced on a page like so:

The JavaScript code within the "MyLibrary.js" javascript file will be able to call the methods declared within the Util.js file.

You can tell Visual Studio to provide intellisense for the "Util.js" library within the "MyLibrary.js" file by adding a /// <reference> comment at the top of the external library.  Once you do this, you'll get full intellisense support for those methods and variables:

This ends up being super useful when partitioning your JavaScript routines across multiple files.

To reference the ASP.NET AJAX client side JavaScript libraries, you can either add a <refrence> that points to your own copy of the .JS file (if you are manually including it in your project), or add a <reference> element with a name value if the library is being dynamically output by the <asp:scriptmanager> control on the host page:

Once you do this you'll get full intellisense for all of the JavaScript libraries and type-library patterns inside ASP.NET AJAX.

Calling Web Services using ASP.NET AJAX

ASP.NET AJAX makes it easy to expose methods on the server that can be called and accessed via client-side JavaScript.  For example, assume we define a simple webmethod in a .asmx web-service like below:

I could then have ASP.NET AJAX automatically create a client-side JavaScript proxy object that uses the JSON protocol to call and use it from the client by adding a reference to it with a <asp:scriptmanager> control in my page like below:

What is cool about VS 2008 is that when you declare a reference to a web-service using the <asp:scriptmanager> control like above, it will add client JavaScript intellisense support for it within the page automatically:

Obviously this makes it much easier to identify methods on the server and asynchronously call and invoke them.  You can use this to both exchange data between the client and server.  You can also use the AJAX UI templating technique I described here to retrieve HTML UI from the server using these callbacks and then dynamically update the page with them.

Creating Re-Usable ASP.NET AJAX Behaviors, Controls and Libraries

ASP.NET AJAX provides type-system support within JavaScript for defining classes, interfaces, and other object oriented concepts.  This makes it much easier to define re-usable libraries of JavaScript that encapsulate functionality and re-use it safely across pages and applications (without having to worry about the JavaScript conflicting with other JavaScript or libraries).

VS 2008 provides new "Add-Item" templates that makes it easy to create new ASP.NET AJAX behaviors, controls and libraries:

ASP.NET AJAX uses the "prototype" pattern within JavaScript to enable you to define classes and interfaces.  For example, I can create an encapsulated JavaScript class using this pattern using one of the project item templates above (notice below how the namespace created by Visual Studio by default is the same as my project namespace):

Obviously I then get full intellisense support when consuming my new library from any page or other JavaScript file:

Summary

Hopefully the above walkthrough provides a first look at some of the new JavaScript intellisense features coming soon (there are more - but this is a start).  In future blog-posts I'll also cover some of the new JavaScript debugging features that VS 2008 brings, as well as some of the WYSIWYG designer support for ASP.NET AJAX and the ASP.NET AJAX Control Toolkit.

To learn more about ASP.NET AJAX (and how you can use all of the runtime features I described above starting today with ASP.NET 2.0), I'd also highly recommend checking out these two new books that have recently been published and which cover the official ASP.NET AJAX 1.0 release:

Note that because of the new VS 2008 multi-targeting support, you can use the JavaScript intellisense features I showed above with both ASP.NET applications built using .NET 3.5 (which has ASP.NET AJAX built-in), as well as with existing ASP.NET 2.0 applications (including ones that use the separate ASP.NET AJAX 1.0 download). This provides a very compelling reason to start using VS 2008 - even if you are using it to only target .NET 2.0 applications.

Hope this helps,

Scott

Published Thursday, June 21, 2007 10:57 PM by ScottGu

Comments

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 4:53 AM by Anthan

It's so cool, I really like it.

Thanks to introduce it to su.

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 6:37 AM by DuncanS

Hmmnn.. It works for simple external scripts, but then I tried this with the uncompressed jQuery library, but then *all* external scripts then failed to show up in IntelliSense. Is there any way of finding out what made IntelliSense fail so that possibly the library could be tweaked to be more IntelliSense-friendly?

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 8:25 AM by Chris Pietschmann

Visual Studio is awesome! And, it just keeps getting better. I can't wait!

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 9:57 AM by stm

This is cool, but

on your external javascript screenshots I'm still missing somthing: are there any dropdown list which shows the name of all function inside a .js file (like in a .cs file)

I have large external js files with lots of functions and navigating between them is a pain.

Also would be nice if "go to definition" (F12) works at least inside one js file...

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 11:02 AM by .net resource center

Great article, as always, I can't wait to use vs2008! When will MSDN Subscribers get a copy of vs2008 beta 2 DVD? it is too large for us to download.

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 11:16 AM by John

I assume that Intellisense will show all of IE's DOM methods, even if they're not supported in other browsers, and that it won't show anything that's not supported by IE.  Is that true?

Also, which version of IE will it show help for?  e.g. will it show the "native" XMLHttpRequest that was introduced in IE 7?

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 11:41 AM by Kevin

woohoo!  Awesome work!  

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 12:30 PM by Josh Stodola

I am a javascript guru (I use it all the time) and I must say that the implementation of type inference with intellisense is absolutely STUNNING.  Seriously, I cant get my jaw off the floor.  I can't wait to start utilizing it.  I'm curious to ask... does it handle overloaded functions?  You know, the same function name with different sets of expected parameters.

Thanks, Scott!!

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 12:54 PM by Kunal

Hey Scott,

love your blog.

nice example on invoking the web service function asynchronously. Would there also be a convenient way to asynchronously call some function in your code behind that is NOT part of a web service. Something like invoking an event, it hits page_load, hits your function(event) and returns response asynchronously.

I could see that as being useful. Do you know if there are any controls/library that currently allow doing that conveniently.

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 2:00 PM by Peter

Thanks for a great post!

On a side note: Would Orcas give us a list of CSS classes when I type "=" after class or CssClass? That's one of the things I would really love. A small preview of the CSS class right next to its name would be heaven! I'm thinking about source code view, not design view. My usage ratio between source code view and design view is more like 99 to 1.

Thank you.

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 2:04 PM by romeo diaz

Woderfull, i was looking for this since 5 years !!!!

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 2:59 PM by ScottGu

Hi Kunal,

The good news is that you can publish a webmethod in your code-behind as well, and then use JavaScript in the browser to call back to it.  So that support is available already to use.

Thanks,

Scott

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 3:02 PM by Akash Aggarwal

I just finished reading both AJAX books. I liked both of them but personally if I were to read again for refresher I would probably use the one by Matt (Wrox Professional). Dino's book is great as well and has some more info on features like ASP.NET Futures. If you are short on time , pick Wrox. If you want more and don't care about time, read both.

And yes, another thing whether you read any book or not, do read Scott Gu's blog.

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 3:03 PM by ScottGu

Hi John,

The JavaScript intellisense engine allows you to pick which browsers/standards you want to target, and will then update the intellisense to be based on that.  By default the target is XHTML Transitional - which means it will give you the DOM APIs that work consistently across modern browsers.

Hope this helps,

Scott

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 3:06 PM by ScottGu

Hi Peter,

The good news is that intellisense completion for CSS class rules (on both standard HTML elements as well as on <asp:> controls) is already implemented in VS 2008 beta2.  This will give you completion on CSS rules within the source editor like you are after.

Thanks,

Scott

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 3:09 PM by ScottGu

Hi stm,

The dropdownlist navigation suggestion for externally defined functions is a good one.  I will forward it onto the team.

Thanks,

Scott

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 3:10 PM by ScottGu

Hi DuncanS,

With VS "Orcas" Beta1 when there was an error that blocks intellisense, the tool doesn't provide much of a clue as to what the problem is.  With later releases of VS 2008 this will show up in the error list and/or status bar.

Thanks,

Scott

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 3:48 PM by kevindente

Scott,

Will VS2008 support code snippets for JavaScript code?

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 4:02 PM by Jeff King

Hi kevindente,

VS2008 will not be supporting code snippets for JavaScript code.  However, it's a feature we'd like to have and we'll be looking at in the future.

Thanks,

Jeff

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 5:46 PM by Michael Schwarz

Hi Scott, any news about adding third-party libraries that are creating JavaScript on-the-fly?

weblogs.asp.net/.../orcas-and-javascript-intellisense.aspx

Thanks,

Michael

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 6:16 PM by kevindente

@Jeff,

That's disappointing - especially since ASP.NET AJAX classes have a lot of boilerplate code in them.

# re: VS 2008 JavaScript Intellisense

Friday, June 22, 2007 6:24 PM by Joseph Baggett

Just a question about JSON in relation to the AJAX, is JSON going to be more secure for holding data and/or are there thing in the works to fix the issues?  Is it best practice to use it?  Is it a standard people should be looking it to more?  How popular do you think JSON will be and should it be a skill web developers should be picking up?

On a side note, heard anything about standardizing the use of AJAX practices more as far as a standard framework, one that can be incorporated in .Net and other frameworks?  Any committees you heard about?  

Thanks again Scott,

Joseph

# re: VS 2008 JavaScript Intellisense

Sunday, June 24, 2007 4:47 AM by chall3ng3r

excelent work i must say.

MS is guru of intellisense, and i wish Adobe guys learn somthing from it and add some real intellisense in Flash CS3 and in Dreamweaver CS3 for ActionScript and JavaScript.

i'm already excited to test all these new features in VS and Silverlight thing as well. a bit stuck in couple of projects. i'll be joining the party shortly :D

best,

// chall3ng3r //

# re: VS 2008 JavaScript Intellisense

Sunday, June 24, 2007 7:42 PM by Kilik

Dumb question. Why doesn't "innerHTML" show up in the Intellisense list for the "myElement" variable in the line after the assignment to "getElementById"?

# re: VS 2008 JavaScript Intellisense

Sunday, June 24, 2007 11:17 PM by Pradeep

Hey Scott..

  Great news to read on Monday morning...was waiting for this since long time. Any idea, when will Orcas will be released, i mean the the final product.  

Thanks,

Prad

# re: VS 2008 JavaScript Intellisense

Monday, June 25, 2007 12:09 AM by Vikram

wow, But I am having a problem. I am not able to install vs 2008 beta 1 in my vista. The installation also gave some problem when installing in xp, But some how was able to install. But installation in Vista is simply not possible

# re: VS 2008 JavaScript Intellisense

Monday, June 25, 2007 3:24 AM by stm

Hello Scott,

About "dropdown navigation" to be more specific:

In vs2005 we have two dropdown for an aspx file, when I select in the left "client script", the right one show all js function names defined in the aspx file js script blocks.

When we open to edit a standalone js files this not works. Would be nice if vs2008 supports this inside standalone js files.

Thank you

# re: VS 2008 JavaScript Intellisense

Monday, June 25, 2007 4:09 AM by Andrej Macko

Hi Scott, what about extending the refactoring support in VS08? The current support for moving classes around, renaming things, extracting APIs etc. is pretty basic. Currently we use the ReSharper here, but it would be super cool to have refactoring support out of the box in the VS08.

PS: ..did I say this blog rocks ;-)?..

Thanx,

Andrej

# re: VS 2008 JavaScript Intellisense

Monday, June 25, 2007 7:17 AM by v-anilkm

Hi Scott,

Intellisense for externally referenced JavaScript files is really a good idea, and also possiblity to call webserverice from javascript too is good!! (Earlier we used to add .htc files to call WS from Javascript).

Just one question

1. Support for code snippets (user defined and in-built) is available in .NET 2.0, but this is limited to Code behind. It would be good if we can have that for Javascript too. Any plans for that in 2008 (Even developers can live without this as we dont have this facilty in any of the earlier versions)?

Anil

# re: VS 2008 JavaScript Intellisense

Monday, June 25, 2007 9:59 AM by Rod Johnson

It would be cool if when you deployed the project, that it would remove the javascript comments from the http response.

# re: VS 2008 JavaScript Intellisense

Friday, July 6, 2007 11:14 PM by matt

a lot of these feature do not work for me using Orcas beta 1 on Vista.

# re: VS 2008 JavaScript Intellisense

Saturday, July 7, 2007 12:22 AM by Ngoc Luu

Hi Scott,

When will VS 2008 beta 2 avaiable?

# re: VS 2008 JavaScript Intellisense

Monday, July 9, 2007 4:30 AM by ScottGu

Hi Matt,

Beta1 doesn't have all of the features I listed above.  Beta2 has then all implemented though.

Thanks,

Scott

# re: VS 2008 JavaScript Intellisense

Monday, July 9, 2007 4:30 AM by ScottGu

Hi NGoc,

VS 2008 Beta2 will be out later this month.

Thanks,

Scott

# re: VS 2008 JavaScript Intellisense

Sunday, July 29, 2007 4:47 AM by leoxu

VS 2008 JavaScript Intellesense  cannt work at all for our team.

My work enviroment is VISTA+vs2008beta2.

HELP?!

# re: VS 2008 JavaScript Intellisense

Sunday, July 29, 2007 12:18 PM by ScottGu

Hi leoxu,

Can you send me an email (scottgu@microsoft.com) with more details about the machines that it isn't working on?  We have found an installation issue that sometimes causes the new javascript service not to work.  I can help you update a registry setting to fix it if you send me email.

Thanks,

Scott

# re: VS 2008 JavaScript Intellisense

Tuesday, July 31, 2007 12:39 AM by Jason

Hi Scott,

I am using vs2008 beta2~

I have got a problem.  If I create a javascript object which deson't implement "Sys.IDisposable" in external file, JavaScript Intellisense doesn't list all the memeber of it.  After I have implement "Sys.IDisposable", everything works fine.

Works~~~

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

Type.registerNamespace("Demo");

Demo.Person = function(firstName, lastName, emailAddress) {

   this._firstName = firstName;

   this._lastName = lastName;

   this._emailAddress = emailAddress;

}

Demo.Person.prototype = {

   getFirstName: function() {

       return this._firstName;

   },

   getLastName: function() {

       return this._lastName;

   },

   getName: function() {

       return this._firstName + ' ' + this._lastName;

   },

   dispose: function() {

       alert('bye ' + this.getName());

   }

}

Demo.Person.registerClass('Demo.Person', null, Sys.IDisposable);

// Notify ScriptManager that this is the end of the script.

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();  

Don't work

======

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

Type.registerNamespace("Demo");

Demo.Person = function(firstName, lastName, emailAddress) {

   this._firstName = firstName;

   this._lastName = lastName;

   this._emailAddress = emailAddress;

}

Demo.Person.prototype = {

   getFirstName: function() {

       return this._firstName;

   },

   getLastName: function() {

       return this._lastName;

   },

   getName: function() {

       return this._firstName + ' ' + this._lastName;

   }

}

Demo.Person.registerClass('Demo.Person', null, null);

// Notify ScriptManager that this is the end of the script.

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

# re: VS 2008 JavaScript Intellisense

Tuesday, July 31, 2007 4:39 AM by ScottGu

Hi Jason,

Can you send me an email about this issue (scottgu@microsoft.com)?  I can then loop in someone from the JavaScript Intellisense feature-team to take a look.

Thanks,

Scott

# re: VS 2008 JavaScript Intellisense

Tuesday, July 31, 2007 8:36 AM by Eric

Such a powerful improvement! I was looking for better javascript editor two days ago.

# re: VS 2008 JavaScript Intellisense

Wednesday, August 1, 2007 10:46 AM by ScottGu

Hi Kangnoz,

>>>>>>>> JavaScript Intellisense is seem to be not comprehensive.Such as above,"var myElement=document.getElementID("myDiv");  myElement.",when I typed,I can't find 'style,innerHTML,atc' any other method.Is it right?

The intellisense for the individual HTML element members is driven off of which validation schema you currently have selected in the IDE.  By default we use the XHTML Transitional schema - which actually doesn't support innerHTML (even though all browsers support it for compatibility reasons).  This blog post is about VS 2005, but does cover how you can change the schema to be a different one if you'd like.  The IE schema will show you innerHTML: weblogs.asp.net/.../431149.aspx

Hope this helps,

Scott

# re: VS 2008 JavaScript Intellisense

Thursday, August 2, 2007 10:29 AM by Atanas Korchev

Hi Scott.

Will the type inferring be able to guess the type of ASP.NET Ajax components? Consider the following example:

var modalPopupBehavior = $find('programmaticModalPopupBehavior');

Will intellisense show the "hide" and "show" methods of the ModalPopupBehavior? Right now it only shows the methods of Sys.UI.Component.

Also will the Intellisense engine "read" any javascript files which are embedded resources (or registered through the ScriptManager object)? I don't seem to make it work right now - I only see classes from MicrosoftAjax.js (Type, Sys etc).

Thanks.

# re: VS 2008 JavaScript Intellisense

Thursday, August 2, 2007 11:20 AM by steve@veratta

I use mootools almost exclusively as a javascript library to handle animations. I notice that when including the release version of the script file, which is obfuscated and compressed using packer compression, I don't get intellisense for anything contained in the library. Can you confirm that the javascript intellisense only works on uncompressed (and non-obfuscated) javascript files?

# re: VS 2008 JavaScript Intellisense

Friday, August 3, 2007 3:58 AM by ScottGu

Hi Atanas,

>>>>>> Will a special intellisense file be required to support the AJAX control toolkit for example?

That is a very good question.  I just pinged the AJAX Control Toolkit team to see if they've thought of using the approach that Justin used for the Silverlight controls.

Thanks,

Scott

# re: VS 2008 JavaScript Intellisense

Friday, August 3, 2007 3:59 AM by ScottGu

Hi Steve,

>>>>>> I use mootools almost exclusively as a javascript library to handle animations. I notice that when including the release version of the script file, which is obfuscated and compressed using packer compression, I don't get intellisense for anything contained in the library. Can you confirm that the javascript intellisense only works on uncompressed (and non-obfuscated) javascript files?

That is a good question - can you send me email (scottgu@microsoft.com) and I'll hook you up with the JavaScript intellisense team.  They can then help you get this working.

Thanks,

Scott