VS 2012 JavaScript references & JQuery VSDoc

Following from a previous post I once did on JQuery VSDoc Support within Visual Studio the main way of referencing this has changed inVisual Studio 2012. I thought I would do a follow up article as the online articles I have found have been not as easy to understand as possible.

Previously

On my previous post I explained that essentially when you linked to a JavaScript file that had a .vsdoc in the same folder either via a CDN or local web server you would get the Intellisense when writing JavaScript and that there were matching .vsdoc files on the Microsoft CDN for the JQuery libraries. This is still certainly true but now there is a different way of  referencing the files within your solution so that the Intellisense comes through in all JavaScript areas.

JavaScript Intellisense Options

Starting with Visual Studio 2012 we now have a section in the options allowing us to configure information on how the JavaScript Intellisense should work and also the references to default JavaScript files.

Screenshot of Visual Studio 2012 JavaScript References

If you select from the drop down at the top Implicit (Web) you will still a list of all of the implicit references that when using JavaScript will be loaded in. For example I have the Web Essentials 2012 Visual Studio Extension and this has added a reference to JsDocComment.js which contains Intellisense enhancements for some third party JavaScript frameworks.

Relative & Absolute JavaScript References

Within the dialogue above you will see we have a couple of different types of references and depending on their you must configure them differently

  • Absolute – The previously mentioned Web Essentials 2012 package uses an absolute reference and the file referenced contains all of the code in it for the extension of the JavaScript that is needed
  • Relative – The settings of Visual Studio 2012 have a built in ~/Scripts/_references.js location. This is a relative path and if you create this file at the correct location Visual Studio will pick it up and load it. Visual Studio will load any JavaScript as normal like the other files but will also load any references in this file globally as well. For example if you want to load the Intellisense for JQuery you would add /// <reference path=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0-vsdoc.js” /> to the file and this would go an load the vsdoc allowing Intellisense in all JavaScript files.  You can add as many reference path lines to this file pointing to any number of external libraries as you like and if the JavaScript inside contains Visual Studio style comments these will be loaded.

You can add any new paths in to the settings -> references area either to a file you always want loaded in (such as JQuery) or a different location for your relative  JavaScript files to be loaded from, it’s really up to you.

Preferences

I played around with a few different configurations on how to load these such as

  • Putting the JQuery VSDoc on a mapped drive and adding a reference directly to the options
  • Adding the reference relatively

I found that although adding the VSDoc to a mapped path or shared location would allow everyone in a team to simply add this to the options there was no way to differentiate versions and as different projects might have different versions it wouldn’t work. My suggestion is have a pre-set folder such as ScriptReferences in every project with a _references.js file in it and then add this as a relative path in the Visual Studio options. Then each project could add the versions it uses. If there was some way to cascade options on a project level like Resharper does you could do it the first way but I currently don’t know a way of doing that.

About ScottReed

I am an ASP.NET C# developer working in the south of England current for the south's top digital agency Redweb. I have worked for financial companies, CMS vendors, charities and web agencies tacking a variety of challenges. As part of my jobs and freelance I have done lots of work for high profile companies, big brands and government bodies and worked on some exciting large award winning builds. I love development and enjoy architectural design of software. ScottGu is my .NET hero and the Guru of all thing M$oft