Visual Studio 2010

VS2010: The Amazing Expanding Dialog Box

Find and Replace Dialog Ever since Visual Studio 2010 was released I’ve noticed that the find/replace dialog was constantly expanding.  After multiple openings and closings I needed to resize it to make it usable again.  Apparently I wasn’t the only one that noticed since it was the one of top reported issues at Microsoft Connect.

If this problem is bothering you as much as it was me there’s good news.  A patch is available to resolve the issue.  I installed it over the weekend and haven’t seen the problem since.

Working With JavaScript

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.

Hot Key Happiness

I use hot keys so frequently that I tend to take them for granted and forget that not everyone uses as many as I do.  Many times when I’m working with a colleague I habitually hit some key sequence that is immediately followed by a quizzical “How’d you do that!?” So, for the benefit of those looking for a few easy productivity enhancers I’m providing this simple list.  Although some well-known key sequences are included this post is in no way intended to be another all-inclusive list but rather just a listing of those that I find most useful from day-to-day.

Windows 7

My primary operating system is Windows 7. With Windows 7 Microsoft was kind enough to give us lots of new hot keys for positioning windows and switching between applications in addition to leaving traditional ones in place.

Window Position/Management

Windows Key + D
Show desktop

Windows Key + P
Change projector/2nd monitor mode (duplicate, extend, etc…)

Windows Key + Up Arrow
Maximize window

Windows Key + Down Arrow
Restore/minimize window

Windows Key + Shift + Right | Left Arrow
Move window to different monitor

Switching Between Applications

Windows Key + [task bar index #]
Start a new instance of the item at the specified index or switch to the active instance if it is already running
Example: Assuming Internet Explorer is the first item on the task bar Windows Key + 1 will open IE.

Windows Key + Shift + [task bar index #]
Force a new instance of the item at the specified index to start

Alt + Shift + Tab
Cycle backwards through task chooser
No, I’m not going to describe the version w/o shift. Also, I hardly ever the alternative Aero Flip (Windows Key + Tab) but sometimes it’s handy. :)

Visual Studio 2010

Although Visual Studio 2010 is now RTM and exposes some nice functionality through hot keys but most of my favorites have been in place for quite some time. A great resource for learning some of the lesser-known (or sometimes rather well-known) is Zain Naboulsi‘s Visual Studio Tips and Tricks blog.

Code Formatting

Ctrl + E, D
Format document

Ctrl + E, F
Format selection

Code Navigation

F12
Go to definition

Shift + F12 (or Ctrl + K, R)
Find all references

Ctrl + K, Ctrl + T
View call hierarchy

Ctrl + G
Go to line

Ctrl + –
Navigate backward

Ctrl + Shift + –
Navigate forward

Ctrl + B, T
Toggle bookmark

Ctrl + B, N
Go to next bookmark

Ctrl + B, P
Go to previous bookmark

Ctrl + B, C
Delete all bookmarks

Commenting

Ctrl + E, C (or Ctrl + K, C)
Comment line/selection

Ctrl + E, U (or Ctrl + K, U)
Uncomment line/selection

Outlining

Ctrl + M, Ctrl + H
Hide current selection

Ctrl + M, L
Toggle all outlining

Ctrl + M, M
Toggle outlining expansion

Refactoring

Ctrl + R, R (or F2)
Rename symbol

Ctrl + R, M
Extract method

Breakpoints

F9
Toggle breakpoint

Ctrl + Shift + F9
Delete all breakpoints

Ctrl + D, N
Break at function

Miscellaneous

Shift + Alt + C
Add class to project

Ctrl + E, S (or Ctrl + R, W)
Show/Hide whitespace characters