Tag Archives: WebEssentials

How I help IntelliSense to provide more useful information #coding #JavaScript

OK, maybe it’s a hack rather than help, but there’s a lot that IntelliSense can figure out and some “basic” stuff it can’t. JavaScript is dynamic, often the type isn’t provided until runtime and this hinders IntelliSense, this is what I try to help it with. I’m using Microsoft Visual Studio Ultimate 2013 Update 2 with the corresponding Web Essentials.

Here’s starting simple, this works well:

var Person = function (who, bikes)
{
    this.Who = who;
    this.Bikes = bikes;
};

var p = new Person("Tim", ["bluebell", "rudy", "nexus"]);
console.log(p.Who.toUpperCase() + " has " + p.Bikes.join("; "));

“TIM has bluebell; rudy; nexus” is output to the JavaScript console in Microsoft Internet Explorer 11. IntelliSense can figure out what Who and Bikes is, so toUpperCase and join came from the auto-completion list it provides.

Wow, you think, IntelliSense is clever, it is, but take away the type information, for example I create a Log function and execute it somewhere else, let’s say in another script, this still outputs the same:

// Script 1
var Person = function (who, bikes)
{
    this.Who = who;
    this.Bikes = bikes;
};

Person.prototype.Log = function ()
{
    console.log(this.Who.toUpperCase() + " has " + this.Bikes.join("; "));
};

// Script 2
var p = new Person("Tim", ["bluebell", "rudy", "nexus"]);
p.Log();

But IntelliSense within the Log function does not know Who is a string and has the toUpperCase function and that Bikes is an array and has the join function.
Since the types are going to be fixed, I’ll never want anyone to do something like new Person(1, 2), I can comment the Person constructor function, but that doesn’t help when writing the Log (or other) functions.

IntelliSense has an API, so you can log messages to the Output (JavaScript Language Service) panel in Visual Studio like so:

intellisense.logMessage("Hello :)"); 

But you only want to do that if it intellisense is defined, so…

if (typeof intellisense !== "undefined")
{
    intellisense.logMessage("Hello :)");
}

That code will even work in production now, the if statement block contents will not be executed unless you (or the JavaScript runtime) defines a global called intellisense, but in Visual Studio it will be run.

So we can help IntelliSense by faking some values in the Person constructor function, so it can figure out what the types are:

// Script 1
var Person = function (who, bikes)
{
    this.Who = who;
    this.Bikes = bikes;

    // Help IntelliSense
    if (typeof intellisense !== "undefined")
    {
        this.Who = "";
        this.Bikes = [];
    }
};

Person.prototype.Log = function ()
{
    console.log(this.Who.toUpperCase() + " has " + this.Bikes.join("; "));
};

// Script 2
var p = new Person("Tim", ["bluebell", "rudy", "nexus"]);
p.Log();

Now the Log function has auto-completion for Who and Bikes, yay! You can also stick a logMessage call in there too, so you can see when it’s helping you.

This is an especially useful trick when you have dependency injection and complex object parameters (more on this another time I hope) and can be used anywhere (not just in constructor functions).

If you are struggling with IntelliSense (I always am), then I hope this helps in some way, please post a comment with your experiences.

Advertisements

How I share JavaScript files between web projects #coding #JavaScript

It’s the first wall to climb when you have multiple web projects with common code, how to share scripts between web projects without duplication, copy paste etc. Sure, I have nugget packages for libs, but do I need to have the same scripts in every web project (and branches thereof too)? My last count was 15 copies of everything (15 TFS workspaces), if I make a change to only one of my scripts, that is 14 that are potentially out of date and it’s easy to miss one!

TFS workspaces are certainly not as helpful as they could be, so I resorted to windows symbolic links / symlinks (CreateSymbolicLink function in kernel32.dll) as a means of sharing files and folders and then cloaking the folders in my TFS workspace. I can live with manually including additions and deletions as a result of the cloaking, the upside is that I can link extra scripts into one web project and share the rest with the other projects. It is perfect for an administration project that has extra scripts from the normal projects and we don’t want to have those admin scripts included in the normal projects.

So, I have a good solution that reduces the duplication, but it didn’t play well with IntelliSense (go to definition). I’m using Microsoft Visual Studio Ultimate 2013 Update 2 with the corresponding Web Essentials and IntelliSense doesn’t like these links, specifically, configuring the _references.js file in “Tools -> Options -> Text Editor -> JavaScript -> IntelliSense -> References” doesn’t seem to work for me, maybe I’ve just not got it correct yet, anyway, I gave up in favour of a different approach. It also falls flat when someone doesn’t have it configured correctly, it requires everyone to have it configured, and it’s fixed regardless of project.

Fortunately (and deliberately) the relative path to each Scripts folder is the same level of depth. So rather than use the above way to configure it, I opted for placing a reference to it in each script I wanted it, like so:

/// <reference path=”~/../../Shared/Scripts/_references.js” />

And in the _references.js the references are like so (of course there are a LOT more than just this one):

/// <reference path=”~/Scripts/angular.js” />

where the symlinks are like so:

XYZ/Solution1/Project1/Scripts/_references.js -> XYZ/Shared/Scripts/_references.js

XYZ/SolutionN/ProjectN/Scripts/_references.js -> XYZ/Shared/Scripts/_references.js

and

XYZ/Solution1/Project1/Scripts/angular.js -> XYZ/Shared/Scripts/angular.js

XYZ/SolutionN/ProjectN/Scripts/angular.js -> XYZ/Shared/Scripts/angular.js

This means I only have one copy of the scripts on my hard disk, the _references.js are shared between each project etc and I’m not constantly fighting to keep them all up to date.

Additional references can be defined in other files and referenced where required, for example the administration ones, but I tend to only keep core script references in the _references because if you get a circular reference then IntelliSense stops working!

If you are struggling with sharing scripts, then I hope this helps in some way, please post a comment with your experiences