JavaScript / jQuery IntelliSense in Visual Studio 2012

I blogged a while ago about a rather ugly and hacky way in which you could get the goodness of jQuery (and general JavaScript) IntelliSense in the Razor editor in Visual Studio 2010’s IDE.


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! *@
@if (false)
   <script src="../../Scripts/jquery-1.6.2-vsdoc.js" type="text/javascript"></script>


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.


In Visual Studio 2012 (hereafter referred to as VS2012) this has been achieved by allowing an additional file to be placed within the solution/project which will contain a list of “references” to other JavaScript files that all MVC views will reference and honour.


The first step to configuring this is to open up VS2012’s Options dialog by selecting TOOLS > OPTIONS from the main menu bar:




Once there, you’ll want to navigate to the Text Editor > JavaScript > IntelliSense > References options:




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:




Once the Add New Item dialog is displayed, we can add a new JavaScript File, making sure that we name the file exactly as the default pre-defined Implicit (Web) reference group expects the file to be named:





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:




The format/syntax of the references within this file can take a number of forms.  You can directly reference other JavaScript files without needing a path if they’re in the same folder as the _references.js file (as the example above shows):


/// <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)

I’m now an MCPD!

MCPD-RGBEver since I passed my MCTS exam back in December last year, I’ve been hard at work doing further study and practice to attempt to pass the follow-up exam 70-576: PRO: Designing and Developing Microsoft SharePoint 2010 Applications.


Well, I finally took that exam earlier this week and I’m pleased to report that I’ve passed!  Once again, I managed to get 100% on the exam, although I really don’t know how I achieved such a high percentage score this time around as I was convinced I’d got answers to some of the questions wrong!  Again, I’m over the moon with my result!


Passing this exam has now earned me the distinguished certification of:

Microsoft Certified Professional Developer – SharePoint Developer 2010


In taking these two exams within the last couple of months, it seems I’ve stirred something inside of me that quite likes the idea of acquiring further Microsoft Certification.  For now, though, I think I’ll take a little break from the intense study that I’ve done of the SharePoint platform, although I’ll still be using SharePoint 2010 quite frequently.  I seem to have amassed a fair sized collection of other tech books in the intervening period that I really need to get on with reading!

Alternative FizzBuzz-style Interview Questions

Hand drawing chart in whiteboardWhen interviewing programmers, I will usually reserve a portion of the interview for a simple programming exercise.  This is never anything too difficult and is usually conducted on a whiteboard.

I’ve blogged before about the FizzBuzz problem, which is a great little problem to pose to a prospective candidate within the hands-on programming part of an interview.  Of course, it’s possible that some enterprising candidate may well have come across the FizzBuzz problem on the internet and will remember the answer, by route, to the problem without really thinking through the problem and organically realising their own solution.  In and of itself, this isn’t always necessarily such a bad thing, since a candidate that has a familiarity with the FizzBuzz problem is, in my own personal experience, already a step ahead of a lot of other potential candidates, as their familiarity with FizzBuzz shows that they read the kind of blogs and internet pages that care to talk about such things.

Despite this, I often find myself trying to come up with alternatives to the FizzBuzz problem.  This isn’t so easy as it first may sound as there’s a number of distinct properties that the resulting problems must have: 

  • The answer should be short enough to be able to be written in a few lines of code on a whiteboard.
  • The problem must be simple enough to focus one one specific problem area.
  • The problem should allow the candidate to display some aptitude that you care to test for.

Interestingly, I think that a lot of the best FizzBuzz alternatives also make great Code Katas.  A Code Kata is a small exercise that all programmers can perform and practice over and over again in order to improve and hone their skills.  I’ve also found Code Katas to be a great tool to practice Test-Driven Development (TDD), and indeed, many of the FizzBuzz style problems lend themselves very well to TDD derived solutions.

Here’s my list, which is incomplete, but serves to offer a flavour of the alternatives:

  • Reverse a string (without using any built-in reverse functions in your language of choice).
  • Reverse a sentence (i.e. "bob likes dogs" becomes "dogs likes bob").
  • Check if a given string is a palindrome (again, without using any built-in reverse functionality).
  • Find the first location of a string within another string (again, avoiding any built-in language functions to do this).
  • Find the minimum value in a list.
  • Find the maximum value in a list.
  • Calculate a remainder (given a numerator and denominator).
  • Return distinct values from a list including duplicates (i.e. "1 3 5 3 7 3 1 1 5" becomes "1 3 5 7").
  • Return distinct values and their counts (i.e. the list above becomes "1(3) 3(3) 5(2) 7(1)").
  • Check if a given string is a palindrome without using a built-in string.Reverse function.
  • Calculate the factorial of a given number.
  • Calculate the Fibonacci sequence.
  • Given a starting number, count down from that number to 0.
  • Output all multiples of 3 between 1 and 200 in reverse order.

As you can see, many of these are quite trivial to accomplish, much like the original FizzBuzz problem, but there are quite a number of ways in which each simple test can be subtly altered for something similar but different, and which can affect the solution code.  If used in an interview situation, asking a candidate to write a quick solution on a whiteboard to question of "Counting down a number" seems trivial (and is!), but you can easily build upon this by asking for the countdown to be by a specific or arbitrary decrement (i.e. count down by 2 or 3 each time).  Other questions, which are again on the surface fairly simple to answer, are good candidates for a follow up discussion on things like optimization and performance improvements.  For example, the question of checking if a string is a palindrome has various interesting ways in which such a check can be optimized and the check short-circuited.  Finally, all of these questions are great to follow-up with discussions about how the candidates simply code might be altered to ensure testability of the solution via a suit of unit tests.