Enabling IntelliSense for JavaScript Libraries in VS 2012

In Microsoft Visual Studio 2012, you can enable IntelliSense for commonly used JavaScript libraries such as jQuery and BackBone.js, as well as your own application-specific libraries.

_references.js

The key to enabling IntelliSense for a JavaScript file is to add a file path reference to the file called _references.js. To see how to do this, create an ASP.NET MVC 4 Web Application. In the Scripts folder you will find the file called _references.js. Open this file and you will see the following:

/// <reference path="jquery-1.9.1.js" />
/// <reference path="jquery-ui-1.8.20.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
/// <reference path="knockout-2.1.0.debug.js" />
/// <reference path="modernizr-2.5.3.js" />

Visual Studio is able to use the JavaScript library as a reference to apply basic IntelliSense for statement completion by adding the following line to the _references.js file:

/// <reference path="[your-javascript-library-filename.js]" />

Notice that Visual Studio automatically adds references for the jQuery, Knockout, and Modernizr libraries. Let’s see how this works with your own JavaScript libraries. I created a file called myJavaScriptLibrary.js with a function called GetGreeting:

function GetGreeting(hour) {
    var message;

 if (isNaN(hour)) {
        message = "Hello";
    } else {
        if (hour < 12) {
            message = "Good morning";
        } else if (hour < 17) {
            message = "Good afternoon";
        } else {
            message = "Good evening";
        }
    }

 return message;

}

Now I am going to add a reference line for my library to _references.js:

/// <reference path="jquery-1.9.1.js" />
/// <reference path="jquery-ui-1.8.20.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
/// <reference path="knockout-2.1.0.debug.js" />
/// <reference path="modernizr-2.5.3.js" />
/// <reference path="myJavaScriptLibrary.js" />

Visual Studio’s IntelliSense finds my function.

IntelliSense finds the function GetGreeting()

I can make IntelliSense more helpful by including a description for the function. This is achieved by adding a standard JavaScript comment.

// Return a proper greeting based on the hour of day in military time.
function GetGreeting(hour) {
    var message;

 if (isNaN(hour)) {
        message = "Hello";
    } else {
        if (hour < 12) {
            message = "Good morning";
        } else if (hour < 17) {
            message = "Good afternoon";
        } else {
            message = "Good evening";
        }
    }
    return message;
}

Visual Studio’ IntelliSense will find the comment and display it in the help popup window.

IntelliSense displays the standard JavaScript comment.

XML Documentation (JavaScript) Comments

You may want to provide more information to the developer such as property type information. This can be achieved by using XML Documentation (JavaScript) comments instead of standard comment tags. Visual Studio provides a great example of this kind of documentation for jQuery. To see it, go to the Scripts folder in Solution Explorer and open the file called jquery-1.9.1-intellisense.js. Listed below is an example of the kind of comments the developer sees.

IntelliSense displays description from XML Documentation.

You can learn more about extending JavaScript IntelliSense at: http://msdn.microsoft.com/en-us/library/vstudio/hh874692.aspx

To learn more about XML documentation for JavaScript go to: http://msdn.microsoft.com/en-us/library/vstudio/bb514138.aspx