We’ve seen a lot of places where people are talking about C# design patterns, .NET Class Library design guidance, or software architecture, but we seldom meet the people who are going to talk about how to standardize Web based design pattern. With the growth of the Web technology, the Web based applications are deployed more widely than before, and therefore the Web developers are increasing. It is the time for us to discuss how we start coding in Web with standards.

This article and its series will introduce some common coding standards as well as useful tools for the Web developers to make their code standard, stable, extensible and maintainable.

Today we will focus on how to enable JavaScript Intellisense in Visual Studio.

Use Visual Studio JScript Intellisense to enhance JavaScript development experience

Microsoft Visual Studio provided a way to populate all recognizable JavaScript objects and functions in its built-in Intellisense system. For Visual Studio 2008, you need to install Service Pack 1, then install this hotfix to enable this functionality; for Visual Studio 2010, this feature is built in supported. With the help of JScript Intellisense, developers can browse any script objects, DOM elements, user-defined types and also object from other scripts. This is also a great help while developers are working with jQuery. Visual Studio has fully support on jQuery Intellisense, For more information about jQuery Intellisense, please see this post.

Once you installed the hotfix for Visual Studio 2008, you can start the Intellisense by type any character into a JScript file; if you want to update JScript Intellisense dynamically during coding, press Ctrl + Shift + J to do so. Here is a screenshot for the JScript Intellisense for jQuery.

It is a best practice that you create a global JScript file “Intellisense.js” in each Web application to bring Intellisense for the common referenced JavaScript libraries, in the “Intellisense.js”, write the following lines of code where contains the path of referenced libraries (both external or internal project paths are supported), then save the file.

Then in your other .js file, add the following code to the first line of the file:

Ok, now you can enjoy Intellisense everywhere with scripting!

NOTE: If you want to reference a script file that is embedded into an assembly, use “name” and “assembly” attributes to replace of “path” attribute, where the “name” specifies the full name of the embedded .js script file, and the “assembly” specifies the assembly name (no culture info, version and token, just assembly name without extension).

Here I need to explain the word “JScript”. JScript is a Microsoft extension of standard JavaScript, it is an implementation of ECMA Script standards, it is owned by Microsoft and embedded with Microsoft’s Operating Systems such as Windows 2000, Windows XP, Windows Vista, Windows 7 or above. Microsoft Windows has a separately script execution engine (Windows Scripting Host, WSH) to interpret the script and execute the content, the current version for the WSH is 5.8.

Because Visual Studio brings Intellisense support for JScript files, not only for the JavaScript source, so I use the word to describe this feature. Please be aware, also do not confuse with these two concepts.

How to make your own JavaScript library compliant with JScript Intellisense

If you are a JavaScript library developer and you wish to enable Intellisense for your own scripts to the web developers, you need to follow some rules to make it work. Microsoft Visual Studio performs Intellisense by dynamically “read” and “interpret” the JScript file to provide its entire data structure. If your script has build warnings, or errors, it is difficult for the IDE to understand the whole source. Therefore, the first, as well as the most important rule, is to ensure no warnings or errors in your script files.

Get Started

Ok. Let’s start. First of all, I want to make a function visible to Intellisense, say I write a function like this:

Then you automatically gain the ability to see this function in Intellisense list, see:

Add Summary

Second, you may add some XML document comments into your function definition to enable more information to be shown in the list. Use a <summary> tag to contain the description of the function.  Here is the code:

NOTE: In Visual Studio 2008, if you call the XML document commented function within the same file where you define it, you may not able to see the advanced Intellisense information (i.e. Summary is missing, return type is missing, parameter list does not show the parameter types, etc). This is by design. In Visual Studio 2010, you can see all the information in Intellisense wherever you call or define the function.

Now in your code, where you want to call this function, when you hit “add”, the Intellisense list displays the summary for the function add().

Add parameter types and return type

You may notice that the return type is not displayed here. In JavaScript, because all data types are weak, it is very hard to say what exactly will be returned from this function, however, developers may “guess” its return type from the function name, parameters or other context information. it is a convenience that developer who defines this function interface gives the expected returned type as well as the incoming parameter types. This is very reasonable. Thus in the XML document comments, developers can specify <returns> tag to make these constraints (also benefit to the Intellisense system to know what type of objects will be populated). See the following code:

By making this change, when you call this function, the Intellisense tooltip may show the return type is “Number”, as well, the Intellisense system will only list objects that defined with the type of “Number” to the returned instance of this function. see below:

Next, you may specify the parameter types in XML comments, use <param> tag to do that. Here is the sample XML comments for the function add(a, b) with summary, return type and parameter types defined.

For a completely list of available XML document comment tags for JScript Intellisense, see format of XML comments for JScript Intellisense.

Ok! you have almost completed everything. Open your “Error List” in Visual Studio to see if there are any warnings or errors in your current editing script file, clear each warning or error, press Ctrl + Shift + J to refresh the Intellisense database, type any letter in the editor to enjoy!