Visual Studio JavaScript autocompletion (VSDoc IntelliSense)

Visual Studio JavaScript autocompletion (VSDoc IntelliSense)

31 December 2015  |  Developer

Visual Studio has autocompletion (IntelliSense, VSDoc) for the JavaScript language and of code in the same file. But it would also be nice if it could also autocomplete on your JavaScript code in other files. jQuery supplies VSDoc files for their framework. How to use those or make your own?

Referencing another file

As with C#, VSDoc information is gathered from line comments that have an extra slash, e.g. 3 slashes in a row. To reference a jQuery VSDoc from another JS file, you do something like this:

/// <reference path="~/Scripts/lib/jquery/jquery-1.4.4-vsdoc.js"/>

VSDoc understands tilde (~) as the root of the project. Usually you won't have make separate VSDoc files, just referencing the original files will be enough. So the file does not have to be a special prepared VSDoc file, it can be any JS file. In a larger web application project where all JS is packed and minimized together, what we usually do is create a single JS file with all the references and reference this file from the other JS files. And no worries, Visual Studio can deal with reference cycles.

Documenting code

You can also document your code, such that on autocompletion you will see the function's summary and parameters' description. To make it work, you have to put this comment block inline after the function definition. An example from jQuery's fadeToggle:

fadeToggle: function(duration, easing, callback){
		/// <summary>
		/// 	Display or hide the matched elements by animating their opacity.
		/// </summary>
		/// <param name="duration" type="Number" optional="true">
		/// 	A string or number determining how long the animation will run.
		/// </param>
		/// <param name="easing" type="String" optional="true">
		/// 	A string indicating which easing function to use for the transition.
		/// </param>
		/// <param name="callback" type="function" optional="true">
		/// 	A function to call once the animation is complete.
		/// </param>
		/// <returns type="jQuery" />
                ... some code could go here...

More information