Make sure your _reference.js references are in the correct order!

I’m messing about with angular at the moment, and I wasted an hour tonight trying to work out why javascript intellisense was not playing ball in Visual Studio 2015.

Mads Kristenson has written some great articles on javascript intellisense – here and here. He details the whys and wherefores, and in particular how the _references.js file controls which javascript files are included in javascript intelligence. I’m not going to detail how it works here, so check out Mads’ articles if you want to know more.

A typical _references.js file, and the one I was having problems with, looks like this –

/// <autosync enabled="true" />
/// <reference path="../js/app.js" />
/// <reference path="../js/project.js" />
/// <reference path="angular.min.js" />
/// <reference path="angular-animate.min.js" />
/// <reference path="angular-aria.min.js" />
/// <reference path="angular-cookies.min.js" />
/// <reference path="angular-loader.min.js" />
/// <reference path="angular-message-format.min.js" />
/// <reference path="angular-messages.min.js" />
/// <reference path="angular-mocks.js" />
/// <reference path="angular-resource.min.js" />
/// <reference path="angular-route.min.js" />
/// <reference path="angular-sanitize.min.js" />
/// <reference path="angular-scenario.js" />
/// <reference path="angular-touch.min.js" />
/// <reference path="bootstrap.js" />

Topping the file is the autosync directive which tells VS to automatically add, remove, and update references for all javascript files in the project. This is an awesome feature.

Having added the ../js/app.js and ../js/project.js files to my project, autosync added the references towards the top of the _references.js file, as shown above.

My app.js file simply defines an angular module, and as you can see below that intellisense is available for the angular object which is defined in the angular.min.js file.

intellisense1

However, when editing my project.js file, which extends the app module, there was no intellisense available for any of the angular objects.

intellisense2

This is where I spent a solid hour removing and adding references, trying out different intellisense configuration options, and basically going around in circles.

I finally tried reordering the references so that the angular files were referenced before my files.

/// <autosync enabled="true" />
/// <reference path="angular.min.js" />
/// <reference path="angular-animate.min.js" />
/// <reference path="angular-aria.min.js" />
/// <reference path="angular-cookies.min.js" />
/// <reference path="angular-loader.min.js" />
/// <reference path="angular-message-format.min.js" />
/// <reference path="angular-messages.min.js" />
/// <reference path="angular-mocks.js" />
/// <reference path="angular-resource.min.js" />
/// <reference path="angular-route.min.js" />
/// <reference path="angular-sanitize.min.js" />
/// <reference path="angular-scenario.js" />
/// <reference path="angular-touch.min.js" />
/// <reference path="bootstrap.js" />
/// <reference path="../js/app.js" />
/// <reference path="../js/project.js" />

And lo and behold, javascript intellisense now works. Doh!

intellisense3

To be exact, I’m using Visual Studio Community 2015 RTM, version 14.0.23107. I haven’t tried this out with any other version of Visual Studio. So it may simply be one of a number of teething problems with 2015 which will be ironed out. Let’s hope so. But if you experience this in another version, then you know what to do.

 

 

 

Advertisements

2 thoughts on “Make sure your _reference.js references are in the correct order!

  1. The same thing happens in Visual Studio 2013. I just did the same as you and spent an hour trying to figure out why I couldn’t get intellisense working for a specific file. I had already turned off auto-sync so I stripped the _references.js file down to the single entry. Still nothing. Since the file I included had a dependency on another file, I included that one, in alphabetical order, but nope. I reordered them so the depended-on file was first, and Voila!, it worked. Fantastic. So the auto-sync doesn’t put things in the right order, and I’m going to have to manually reorder the file which has > 70 scripts (after I paired out the other 40 I didn’t care about). How is it I can’t find any documentation describing this behavior?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s