{"id":863,"date":"2013-07-16T08:00:00","date_gmt":"2013-07-16T08:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2013\/07\/16\/javascript-editor-improvements-in-visual-studio-2013-preview\/"},"modified":"2022-10-06T11:13:22","modified_gmt":"2022-10-06T18:13:22","slug":"javascript-editor-improvements-in-visual-studio-2013-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/javascript-editor-improvements-in-visual-studio-2013-preview\/","title":{"rendered":"JavaScript Editor Improvements in Visual Studio 2013 Preview"},"content":{"rendered":"

[Updated 10\/18\/2013]<\/p>\n

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.<\/p>\n

[end]<\/p>\n

In Visual Studio 2012, we added many new features<\/a> for JavaScript developers, delivering a first class JavaScript experience in Visual Studio. Now, in Visual Studio 2013, we\u2019ve continued evolving and improving the JavaScript development experience with a focus on helping you navigate and understand the increasingly complex JavaScript source you\u2019re working on. In this post, I\u2019ll describe two editor improvements that help: identifier highlighting<\/strong> and the navigation bar<\/strong>.<\/p>\n

Identifier Highlighting<\/h2>\n

When using Visual Studio 2013, you\u2019ll notice that when you select an identifier, like a variable name or function call, references to it are highlighted in the current source file:<\/p>\n

\"Image<\/a><\/p>\n

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:<\/p>\n

\"Image<\/a><\/p>\n

Navigation Bar<\/h2>\n

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\u2019ve 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.<\/p>\n

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:<\/p>\n

\"Image<\/a><\/p>\n

Or, let\u2019s say you are working in a more class-based code base. In JavaScript, keywords like class and namespace aren\u2019t available to define the structure of classes and namespaces in your files. Typically you\u2019ll 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.<\/p>\n

\"Image<\/a><\/p>\n

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.<\/p>\n

\"Image<\/a><\/p>\n

Other improvements to the JavaScript Editor<\/h2>\n

In addition to the improvements highlighted here, the JavaScript editor provides support for other new Visual Studio editor features:<\/p>\n