I’ve started on a new project that’s going to be pretty heavy on JavaScript.  Today one of my teammates and I were discussing which editor we should use.  I haven’t done much with JavaScript in the past few years but in the past I’ve typically used Notepad++.  Given the amount of work I’m going to be doing with it in the near future I decided I needed something more than a bulked up text editor.  My co-worker convinced me to give Eclipse with the EclipseJS Plug-in a try because that combination allowed easy navigation between JavaScript files, some code completion capabilities, and a nice function list.  I messed around with it for a little while and although the UI was clean it didn’t feel right.  Although I admittedly didn’t use it for long the Eclipse/EclipseJS combination was missing some things I’ve come to expect from a modern IDE.

The first thing I noticed was the lack of code formatting.  I don’t know about you but I really don’t want to spend my days worrying about indentation levels, bracket positioning, and spacing when the IDE can do it all for me.  When you’re used to having this done automatically you really become cognizant of what a huge time sink code formatting really is when you have to do it manually.

Another productivity blocker came from the lack of any automated commenting.  When I need to comment out a block of code in Visual Studio it’s Ctrl + E, Ctrl + C (uncomment: Ctrl + E, Ctrl + U) but when I looked for a button or menu item in Eclipse to do the same thing I came up empty handed.  Manually commenting each line or navigating to the start and end of the block to insert the comment symbols is a tedious waste of time.  On a related note, many of the convenient shortcuts I’m used to such as cutting an entire line just by moving the cursor to that line just weren’t available.

Finally, there was no easy way to open the folder containing the JavaScript file I was working on.  This might not sound important but since we’re using TFS for source control on this project I need easy access to either the Source Control Explorer or the TFS Power Tools shell extension to check out the file.  Sure, I could copy the full file path from a context menu but then that still requires navigating to the folder.  Visual Studio provides both.

With all this in mind it was clear that Eclipse wasn’t going to work for me so I jumped back to Visual Studio.  After a few quick tweaks to the JavaScript code formatting settings I was coding like it was C#.  There was one thing I really liked in EclipseJS that was missing in Visual Studio: a JavaScript function list.  The ability to navigate between functions simply by double-clicking on a name was really nice and ultimately a good time saver.  It turns out there’s a free extension for that.

The JavaScript Parser extension adds a new JavaScript Parser window that can be docked along with Solution Explorer (or other windows) and displays a tree containing all of the functions in the file.  What really sold me on the extension was that it also includes all of the anonymous functions used for event handling or jQuery functions such as .each.  To get the extension just install it through the extension manager.  Once the extension is installed restart Visual Studio and open the window through View -> Other Windows -> JavaScript Parser.

One of the most compelling reasons I found for using Visual Studio 2010 for editing JavaScript is its superb IntelliSense capabilities.  In addition to the core JavaScript objects, DOM objects, and user-defined types and functions it also allows for external references through the use of directives.  The inclusion of support for external references means that it is incredibly easy to activate IntelliSense support for other JavaScript libraries like jQuery or Reactive Extensions for JavaScript by adding a reference directive to the file.

Adding a Reference to jQuery

1. In the file that will reference jQuery add the following line before any script (typically the beginning of the file).  The path attribute must reflect relative URI of the jQuery JavaScript file.

   /// <reference path="jQuery-1.4.2.min.js" />
   

2. Press Ctrl + Shift + J to force IntelliSense to refresh.

References aren’t restricted to local files nor are they restricted to just JavaScript files.  It is perfectly acceptable to reference aspx files as well.

Notice the syntax of the reference directive in the example above.  It should be familiar to anyone using XML Comments in C# because that’s exactly what it is.  As part of the IntelliSense support Visual Studio supports XML Comments in JavaScript.

I’d be willing to try Eclipse again if I missed something.  I’ve also both heard and read some good things about Aptana Studio which I haven’t tried yet although it looks promising.  For now though I’ll probably continue to use VS2010 for JavaScript editing because it meets my needs really well.