JavaScript Intellisense Improvements with VS 2010

This is the twentieth in a series of blog posts I’m doing on the upcoming VS 2010 and .NET 4 release. 

Today’s blog post covers some of the nice improvements coming with JavaScript intellisense with VS 2010 and the free Visual Web Developer 2010 Express.  You’ll find with VS 2010 that JavaScript Intellisense loads much faster for large script files and with large libraries, and that it now provides statement completion support for more advanced scenarios compared to previous versions of Visual Studio.

[In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu]

Improved JavaScript Intellisense

Providing Intellisense for a dynamic language like JavaScript is more involved than doing so with a statically typed language like VB or C#.  Correctly inferring the shape and structure of variables, methods, etc is pretty much impossible without pseudo-executing the actual code itself – since JavaScript as a language is flexible enough to dynamically modify and morph these things at runtime. 

VS 2010’s JavaScript code editor now has the smarts to perform this type of pseudo-code execution as you type – which is how its intellisense completion is kept accurate and complete.  Below is a simple walkthrough that shows off how rich and flexible it is with the final release.

Scenario 1: Basic Type Inference

When you declare a variable in JavaScript you do not have to declare its type.  Instead, the type of the variable is based on the value assigned to it.  Because VS 2010 pseudo-executes the code within the editor, it can dynamically infer the type of a variable, and provide the appropriate code intellisense based on the value assigned to a variable.

For example, notice below how VS 2010 provides statement completion for a string (because we assigned a string to the “foo” variable):

image

If we later assign a numeric value to “foo” the statement completion (after this assignment) automatically changes to provide intellisense for a number:

image

Scenario 2: Intellisense When Manipulating Browser Objects

It is pretty common with JavaScript to manipulate the DOM of a page, as well as work against browser objects available on the client. 

Previous versions of Visual Studio would provide JavaScript statement completion against the standard browser objects – but didn’t provide much help with more advanced scenarios (like creating dynamic variables and methods).  VS 2010’s pseudo-execution of code within the editor now allows us to provide rich intellisense for a much broader set of scenarios.

For example, below we are using the browser’s window object to create a global variable named “bar”.  Notice how we can now get intellisense (with correct type inference for a string) with VS 2010 when we later try and use it:

image

When we assign the “bar” variable as a number (instead of as a string) the VS 2010 intellisense engine correctly infers its type and modifies statement completion appropriately to be that of a number instead:

image

Scenario 3: Showing Off

Because VS 2010 is psudo-executing code within the editor, it is able to handle a bunch of scenarios (both practical and wacky) that you throw at it – and is still able to provide accurate type inference and intellisense.

For example, below we are using a for-loop and the browser’s window object to dynamically create and name multiple dynamic variables (bar1, bar2, bar3…bar9).  Notice how the editor’s intellisense engine identifies and provides statement completion for them:

image

Because variables added via the browser’s window object are also global variables – they also now show up in the global variable intellisense drop-down as well:

image

Better yet – type inference is still fully supported.  So if we assign a string to a dynamically named variable we will get type inference for a string.  If we assign a number we’ll get type inference for a number. 

Just for fun (and to show off!) we could adjust our for-loop to assign a string for even numbered variables (bar2, bar4, bar6, etc) and assign a number for odd numbered variables (bar1, bar3, bar5, etc):

image

Notice above how we get statement completion for a string for the “bar2” variable. 

Notice below how for “bar1” we get statement completion for a number:

image 

This isn’t just a cool party trick…

While the above example is a bit contrived, the approach of dynamically creating variables, methods and event handlers on the fly is pretty common with many Javascript libraries.  Many of the more popular libraries use these techniques to keep the size of script library downloads as small as possible.  VS 2010’s support for parsing and pseudo-executing libraries that use these techniques ensures that you get better code Intellisense out of the box when programming against them.

Summary

Visual Studio 2010 (and the free Visual Web Developer 2010 Express) now provide much richer JavaScript intellisense support.  This support works with pretty much all popular JavaScript libraries.  It should help provide a much better development experience when coding client-side JavaScript and enabling AJAX scenarios within your ASP.NET applications.

Hope this helps,

Scott

P.S. You can read my previous blog post on VS 2008’s JavaScript Intellisense to learn more about our previous JavaScript intellisense (and some of the scenarios it supported).  VS 2010 obviously supports all of the scenarios previously enabled with VS 2008.

Published Thursday, April 8, 2010 11:56 PM by ScottGu

