JavaScript Editor Improvements in Visual Studio 2013

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