New JavaScript editing features for Web development in Visual Studio 11 Developer Preview

New JavaScript editing features for Web development in Visual Studio 11 Developer Preview

Rate This
  • Comments 8

Visual Studio 11 Developer Preview has the JavaScript design time engine rewritten, sharing base with IE's JavaScript engine. It has faster performance and better memory footprint.

The list below shows some new feature and changes comparing with Visual Studio 2010 for Web development scenarios. All feedbacks are welcomed as it's our passion to make JavaScript developing experience as pleasant, reliable and efficient as other languages.

IntelliSense

Description

VS2010 Behavior

Visual Studio 11 Developer Preview Behavior

ECMAScript 5 compliance

No

Yes. Visual Studio 11 Developer Preview fully supports ECMAScript 5.

clip_image002

Auto-reducing Statement Completion List

No

Yes, if the IntelliSense is automatically enabled when typing.

The following screen shots shows all the document's statement completion items that contains character "al":

clip_image003[4]

Completion Hint shows function signature

No

Yes, making completion hint more helpful.

clip_image007[5]

IE DOM IntelliSense

No, change DOM based on the current schema and is hard to upgrade.

Yes, will get IntelliSense from IE10's DOM, which is implicitly referenced.

Implicit references (js file that is always referenced for editor IntelliSense)

No

Yes, through tools->option->Text Editor->JavaScript->IntelliSense->References, "implicit" reference group.

Immediate feedback on undefined objects (statement completion invoked on an undefined object shows a list of all identifiers in the file)

No

Yes, we call it identifier list, which should be helpful in many cases.

image

Ctrl+Shift+J to rebuild IntelliSense

Yes

IntelliSense is now automatically rebuild.

named function expressions

var a = function namedFunc() {

//position 1

}

//position 2

Show IntelliSense in both position1 and position2 due to inaccuracy of the engine.

Better engine accuracy, only showing IntelliSense in position 2.

The distinction is that named function expressions identifiers are only visible within the scope of the function expression itself.

Script Loader dynamically add loaded JavaScript file as reference

No

Yes. Engine load the dynamically loaded JavaScripts for reference.

The following is a screen shot of the IntelliSense using jsdefer library.

image

XML Document

Description

VS2010 Behavior

Visual Studio 11 Developer Preview Behavior

IntelliSense Signature overloading

N/A

New feature

clip_image013[4]

Debug/Breakpoint

Description

VS2010 Behavior

Visual Studio 11 Developer Preview Behavior

F9 set on a line with multiple statement

Select and break on whole line

Select and break on the statement where cursor is on, making debugging compressed JavaScript files possible.

Open remote extension-less JS files in JS editor

No

Yes, debug the following will open jsapi in editor :

<script src="https://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">

google.load("jquery", "1.6.0");

</script> )

MicrosoftAjax.js and other library Support

Description

VS2010 Behavior

Visual Studio 11 Developer Preview Behavior

MicrosoftAjax's IntelliSense filter, glyph and other support

Hard coded

Supported via MicrosoftAjax.vsextensions.js file, which is located in [ProgramFiles]\Microsoft Visual Studio 11.0\JavaScript\References\MicrosoftAjax.vsextensions.js

IntelliSense Extensibility for other JavaScript documents

N/A

Users can write JavaScript VS IntelliSense Extension file and place it in the same directory as the original JavaScript file.

Editor display

Description

VS2010 Behavior

Visual Studio 11 Developer Preview Behavior

Outlining

Through extension

Supported

Brace matching

Through extension

Supported

Brace highlighting

Through extension

Supported

Go to Definition (F12)

N/A

Supported

Validation

Description

VS2010 Behavior

Visual Studio 11 Developer Preview Behavior

Regular expression

No color coding, no validation

With color coding and validation

"use strict"; validation support (ECMAScript 5)

No

Yes

Consistency with IE JavaScript syntax checking

No

Yes, the JavaScript syntax error you see in VS will be the same as you see in IE.

Misc

Description

VS2010 Behavior

Visual Studio 11 Developer Preview Behavior

jQuery Templates script block support, show IntelliSense, coloring and indent.

No

Yes

clip_image015[4]

Sharepoint JS reference via src="http://blogs.msdn.com/SiteAssets/xxx.js"

No

Yes

<script type="text/javascript" src="http://blogs.msdn.com/SiteAssets/jquery-1.4.1.min.js"></script>

Dom Explorer

No

Supported when debugging with IE10 only

JavaScript Console

No

Supported when debugging with IE10 only

Customized JavaScript Snippet

Yes

Yes.

Note, VS2010 customer snippet file is not compatible with Visual Studio 11 Developer Preview. An attribute needs to be changed in each snippet file from "jscript" to "JavaScript"

<Code Language="jscript">

... </Code>

Change to

<Code Language="JavaScript">

... </Code>

Name across product

Jscript

JavaScript

We will have more JavaScript editing features before the next release of Visual Studio 11. If you have any suggestions or feedbacks, please do let us know. The feedbacks always help to priorities our feature implementation and bug fixes.

Thanks for supporting!

Xinyang Qiu

SDET

Azure Platform Application and Tools team

Leave a Comment
  • Please add 1 and 5 and type the answer here:
  • Post
  • I think the best thing about this is that you're now calling it "JavaScript" instead of "JScript".

    Everything else looks great too :)

  • Does "Outlining" include the ability to collapse regions (e.g. #region)?  If not, please add this.  For an example implementation, please see visualstudiogallery.msdn.microsoft.com/0696ad60-1c68-4b2a-9646-4b5f4f8f2e06

  • Another upvote for regions. thats a valuable add. Also, can we get a dropdown in the top of the editor that lists all the functions available in that page? Detecting objects and prototyped extensions and segregating them in another dropdown will be added awesomeness :)

  • Any chance we could have an option to move the comments above the function definition like every other language. eg.

    /// XML HERE

    var a = function(a, b, c) {};

    var a = function(a, b, c) {

      /// INSTEAD OF HERE

    };

  • I'm also liking the "Name across product" change to "JavaScript". These improvements will increase productivity for sure.

  • I'm sorry but I DO NOT want IE DOM intellisense. I want CROSS BROWSER intellisense.

    Now, as if you were a genie in a bottle, what I really want is for VS to compile my WPF UI down to the HTML5 canvas with path data, JavaScript, image references, and so on so I can just write it once in WPF and run it in any browser with minimal changes but I doubt that will ever happen. Still, at some point, Google or someone else will have something like that and when they do, it's game over for all other web development platforms.

  • Hi, Christopher,

    Thanks for the suggestions.

    We didn't include the cross browser dom file out of the box at the moment in Visual Studio 11 Developer preview. It’s possible to add a different DOM definition or modify the existing one, so that you can get the cross browser IntelliSense.  We made it really flexible.

    The current file that provides the DOM reference is under %programfiles% or %programfiles(x86)%: Microsoft Visual Studio 11.0\JavaScript\References\dom.js.  If it get changed, please backup the change for your future reference as the DOM file may be different in future releases.

    To adding additional DOM js files, just create one and include in the implicit reference dialog.

    Best regards

    Xinyang Qiu

  • See if its possible to get intellisense for other dynamic loaders other than jquery's deferred that support AMD github.com/.../wiki

    Intellisense for requirejs inside of visual studio would be awesome.

    Or maybe prod the IE team into helping to speed up the spec on Harmony-modules so that is script loading built into the js engine itself before IE 10 is released.  

    This kind of thing is important and would only microsoft's vision for building rich html 5 applications for windows 8.  

Page 1 of 1 (8 items)