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.

2 comments :

  1. Nice to see you! Thank you so much for posting useful information, like this, because I could not find anything about that! But I want to say a few words about studying. No time to write correct essays like other smart learners?! Then you must click and check this professional essay writer agency's site where you can order tasks online and all your study problems will be solved. All my best friends and classmates are using this superb company already.

    ReplyDelete
  2. The new report by Expert Market Research titled, ‘Global Fraud Detection and Prevention Market Report and Forecast 2022-2027’, gives an in-depth analysis of the global Fraud Detection and Prevention Market, assessing the market based on segments like solution, scale of end user, type of fraud, end use industry, and major regions. The report tracks the latest trends in the industry and studies their impact on the overall market. Fraud prevention and detection are major concerns for financial institutions, and they are projected to become major drivers of IT investment. The use of these solutions in the insurance, banking, and financial services industries has increased as a result of online transaction fraud, insurance claim fraud, and card-related fraud. The major players in the market are SAP SE, IBM Corporation, SAS Institute Inc., Oracle Corporation, ACI Worldwide Inc., others. Our database is used by the world's renowned academic institutions and Fortune 1000+ companies to understand the global and regional business environment market. Expert Market Research have 500+ analyst team that provide our clients A+ services. We are providing expansive industry data and help them in formulating market and business strategies. For more information about our services. You can visit our website.

    ReplyDelete