Comments

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:25 AM by Jani Hartikainen

Looking good there. How does it work with objects? Eg. if you have a custom "class", will it be able to figure out its methods from the prototype? How about more complex things like inheritance in libraries such as Dojo or Ext?

I will definitely have to try this out in VS Express. There aren't many good IDEs that provide good features for JS.

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:28 AM by chaitra

Nice post, but needed help on VS 2010 JavaScript/jQuery Intellisense part.

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:29 AM by Mohamed Meligy

Wow, that`ll be a killer feature when it ships :).

I still can't believe we'll have that.

down to real work code, would that work in user controls if we use /// <reference or if(false) <script src="" .... to refer to libraries (like jQuery) or the pseudo execution replaces that foundation ?

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:30 AM by Sergey

Cool stuff

Hope it will work for jQuery in all the cases since the previous support was powerful yet had some limitations

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:32 AM by ScottGu

@Jani,

>>>>>>> Looking good there. How does it work with objects? Eg. if you have a custom "class", will it be able to figure out its methods from the prototype? How about more complex things like inheritance in libraries such as Dojo or Ext?

Yes - it should be able to figure out methods from prototypes.  I haven't tried verifying the inheritance with Dojo or Ext but I believe that should work as well.

Hope this helps,

Scott

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:33 AM by ScottGu

@Mohamed,

>>>>>>>> down to real work code, would that work in user controls if we use /// <reference or if(false) <script src="" .... to refer to libraries (like jQuery) or the pseudo execution replaces that foundation ?

Yes - you'll be able to use those techniques to reference script files and they'll work.  You can even reference jQuery off of our CDN (or someone else's) and I believe it also supports JavaScript intellisene even though the file is coming from another server.

Hope this helps,

Scott

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:33 AM by ScottGu

@Sergey,

>>>>>>>> Hope it will work for jQuery in all the cases since the previous support was powerful yet had some limitations

You should find much better support for jQuery with VS 2010's intellisense.

Hope this helps,

Scott

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:35 AM by Lee Englestone

I demonstrated this functionality to my team yesterday and it went down a treat. Question. At the Guathons, did you mention that you can reference other javascript files at the top of the current javascript file to have access to its variables and methods?

-- Lee

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:35 AM by Jean Azzopardi

This seems incredibly cool to me. I wonder if this can be extended to other languages. Perhaps it might not be possible for C#, but what about Python, or F#?

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:36 AM by John

Are there any plans to add an Object Browser window for javascript? Or, F12 support for javascript methods?

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:42 AM by o_o

smart. looking forward to the release!

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 3:59 AM by Matt Freeman

Any code navigation features? Even a drop down of declared function in current scope?

What about any refactoring support? Extract function? Rename variable?

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 4:06 AM by James

Scott,

In VS 2010 RTM, will intellisense be supported inside <%= %> tags that are nested inside html attributes?  for example:

<option value="<%= Model.Id%>">Foo</option>  

Thanks!

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 4:19 AM by NaibStilgar

Jean Azzopardi What do you mean? C# and F# already have extremely powerful intellisense.

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 4:21 AM by waqas

that will make life much easier for developers

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 4:26 AM by ScottGu

@Klemen,

>>>>>>> Usually, when I write code for jQuery, I use boilerplate code like this:

I just sent mail off to the team to check on this.  I'll respond back with a comment once I hear back from them.

Thanks,

Scott

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 4:27 AM by ScottGu

@Lee,

>>>>>>>  At the Guathons, did you mention that you can reference other javascript files at the top of the current javascript file to have access to its variables and methods?

I mentioned this briefly. You can use <reference> comments to bring in other libraries and enable this. I have some samples that show how to do this in this previous blog post: weblogs.asp.net/.../vs-2008-javascript-intellisense.aspx

Hope this helps,

Scott

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 4:28 AM by ScottGu

@Jean,

>>>>>>> This seems incredibly cool to me. I wonder if this can be extended to other languages. Perhaps it might not be possible for C#, but what about Python, or F#?

The concept is definitely relevant for other languages as well.  You'll probably see us use this more in the future.

Hope this helps,

Scott

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 4:29 AM by ScottGu

@John,

>>>>>>>> Are there any plans to add an Object Browser window for javascript? Or, F12 support for javascript methods?

We unfortunately don't have that for the initial VS 2010 release.  We are going to investigate adding features like that in the future though.

Hope this helps,

Scott

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 4:29 AM by ScottGu

@Matt,

>>>>>>> What about any refactoring support? Extract function? Rename variable?

We don't have those right now - but they are high on our list for the future.

Hope this helps,

Scott

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 4:32 AM by ScottGu

@James,

>>>>>>>> In VS 2010 RTM, will intellisense be supported inside <%= %> tags that are nested inside html attributes?  for example: <option value="<%= Model.Id%>">Foo</option>  

This is something we definitely want to add.  The reason it hasn't shown up yet, though, is because it is a surprisingly difficult thing to implement because of our HTML editor architecture.  We support multiple languages within the HTML editor (HTML, CSS, JavaScript, VB, C#, etc) and attributes are a place where we cycle between two language modes in a way that isn't super easy for us to handle today (again because of the existing internal architecture).  We are planning to enable this in the future though.

In the meantime - one tip is to use ' instead of " characters - that works around the issue.

Hope this helps,

Scott

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 4:52 AM by Wynand

What about support for #region directives?

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 5:13 AM by Mark Struik

Looks pretty cool.. why don't you use this to enable intellisence for dynamic types? now that would be super awesome :)

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 6:17 AM by AGS777

Sorry for the minor off-topic, but is there eventually matching braces/quotation marks highlighting in JavaScript editor in VS 2010 (as it is done in Aptana Studio, Komodo Edit, etc.)?

It is the essential features for JavaScript editing since when one edit JavaScript he or she usually tends to make any possible misprint that CAN be made. And I would place braces/quotation marks highlighting even higher than any IntelliSense improvements within usability requirements' range. Is it long awaited feature still missing from the Microsoft flagship IDE?

Thanks.

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 6:24 AM by Jean Azzopardi

>>> Jean Azzopardi What do you mean? C# and F# already have extremely powerful intellisense.

I know they do, but nothing like I saw in Scenario 3. That looks incredibly awesome to me.

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 6:37 AM by vik20000in

this is super cool for people working with raw javascript.

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 6:37 AM by Jani Hartikainen

Well I quickly gave it a shot and while it looks very promising there's still much to do.

For example Dojo-style dojo.declare('namespace.ClassName' ... ) statements aren't understood at all, and using "this" in such code does not work properly either. I understand that jQuery is probably a higher priority for you guys as it's bundled with ASP.NET, but hey I can always wish everything works as well as it does with C# one day ;)

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 7:39 AM by Alessandro

Looking good. I look forward to using vs2k10 soon.

Thanks for the post.

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 8:35 AM by Baski

It would be nice , if we have #region #endregion equivalent tag in javascript to organize the script file.

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 9:56 AM by Lorenz Cuno Klopfenstein

Looks great! That should make working with Javascript much less painful. :)

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 10:41 AM by Vern B

While Intellisense is one of the features I quite like about Visual Studio, your point is very true and probably even understated: "Correctly inferring the shape and structure of variables, methods, etc is pretty much impossible without pseudo-executing the actual code itself – since JavaScript as a language is flexible enough to dynamically modify and morph these things at runtime."

The chances of the editor getting the correct properties list for a variable is heavily dependent on the complexity and mutability of the objects.  While it may help for the simple code, I'm afraid it will give false confidence -- and help create bugs -- in any code of more than moderately complexity.

The Latin "Primum non nocere" translates as "First, do no harm."  My fear is that this feature (although very often useful!) does harm in cases where complex code would be safer without the Intellisense capability.

This is, in fact, my biggest complaint about most of the Microsoft products -- while they make easy things easier, they often/usually make complex things far more difficult.   And I, for one, don't usually get the easy tasks.  :-|

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 12:33 PM by journey

I have learned much from this article, thank you very much!

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 12:41 PM by niravbhattsai

Great information thanks

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 12:42 PM by Bob

An even more contrived example might be instructive...  What if the code checks the seconds in the current time of day and, if even, makes the variable a string, otherwise it makes it a numeric.  So the type depends on the time of day.

Will the Intellisense change every time you check it?  Will it pick a type when you first try to use the variable and keep using it?  Will it only show the items common to both strings and numbers?

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 2:09 PM by m4h4r4

Hi Scott,

Sorry for being OOT here, but I'd like to know what VS2010 version you use here. I notice the IntelliSense seems to be a bit blurry, and also the image icons don't seem so crisp. Do you have a word about these?

Thanks.

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 2:18 PM by chamila

wow.this is great news.thanks

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 2:24 PM by James

Scott,

Deos the single quote intellisense workaround only work in VS 2010 RTM?  In the RC, I still don't get any intellisense against the viewmodel inside of an html attribute even with single quotes:

<div id='<%= Model.Id %>' class="pager">

Thanks,

James

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 10:57 PM by Andrew

Hi,

please support Reactive extension (Rx) intellisense

MicrosoftAjax.js + MicrosoftMvc.js + jQuery + Rx.js = powerfull !

# re: JavaScript Intellisense Improvements with VS 2010

Friday, April 9, 2010 11:15 PM by praveen.prasad

hi scott,

i am dying to see code-folding for JS files.

# re: JavaScript Intellisense Improvements with VS 2010

Saturday, April 10, 2010 12:12 PM by Barney

Does 2010 support JavaScript code navigation -- something like CTRL-click on a method or variable to jump to it's definition/declaration.  Finding code declared in other, included files is a huge hassle.  Find-In-Files is about the only current option.

# re: JavaScript Intellisense Improvements with VS 2010

Sunday, April 11, 2010 5:04 AM by Joe Walters

Hello Scott,

I really appreciate that technology driven post, it's greatly helpful for the developers who look forward for latest innovative techniques to increase their programming skills. Your graphical representation shows you've done exemplary work. Thanks a lot!

# re: JavaScript Intellisense Improvements with VS 2010

Sunday, April 11, 2010 6:33 AM by macro

wow , thats great , i love it .

# re: JavaScript Intellisense Improvements with VS 2010

Sunday, April 11, 2010 12:06 PM by Nirvana

Great information thanks

# re: JavaScript Intellisense Improvements with VS 2010

Monday, April 12, 2010 3:36 AM by glinkot

Nice.  Great help for those of us who aren't great at javascript!

# re: JavaScript Intellisense Improvements with VS 2010

Monday, April 12, 2010 9:56 AM by Ed

Is there any way to get intellisense working with non embedded javascript? ie: external js files. And if so, how is this accomplished?

# re: JavaScript Intellisense Improvements with VS 2010

Monday, April 12, 2010 10:47 AM by WinWear

Wow, that looks like e great feature.

# re: JavaScript Intellisense Improvements with VS 2010

Tuesday, April 13, 2010 1:17 AM by Naveed Saqib

Pheww!! What a relief for Ajax Developers who have been coding nightmares for years. Thank you Microsoft and Visual Studio Team.

# re: JavaScript Intellisense Improvements with VS 2010

Tuesday, April 13, 2010 2:55 AM by coach bags

really appreciate that technology driven post, it's greatly helpful for the developers who look forward for latest innovative techniques to increase their programming skills. Your graphical representation shows you've done exemplary work. Thanks a lot!

# re: JavaScript Intellisense Improvements with VS 2010

Tuesday, April 13, 2010 11:56 AM by sanagarwl

open source tools such as aptana already provide this functionality...

# re: JavaScript Intellisense Improvements with VS 2010

Tuesday, April 13, 2010 12:29 PM by John Sonmez

I was just telling some co-workers that static languages will always be better than dynamic languages, because auto-completion will never work properly for dynamic languages.

You just proved me 100% wrong.  This is nothing short of amazing!

# re: JavaScript Intellisense Improvements with VS 2010

Tuesday, April 13, 2010 1:27 PM by patrick

dude, its just getting crazy. how do I know which technology to focus on. One minute it is wcf, and the next minute it is .net ria, and then it's linq to sql. I am not sure which one to learn, as each release seems to break something else, and there are no books to read that are up to date. It feels like if I get a text that is more than 6 months old, most of it is depracated and I am out 60 bucks or so. I think I am going to go to the java world.

# re: JavaScript Intellisense Improvements with VS 2010

Tuesday, April 13, 2010 1:46 PM by Dennis Gorelik

Scott, could you share a story about how your team come up with the idea and how long did it take to develop it to this level?

Executing script for intellisense purposes is really innovative approach and it would be nice to learn the story behind it.

# re: JavaScript Intellisense Improvements with VS 2010

Wednesday, April 14, 2010 4:14 AM by Paul Dalemans

When i want to do $('#Something).val() the new intellisense only allows me to do $('#Something).valueOf(), which will be added automatically. Can this behaviour be ignored?

I did not add the jquery intellisense, so now it seems the default intellisense makes it harder work with jquery ?

# re: JavaScript Intellisense Improvements with VS 2010

Wednesday, April 14, 2010 10:02 PM by Thai Cao Phong

very cool & good tip, thank you very much for sharing.

# re: JavaScript Intellisense Improvements with VS 2010

Thursday, April 15, 2010 6:09 AM by softer

What about intellisense for "config objects"?

VS always lacked of this nice feature on javascript intellisense.

For example:

Ext.extend(Ext.util.Observable, {

...

});

On the ... I would expect the intellisense to provide for me the default options as they would be displayed if I would do new Ext.util.Observable.

Another example:

$.ajax({

...

});

It's a pain in the ass to double check every time what options are available in such a call.

And these days that's a must! Too bad VS2010 doesn't support it yet :((

# re: JavaScript Intellisense Improvements with VS 2010

Thursday, April 15, 2010 10:40 PM by Trillian

I just tried the official release of VS2010 and the coolest feature is that the code completion for the following code:

(Math.random() < 0.5 ? "" : 1)

... shows string members half the time and number members the other half! :)

# re: JavaScript Intellisense Improvements with VS 2010

Sunday, April 25, 2010 9:31 AM by Mike

Hey Scott, I have some positive and some negative feedback for this feature. Let's start with the good feedback.

It's great that the IDE is getting smarter JavaScript IntelliSense, since a few years many web developers are writing much more JavaScript code, so for the tooling to evolve and for your division to recognize that is great, many thanks!

Now for the negative.

I don't think that the team implementing this is making good progress and is tackling the problem is such a way that will yield the best results long-term. The reason is that they don't seem to be taking into account the many strange ways that we are writing JavaScript code in 2010. The example with the global variables and the Window object being taken into account by IntelliSense doesn't help much when we are writing private closures. Simply said, it's cute but a bit simple. I have no doubt it was challenging to implement, but that doesn't change the fact that people are doing the strangest things with JavaScript and that IntelliSense will simply NOT give any hints in those scenarios

Now I don't know anything about the IntelliSense 'engine', but it should ideally form a coherent and complete model of the complete execution environment, taking into account such things as CommonJS or node.js, or even Script#. Just writing this makes me realise how challenging that is, but if the team can meet the challenge for the next version, you will truly have a great JavaScript IDE. Until that time, tracking the Window object is cute, but falls short of what I personally expect from an IntelliSense implementation (being spoiled by the background compilation that provides such amazing IntelliSense for C#).

Looking forward to your reaction, thanks!

# re: JavaScript Intellisense Improvements with VS 2010

Sunday, May 2, 2010 1:30 AM by shawpnendu

We are long time awaiting for this feature. Thanks scott for such important feature. It will really help us a lot & will definitely increase our productivity.

# re: JavaScript Intellisense Improvements with VS 2010

Tuesday, May 4, 2010 8:51 AM by jahu_bluszcz

It's posssibility to get intellisense suggestion in the below scenario:

Type.registerNamespace("jMVP");

jMVP.View = function() {

   this._templateOfferListDiv = $("#poweravailBody");

}

jMVP.View.prototype = {

   get_templateOfferListDiv: function() {

       return this._templateOfferListDiv;

   }

}

jMVP.View.registerClass('jMVP.View');

jMVP.Presenter = function(view, model) {

   this._view = view; // intelisense doesn,t work

   this._view = new jMVP.View(); // now its works

}

this calsses are in the same file eg. test.js, so xml comments will not appear.

The problem is that i don't want use "new" all the time only for intellisence :) and i want get intellisense for my custom object properties and functions. Its possible?

I waiting for some help.

# re: JavaScript Intellisense Improvements with VS 2010

Saturday, May 8, 2010 9:13 PM by Mohamed Radwan

Cool feature thank you, you always surprise us with wonderful enhancement, really thanks

# re: JavaScript Intellisense Improvements with VS 2010

Thursday, May 27, 2010 3:50 PM by patricia

I'm having the same problem as :

Wednesday, April 14, 2010 4:14 AM by Paul Dalemans

When i want to do $('#Something).val() the new intellisense only allows me to do $('#Something).valueOf(), which will be added automatically. Can this behaviour be ignored?

I did not add the jquery intellisense, so now it seems the default intellisense makes it harder work with jquery ?

it's realllllly annoying.   i have a lot of js in my views and some in my partials views. i know not idea, but sometimes it's unavoidable.  and my js files are loaded in the master pages. so i have no reference to them!!

is there a way to use the /// <reference path="~/Scripts/blahblahblah.js" />

style reference in a view/partial view file?