JavaScript Intellisense Improvements in Visual Studio 2008

Table of Contents

1. Introduction
2. Intellisense Support
3. JavaScript Includes and Intellisense
4. Intellisense Hints and Comments
5. Conclusion
6. Useful Links
7. History

Introduction

In today's AJAX (Asynchronous JavaScript And XML) world, one of the most obviously missing features of Visual Studio is the support for rich JavaScript Intellisense. Sure, a limited support for variable and function completion is available. It dates back as far as Microsoft Visual InterDev. However, it is minimalist at best. On more than one occasion, I had to venture outside of Visual Studio, my tool of choice for ASP.NET applications. To gain access to more advanced JavaScript features, such as the support for Intellisense with external includes, I had to use other IDEs, such as Eclipse and Aptana.

Finally, the latest version of Visual Studio (Visual Studio 2008) introduces the much-needed improvements in the JavaScript handling area. We will take a look at some of them.

Intellisense Support

To begin with, the Intellisense support for JavaScript is much improved. Since JavaScript is a weakly typed language, it is to be expected that some Intellisense limitations will stem from the language itself. In Visual Studio 2008, it appears that every effort is being made to compensate for these.

An inclusion of keywords in Intellisense, for example:

Since we are on the topic of efficiency, another neat feature introduced by Visual Studio 2008 is the transparency of the Intellisense window. Simply click the Control (Ctrl) key while the window is displayed, and you can see the code underneath it.

JavaScript Includes and Intellisense

As mentioned above, while working on JavaScript intensive projects, one of the features I missed most often was the support for Intellisense from external library files. Visual Studio 2008 solves this problem by exposing all public methods and properties to the page you are including it in. For example:

Include YAHOO animation library file in your page:

Collapse Copy Code

<script src="yui/build/animation/animation.js" type="text/javascript"></script>

And immediately you get the following in your Intellisense window:

Visual Studio 2008 takes this concept a step further by allowing you to reference one include from inside another. For example, let's assume, that your JavaScript code is in an include file, and within your include you're using a third party solution, like Mootools or Script.aculo.us. In order to get the list of members from another file within your include you need to place a reference comment at the top of it. For example:

Collapse Copy Code

/// <reference path="yui/build/yahoo-dom-event/yahoo-dom-event.js" />/// <reference path="yui/build/animation/animation.js" />

Intellisense Hints and Comments

The last new feature we'll look at is the Intellisense hints. You can add hints to your code in the following manner:

Collapse Copy Code

function SayHello(firstName, lastName){  ///<summary>Returns a string of Hello plus passed names</summary>  ///<param name="firstName" type="string">Person's first name</param>  ///<param name="lastName" type="string">Person's last name</param>  ///<returns>string</returns>  return "Hello " + firstName + " " + lastName;}

Notice, that the comments block is within the function block, not directly above it, as it would be in VB.NET or C#.

By using the above code, you get the following in your ASPX file:

And then the parameter details will also display your comments:

Notice, that, in the above example, type attributes are specified as string. These are provided for informational purposes only, but you may find them useful when coding.

At the time of this writing, Intellisense hints and comments were only available from includes, not from the code block within your current page. That means, that the above example will display comments and hints only when you place it in an include file, and then reference it in your ASP.NET page. If, however, you place this code in the same ASP.NET page's script block, the comments and hints will not be shown. It will be interesting to see, where Microsoft takes this feature in the final release.

Conclusion

Visual Studio 2008 brings many new features that will make the coding experience more rewarding, and hopefully, more expedient. Throughout the previous Visual Studio releases, JavaScript IDE integration has been somewhat neglected, but, with the advent of AJAX and Web 2.0 applications, it is finally getting the attention it deserves.

Useful Links

• Visual Studio 2008
• The format for JavaScript doc comments
• Visual Studio 2008 JavaScript Intellisense
• More Javascript Intellisense with Visual Studio 2008 Beta 2
• JScript IntelliSense in Visual Studio Orcas
• The Yahoo! User Interface Library YUI
• MooTools
• script.aculo.us
• To see the power of Yahoo animation library in use, check out a French language practice game application I wrote a while ago

History

• 4^th November, 2007: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Arkady Lesniara Member

Arkady Lesniara is a Senior System Analyst/Developer based in Toronto, Canada, specializing in .Net solutions that focus on ASP .Net, VB .Net, T-SQL, AJAX, and all related technologies. Occupation: Web Developer Location: Canada