I’ve been working on some coding projects lately, and spending a lot of time in Visual Studio 11. I wanted to start a series to share some of my favorite features that I’ve enjoyed using in the product. One feature that I ended up using a lot, while working with jquery and jquerymobile, is the new JavaScript tooling support.

IntelliSense

The first thing you’ll notice when doing JavaScript development in Visual Studio 11 is IntelliSense. After using it, you might forget that you’re working in a dynamic language! The JavaScript editor has been completely rewritten on top of the same Chakra runtime that ships in IE10, which means that IntelliSense is more responsive, accurate and scalable than ever before.

The engine was designed to accommodate the development of both web and Metro style apps, so that regardless which platform you’re targeting, you’ll get the same rich IntelliSense experience. You can see examples of this in the table below. 

  Host API

  Sample Screenshot

  WinRT

  WinJS

  JavaScript
  (ES5)

  DOM

  HTML5

Examples of using IntelliSense against various host-provided APIs

Third-Party Libraries

The JavaScript community is extremely active, and as a result, produces an almost constant flow of reusable components and libraries. This strong ecosystem makes it great to be a JavaScript developer, and we appreciate that everyone has their own favorite libraries. To ensure that a developer’s preferences don’t inhibit their IntelliSense experience, the JavaScript editor has been designed to recognize and support modern third-party libraries so that you get a “native”-like experience when consuming their APIs. You can see examples of this below.

  Library

  Sample Screenshot

  jQuery

  RequireJS

  + jQuery

 

  Using the
  RequireJS
  extension

Examples of using IntelliSense against 3rd party libraries


These examples highlight a couple of interesting new features that make the IntelliSense support so compelling in VS11:

1)      IntelliSense is available for parameters within DOM event handlers

2)      Any child scripts that a library requests will be automatically downloaded and made available for IntelliSense

In addition, library authors have the ability to augment the IntelliSense experience (as RequireJS has done in the example above). This way, when a library makes use of a pattern that the IntelliSense engine doesn’t understand the semantics about, the library can provide this information. This ensures that developers continue to get an amazing editing experience while library authors can be as expressive as they want when designing their API.

Enhancing IntelliSense with XML Doc Comments

Despite how accurate IntelliSense is, JavaScript is ultimately a dynamic language. Therefore, there are still times when the value of an object is too ambiguous for the editor to know what you expect to see when accessing it. For those instances, you can provide “hints”, in the form of XML doc comments, which explicitly declare your completion list expectations. This feature has been in Visual Studio for a few releases, and has been enhanced in Visual Studio 11 to make it easier to use.

One neat enhancement is the ability to annotate the value of an object, as opposed to its type (constructor function). Simply provide an example of what the object’s value could be and IntelliSense will take care of the rest. This allows you to define an IntelliSense-only “type” without having to modify your existing API.

options.settingOne being recognized as a Number because of the value annotation

The value attribute can be set to any JavaScript expression which allows you to get as creative as you want in order to ensure you get exactly the IntelliSense you’re looking for.

options.gameCanvas being set to an <canvas> due to the execution of a jQuery selector

Once you get the hang of using doc comments, they can help speed up your development. For more details about how to use them, make sure to read the documentation.

Debugging

Another place where I really felt the difference in Visual Studio 11 was with the JavaScript debugging. It saved me a couple of times!

When you begin debugging your app, you’ll immediately notice a couple of new tool windows: DOM Explorer and JavaScript Console. Both of these windows help you understand the browser’s interpretation of your app and perform quick and iterative updates without having to interrupt your debugging session.

DOM Explorer

Regardless whether you’re developing a web app or a Metro style app, you’re writing your UI in HTML and CSS. Trying to visualize a given page’s DOM, as well as the exact CSS properties needed to style it in the way you want, can become a daunting task for any non-trivial application. With the DOM Explorer, you can easily find an element in the DOM tree (by clicking the Select Element button), view the CSS properties that are applied to it, and tweak them on the fly. I’ve found this makes it a lot easier to perform “guess-and-check” operations on my HTML and CSS that would otherwise have taken a lot of time if I had to keep modifying my code and restarting the debugger.

Viewing a <p> element in the DOM along with the CSS styles that are applied to it

Any change you make will be immediately reflected in your running application. For example, if I change the color property (shown in the Trace Styles tab) of the currently selected <p> tag to “red” and then switch back to my Metro style app, all of the headers will be red.

I can continue to try different colors, experiment with various fonts, or make any other change to my app and get immediate visual feedback on how it would look. Pretty easy!

You can find more information on the DOM Explorer on MSDN.

JavaScript Console

While the DOM Explorer allows visual interaction with your app, the JavaScript Console allows you programmatic access. You can use it to execute any JavaScript expression, which provides a REPL for testing out arbitrary code.

I commonly find myself using the console to test code before adding it to my source. This iterative approach allows me to quickly validate some logic without having to worry about restarting the debugger in between revisions. Like the DOM Explorer, the console’s effects are reflected immediately, so you can view your changes in the running app as you make them.

For more information on the JavaScript Console, including custom console commands, please visit MSDN.

I also recommend visiting the Visual Studio blog for a great post on additional JavaScript debugging enhancements.

Conclusion

Whether you’re a seasoned JavaScript expert, or newly interested in the language, I hope you’ll have an opportunity to try out the new JavaScript tools in Visual Studio 11. Between the rich IntelliSense and the debugging capabilities of the DOM Explorer and the JavaScript Console, there are a lot of new features to explore.

Enjoy!

 

Follow me at twitter.com/jlzander.