JavaScript is an important technology for development on many different platforms, including web, mobile app, and server programming. In Visual Studio 2013 we already support IntelliSense, Go to Definition, colorization, and formatting of JavaScript source, along with several other features. We’ve carried these forward into Visual Studio 2015 and we’ve improved the experience for JavaScript developers by focusing on three key areas:
- Improving the development experience when using popular JavaScript libraries
- Adding support for new JavaScript ECMAScript 2015 (also known as ES2015 and formerly ES6) language and web browser APIs
- Increasing your productivity in complex JavaScript code bases
Each of these areas was chosen based on feedback we heard on UserVoice, through social media, via the send-a-smile/frown feature in Visual Studio, and from many direct discussions we’ve had with developers like you.
In this post, I’ll highlight the new features of the JavaScript editor for each of these areas. You can take advantage of these features in all JavaScript projects supported in Visual Studio.
Support for popular JavaScript Libraries
AngularJS 1.x and RequireJS support
By default, Visual Studio 2015 supports the very popular AngularJS and RequireJS libraries. Previously on this blog we’ve discussed the setup required when using Visual Studio 2013 with both of these libraries (using AngularJS in VS, using RequireJS in VS). In Visual Studio 2015, the support is baked in, with no additional setup steps required.
Whenever you reference the angular.js (or angular.min.js) library in your code, editor automatically provides IntelliSense, Go to Definition, and navigation bar support:
IntelliSense support for Angular 1.3, showing suggestions for the routeProvider service
Similarly, RequireJS IntelliSense and navigation support are automatically enabled when you bring in the require.js library. To customize RequireJS support, see Customizing IntelliSense in RequireJS.
IntelliSense suggestions for a module referenced using RequireJS
JSDoc documentation comments
Documentation comments are a great tool for providing detailed information about APIs in your application. They can also help you guide Visual Studio to provide better IntelliSense suggestions as you write code. In Visual Studio 2015, the editor now understands JSDoc-style documentation comments and can use them to improve your coding experience. JSDoc has become the unofficial standard for JavaScript comments on the web, and they’re used in libraries like Angular and Ember. Here’s a quick example using these comments and showing IntelliSense tooltip support to document a getPhotos() function.
JSDoc comments displayed in IntelliSense tool tips
When you reference parameter types in comments (such as Array, above) you can use standard built-in JavaScript types and objects, such as String, Number, or Array. You can also define a custom object, which is useful for documenting parameters with custom properties, such as configuration settings. In the example below, you can see suggestions for an options object that may be passed to the savePhoto() function.
Documenting configuration objects using JSDoc
In addition to JSDoc comments, XML-style documentation comments continue to be supported as they were in Visual Studio 2013. A full list of the JSDoc tags supported by the editor may be found on MSDN.
New language and browser features
As language standards and web APIs evolve, the JavaScript editor is also updated to keep pace. In this release we introduce further support for new language features in the ES2015 standard (formerly known as ES6) and a set of new DOM APIs. These updates match the same features found in the recently announced Microsoft Edge web browser.
ECMAScript 2015 (formerly ECMAScript 6) support
Like the Microsoft Edge browser, which now supports a large set of ES2015 features, the Visual Studio JavaScript editor also supports a majority of ES2015Specifically, Visual Studio 2015 provides support for:
- Classes
- Arrow functions (also known as lambdas)
- Template strings
- Rest/spread operators
- Object literal enhancements
- Proxies
- Symbols
- New ES2015 APIs such as Map, Set, Weakmap, Weakset, Promises, and a variety of other API changes
This allows you to now write code such as the following:
Using new language features in ES2015
Notice the class keyword used for the LayoutManager class, a template string for the message variable, and finally an arrow function used as the second argument to the addEventListener API to define a function callback. To learn more, check out the set of learning materials being collected over in Eric Douglas’ ES6 Learning repository on GitHub or review the specification for the ES2015 version of JavaScript.
You may have noticed that some ES2015 features aren't supported yet, such as modules. We’ve heard from you that support for the latest ES2015 language features is important and we’re looking to support the full ES2015 specification as soon as possible.
IntelliSense for new web browser APIs
Visual Studio 2015 also provides IntelliSense support for new web browser APIs available in Microsoft Edge. Here are a few API highlights:
You can see a full list of APIs supported by visiting the http://status.modern.ie website and filtering to APIs available in the preview release.
Working in complex JavaScript code
Finally, we’ve heard from developers that when working in complex JavaScript source it can be difficult to find your way through the code. There are two editor features that have been added to help you discover important comments and APIs in your JavaScript source so you can more easily navigate through your code.
Task list
You can use the Visual Studio task list to keep track of // TODO, // HACK, // UNDONE, or custom comment tokens in your source. This can help to surface technical debt and possible issues in your code.
Viewing TODO and HACK comments in JavaScript source, using the Task List
Navigation bar
The navigation bar is enabled for the JavaScript editor with support for the common design patterns and libraries used by JavaScript developers. This helps you jump to identifiers you’re frequently using in your code and reduces the time you have to spend visually scanning your source files.
In the following example you can see how the editor understands ECMAScript 5 source:
Using the navigation bar to browse JavaScript source, written using ES5
And in another example, you can see that the navigation bar supports the new ES2015 class keyword (which greatly simplifies the equivalent prototype syntax in the previous example):
Using the navigation bar to browse JavaScript source, written using ES2015
Looking ahead
In addition to the features highlighted here, there are a variety of bug fixes, performance improvements, and other updates to help give you a first class JavaScript editor experience. Going forward, we’ll continue to expand the editor to help build large scale JavaScript solutions.
We also know how important it is to you to have an editor that supports the latest changes in the JavaScript language, such as ES2015 modules and generators, and we’re working to make sure Visual Studio has great support for them.
To try these features, download Visual Studio 2015 today. If you’re an open source developer, student, hobbyist, or work in a small professional team, check out the free Visual Studio 2015 Community edition. Let us know how well the JavaScript editor works for you by sending us a smile or frown. You can also add your votes for future JavaScript tooling on our UserVoice site.
 | Jordan Matthiesen– Program Manager, Visual Studio JavaScript tools team @JMatthiesen Jordan has been at Microsoft for 3 years, working on JavaScript tooling for web and mobile application developers. Prior to this, he worked for 14 years developing web applications and products using ASP.NET/C#, HTML, CSS, and lots and lots of JavaScript. |