This basically involved placing code similar to the following into every MVC view where you wanted IntelliSense to show up:
@* Stupid hack to get jQuery intellisense to work in the VS2010 IDE! *@
Well, since the release of Visual Studio 11 Beta, and the recent release of Visual Studio 2012 RC (Visual Studio 2012 is now the formal name of Visual Studio 11) we now no longer have to perform the above hack and clutter up our MVC views in order to enjoy the benefits of IntelliSense.
The first step to configuring this is to open up VS2012’s Options dialog by selecting TOOLS > OPTIONS from the main menu bar:
The first thing to change here, is to select Implicit (Web) from the Reference Group drop-down list. Doing this shows the list of references and included files within the Implicit (Web) group, as shown below the drop-down. Implicit (Web) includes a number of .js files that are included with VS2012 itself (and are located within your VS2012 install folder), but it also includes the following, project-specific entry:
Of course, this is all configurable, so you can easily add your own file in here in your own specific location or change the pre-defined _references.js, but since ASP.NET MVC is based around convention over configuration, let’s leave the default as it is! Click OK and close the options dialog.
Now, what’s happened so far is that as part of the pre-defined Implicit (Web) reference group, VS2012 will look for a file called _references.js within a web project’s ~/Scripts/ folder (the ~/ implying the root of our web application) and use the references that are defined within that file as other files that should be referenced from within each of our MVC views automatically.
So, the next step is to add this file to one of our MVC projects in the relevant location, namely the ~/Scripts/ folder. Right-click on the Scripts folder and select Add > New Item:
The format of the _references.js file follows the JScript Comments Reference format that has been in Visual Studio since VS2008. It’s shown below:
/// <reference path=”path to file to include” />
You can add as many or as few “references” within the _references.js file that you need. Bear in mind, though, that the more files you add in here, the more it may negatively impact the performance of the editor/IDE as it’ll have far more files that it has to load and parse in order to determine what IntelliSense should be displayed. A sample _references.js file is shown below:
/// <reference path="jquery-1.6.3.js" />
You can use relative paths which are relative from the folder where the _references.js file is located:
/// <reference path="SubfolderTest/jquery-1.6.3.js" />
And you can also use paths that are relative to your web project’s “root” folder by using the special ASP.NET ~ (tilde) syntax:
/// <reference path="~/Scripts/SubfolderTest/jquery-1.6.3.js" />
Once this is configured and saved, you will now have lovely IntelliSense within your MVC Views without needing additional hacky script references from within the view itself. See the screen shot below:
Yep, that’s the entirety of the view that you can see there (no @if(false) nonsense!), and that’s lovely jQuery IntelliSense being displayed as soon as you start typing $( !
Update (10/Feb/2013): Changed the screenshots to use a nicer elliptical highlighting and tweaked some references ever-so-slightly (i.e. change jQuery from 1.6.2 to 1.6.3)