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:

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:

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:

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.

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:

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!