Thursday, September 17, 2015

Getting Visual Studio intellisense to play nice with RequireJS

I was trying to get the intellisense to work in my javascript files in my ASP.NET MVC project, for which i'm using RequireJS and here's how it all worked out.

Working with _references.js

Visual studio is using a file called _references.js to grant you the wisdom of intellisense in JavaScript files. First off, we need to make sure we have our _references.js file where Visual Studio can find it. By default Visual Studio will search for this file in the location "~/Scripts/_references.js" if your'e working with a web project. However if your scripts-folder resides in a different area of your project you can easily change where Visual Studio looks for this file.

Options → Text Editor → JavaScript → IntelliSense → References

In the dropdown called "Reference Group" choose "Implicit (Web)".

If you're interested you can read more on the history of _references.js here http://madskristensen.net/post/the-story-behind-_referencesjs



Configuring _references.js for RequireJS

I was reading up on the subject on at https://msdn.microsoft.com/en-us/library/dn904583(v=vs.120).aspx) but i was having issues with how the path was resolved to my RequireJS modules. So my scripts wasn't loaded correctly. 
While reading the debug messages in the output window for JavaScript Language Service, saw from where Visual Studio tried to load my files, C:\Program Files (x86)\Microsoft Visual Studio 14.0\JavaScript\References\require.config.

The solution was to configure the basePath for RequireJS in the _references.js file, and after RequireJS will handle the dependencies you have in your modules and Visual Studio will grant you IntelliSense.

Code

/// <autosync enabled="true" />
/// <reference path="Vendor/require.js" data-main="main.js" />

require.config({
baseUrl: '~/Assets/Scripts/'
});


Decorate your scripts with comments

In Visual Studio 2015, Microsoft has added support for JSDoc. Which is a documenting/comment syntax, and if you use it you get really sweet intellisense in correlation with _references.js. So instead of just getting what functions and properties an object might have you also get information of parameters and types if you choose to write it. Visual Studio also has support for xml based comments to complement your intllisense, but personally i prefer JSDoc.

You can read the documentation of JSDoc at http://usejsdoc.org/

E.g. creating a module like this will grant you the intellisense of the picture below.

Code

/**
* AWESOM-O
* @module modules/awesomo
*/
define('modules/awesomo', [
'underscore'
], function(_){
'use strict';

return {

/** Will return a random number between 0 and 100. */
randomNumber: function(){

return _.random(0, 100);
},

/**
* AWESOM-O will try to give you medical help
* @param {string} bodyPart - The bodypart in need of medical assistance
*/
giveMedicalHelp: function(bodyPart){

return 'Um, actually A.W.E.S.O.M-O is not programmed for that function.';
}
};
});

Result



Happy coding.