JavaScript Editor Improvements in Visual Studio 2013 Preview

JavaScript Editor Improvements in Visual Studio 2013 Preview

Rate This
  • Comments 17

[Updated 10/18/2013]

The JavaScript navigation was removed from the final release of Visual Studio 2013. The decision to do this was difficult and driven by a need to optimize stability and performance after we received feedback from many of you working with the Preview and RC versions of this feature. We also heard some great feedback about the usefulness of the navigation bar and understand that many of you were looking forward to this coming in the final product. We will be considering a return of the navigation bar for a future release.

[end]

In Visual Studio 2012, we added many new features for JavaScript developers, delivering a first class JavaScript experience in Visual Studio. Now, in Visual Studio 2013, we’ve continued evolving and improving the JavaScript development experience with a focus on helping you navigate and understand the increasingly complex JavaScript source you’re working on. In this post, I’ll describe two editor improvements that help: identifier highlighting and the navigation bar.

Identifier Highlighting

When using Visual Studio 2013, you’ll notice that when you select an identifier, like a variable name or function call, references to it are highlighted in the current source file:

Identifier Highlighting

More than a text match, this is a smart highlight that understands the JavaScript language and helps you get a feel for how your code will actually flow when your source is executed. For example, if we extend the above sample with a call to another function after save, you can see that references to rating in the second function are highlighted, but not in the first:

Identifier Highlighting

Navigation Bar

The navigation bar in Visual Studio provides an easy and quick way to navigate around your code and the structure of your files. For JavaScript, we’ve tailored the navigation bar experience to the unique scenarios enabled by the language. The navigation bar surfaces the major structural elements of your source no matter how you write your source.

If you are working with loose functions in a script file, the navigation bar will help you navigate through them using the <global> container (located in the left-most drop down, which we call the containers list). As an example, take the following code:

Navigation Bar

Or, let’s say you are working in a more class-based code base. In JavaScript, keywords like class and namespace aren’t available to define the structure of classes and namespaces in your files. Typically you’ll use a library like WinJS with helper functions to mimic a class-based language. Notice in the following screen shot that the navigation bar understands WinJS namespaces and classes.

Navigation Bar understands WinJS namespaces and classes

Or, you may prefer a style of development that uses pure JavaScript objects and functions, the core elements of a JavaScript application. Again, notice that the navigation bar recognizes a common JavaScript pattern for creating namespace objects and using constructor functions:

Navigation Bar recognizes common JavaScript patterns for creating namespace objects

Regardless of the approach you take, the navigation bar aims to surface the major structural elements of a source file to help you easily browse and work with the contents of your file.

Other improvements to the JavaScript Editor

In addition to the improvements highlighted here, the JavaScript editor provides support for other new Visual Studio editor features:

  • Brace completion - In JavaScript, the editor will auto-insert closing characters for: {, (, [, ', and "
  • Move line up/down (Alt + Up Arrow, Alt + Down Arrow)
  • Scrollbar enhancements

To learn more about these, take a look at the Visual Studio 2013 Editor Improvements blog post.

As you work with these new features in the Visual Studio 2013 Preview release, please let us know what you think by sending us a smile or frown using the new Visual Studio send-a-smile feature!

clip_image012

Jordan Matthiesen (@JMatthiesen)– Program Manager, Visual Studio JavaScript tools team

Short Bio: Jordan is a veteran web developer of 14 years, now working on the Visual Studio team to provide great tooling experiences to JavaScript developers

Leave a Comment
  • Please add 3 and 8 and type the answer here:
  • Post
  • Are these features part of the Web Express version?

  • Yes, these features are available in the Web Express edition.

    Jordan - PM, Microsoft Visual Studio

  • Wow!! Cool features! I'm gonna try this Visual Studio 2013 ASAP!

  • Good!

  • I'm going to so love this one.. can't wait to taste it out.

  • It's very helpful features.

  • I love

  • Does the editor support code folding in Javascript as yet?

  • @Xander Code folding was introduced in Visual Studio 2012

    Jordan - PM, Microsoft Visual Studio

  • @Jordan Matthiesen:  

    Thanks, but I should have been more explicit in my question. I understand that it is supported for functions, but I mean support for #region and #endregion similar to what we have in C#. Say something like:

    //#region One

    ...

    //#endregion

    Thanks

  • @Xander

    Ah - thanks for clarifying! We do not have support for // #region comments in VS 2013 by default, but you can add this using the Web Essentials extension from the VS Gallery. Here's a link to the 2013 preview version: visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361

    Jordan - PM, Microsoft Visual Studio

  • Looks like a lot of great features in VS 2013. I was hoping to try out the WinJS templates and samples on the VS 2013 Ultimate preview in MS Azure, but it looks like those templates are not supported on that VM OS. I tried following a workaround using VS 2012 tools and installing the Win8 SDK, but this setup failed on the VM.

  • Jordan, is it known that the navigation bar doesn't seem to work with AMD style files like Require.js modules? Hopefully this will be fixed in the RC, it's a really useful feature for the files it does work in!

  • @Shawn

    Great feedback - We've heard some requests for AMD/require.js module support and we're considering it for future updates.

    Thanks!

    Jordan

  • I think these improvements are nice, but I'm not thrilled by them.  Let me explain.  I'm not a fan of the Navigation Bar.  I would rather have a tree structure similar to the solution explorer or the one in the VS Extension Javascript Parser that I could dock in another window and and would remain in expanded state as opposed to having to use a drop down menu that you have to scroll through and collapse every time you want to use it.  What I would really love to see is a feature that is directed towards some of the more common Javascript Libraries such as KnockoutJS.  It would be nice to have a tool that could understand the concept of observable or computed function (even if we have to include meta data in the comments).  Lastly, It would be nice if objects nested within each other, like an object graph, would be recognized by the intellisense.  I have tried to do this using XML Documentation Comments, but it only goes one level deep.  It doesn't seem to traverse the object graph even thpough all my comments sppear to be linked up.  One level deep it is great, it would be nice to have that all all levels of the object graph.  I understand I might sounds a tad ungracious, and I apologize if that seems to be the case.  Thank you for the improvements, and I look forward to the bright future to come.

Page 1 of 2 (17 items) 12