JavaScript In Visual Studio 2008

If you’ve been working with web applications for some time, you’ve probably done some JavaScript coding at some point.  For a long time it was difficult to do two things well: 1) code with consistency in JavaScript and 2)  write code neatly with good formatting. 

On the first issue, I’ve praised the release of such wonderful JavaScript frameworks such as jQuery, Prototype.js, and others.  With Visual Studio 2008 you can get intelliscence with your JavaScript whether you are writing it in the DOM or in a separate .js file.  This is huge!  Now you don’t have to go searching through the docs just to find the name of the method you’re trying to call.  One thing I was stuck with for a while is how to get intelliscence in a separate .js file.  You can do this in the following two ways:

• Type the following line at the top of your .js file: “/// <reference path="../jquery-1.3.2.min-vsdoc.js" />” (note that this is the VS doc for jQuery which ships with ASP.NET MVC or downloaded from jQuery Docs.  It will be included in box with VS2010)

OR

• Open you solution in visual studio.  Open you .js file that uses some other framework.  Using the mouse, drag the .js framework file (such as Prototype.js) onto your .js file.  This will automatically add the <reference> node to the .js file.

Visual Studio has also helped a lot with auto-formatting (use Ctrl+K+D to perform initiate the auto format for a page).  Now your JavaScript code can look clean and readable just like your C# code.  There is one difference though, between the C# formatting and the JavaScript formatting, the placement of the {} brackets.  Some people like the opening { on the same line as the method/function declaration.  C# formatting by default puts the { } on they’re own line, which I’ve come to like.  If you’re like me, I like things to be consistent.  The following steps show how to change the placement of the { so that it behaves like the C# style.

1. Go to Tool^Options menu.
2. Navigate to the Text Editor node, then to the JScript node, then to the Formatting node.
3. On the Formatting node click the check box that says “Place open brace on new line for functions”.