Sublime Studio: Replicating Sublime Text 2 Features in Visual Studio

I've been gearing up to get into some heavier ASP.NET development for the next couple of months. I saved up in my piggy bank for a few months and grabbed a Lenovo Yoga. Then I installed Visual Studio, fired up a new project and immediately felt sad. As web developer, I spend most of my time on a Mac in the editor that has become the critics darling - Sublime Text 2. I have spent a fair amount of time in Visual Studio over the past several years, but it's been quite a while since I used it very heavily.

Sublime Text 2 is like my car. I know where all the buttons are and what they do. I know how to release the trunk, set the cruise control and tweak the wipers to just the right speed during a drizzle.as

For me, Visual Studio is like a really fancy rental car. It's got a million bells and whistles, but I drive around in the dark with the headlights off while everyone screams at me and I'm hitting every button I can find trying to turn them on. It's unfamiliar, it's frustrating and I feel like I spend a lot of time on trivial tasks>

Instead of just throwing my hands up, I decided to identify the core features of Sublime Text 2 that I need to be productive, and figure out how to do those things in Visual Studio. I call it, Sublime Studio.

SO. MANY. ICONS.

Sublime Text 2 has the standard menu toolbar and that's all. There is no strip of icons. There is no green "play" button just begging you to press it and find out if your code is going to run or not. As a point of reference, this is what Sublime Text 2 looks like:

Visual Studio used to be really bad about putting about 200 icons in the toolbars by default. I remember when Scott Hanselman suggested that we get rid of the ones we don't use.. This looks like it's gotten better in Visual Studio 2012.

Note that toolbars are context sensitive, so the HTML Source Editing toolbar doesn't even show up unless you have the appropriate file type open.

Frankly, virtually every one of these icons is a keyboard shortcut that you probably know. These are the essentials. Open File, Save, Save All, Undo, Redo? The ones you don't know you can memorize using the keybindings poster.

Right-click and lose these toolbars. Much better.

Collapsing Panes

Sublime Text 2 has a project drawer, but that's really it in terms of "panes". I usually keep this collapsed. It's noisy and I don't need it showing all the time. It' easy to collapse it and expand it again with Ctrl + K, Ctrl + B.

Visual Studio, on the other hand, has a LOT of panes. Some of them are necessary. Specifically, I find that I need the Solution Explorer and Property panes. The rest I may or may not need. You can hide the ones that you don't need but don't want to lose by clicking on the pin. For the ones that you want to have around, what you really want is to be able to toggle them with the keyboard.

I had a bit of a time finding a way to do this, but I did find that Alt + Shift + Enter takes you into full-screen mode which gets rid of any panes that are showing. What I do now is leave the Solution Explorer and Property panes open, and just toggle between full screen mode and normal mode with Alt + Shift + Enter.

Goto Anything

Sublime Text 2 has this incredibly useful feature called "Goto Anything". The way that this works is that you hit Ctrl + P and you get a window that slides down. It's an autocomplete and you can just start typing the name of another file. The list filters as you type and the currently matched file actually shows up in the background. It's an INCREDIBLY powerful feature that lets you teleport all over your project effortlessly.

I missed this feature so much in Visual Studio that it broke my heart. I just knew there had to be a way to get it back. As it turns out, this feature doesn't exist in Visual Studio in a 1 to 1 feature match, but you can get close, and there are two different ways to do it.

Quick Launch

There is the "Quick Lauch" which is embedded in the chrome at the top right-side of Visual Studio. You can set focus there with Ctrl + Q and just start typing. This bad boy searches everything. And I do mean everything.

That shows Menu items, Open Files and even Visual Studio Gallery Extensions. If you press Ctrl + Q again while the menu is open, it will cycle through the different sections of matched files. I like the idea of the quick launch, but I don't like how it actually ends up working. It doesn't really help me toggle quickly between files.

Search Solution Explorer

I find that a better solution is to use Ctrl + ; which focuses the input on the Solution Explorer. You can just start typing and it will live filter the files that match in the Solution Explorer. You can then arrow through the results and hit enter to bring up the desired file.

UPDATE: HOLD THE PHONE!

Thanks to Scott for pointing out that there is an extension for Visual Studio 2012 that does EXACTLY what Goto Anything in Sublime Text 2 does.  I literally gasped out loud when I saw this.

After you install, you can just hit Ctrl+ and then Ctrl, which brings up a search box.  You start typing and it filters the document in the background based on the current match. 



It even filters code methods along with pages.  It has several other filter options that you can invoke with keystrokes.  If you want to see JUST files, hit Ctrl + Alt + ].  Microsoft is realizing some really great stuff for Visual Studio in the form of extensions.  Lets look at another that I just love.

ZenCoding

Sublime Text 2 has a package that you can install called "Emmet". It used to be called "ZenCoding". It is awesome. You have probably seen it before as it's gotten a lot of hype in the last few months. The idea is that it instead of typing out HTML, which is redundant and tedious with all of the angle brackets, you can write "koans" instead. These koans expand out into HTML when you hit tab.

for instance, say you wanted an unordered list with 3 items. Each item should have an id that is auto-incremented.

ul>li#item$*3

When you press tab, Emmet will expand this to the HTML.

<ul>
  <li id="item1"></li>
  <li id="item2"></li>
  <li id="item3"></li>
</ul>

It's very powerful once you get the hang of it.

Fortunately, Visual Studio supports ZenCoding fully. You just need to install Web Essentials.

I Heart Web Essentials

In my humble opinion, this extension is what makes Visual Studio an enjoyable experience for web developers. Not only does it give you ZenCoding, but it also delivers CoffeeScript and LESS support along with TypeScript, JavaScript linting and much more. This extension is a powerhouse. What's more is that it works really great. I've used extensions in the past for Visual Studio to support things like CoffeeScript with really mixed results. This extension is built by Microsoft and it's rock solid.

ZenCoding Cheat Sheet

The biggest favor that you can do yourself as you get up and running with ZenCoding is to print out the cheatsheet and just tack it or tape it to the wall right next to your head so you can look over and get a reference point for composing koans. They can be a bit frustrating when you first start out, so a cheat sheet is a must have. I can nearly guarantee that after you use ZenCoding for a month, you won't need that cheat sheet anymore. There is also an excellent Smashing Magazine article on how to use it that provides interactive areas for you to try it out yourself.

Snippets

Another feature that I use a lot in Sublime Text 2 is snippets. These are files that define certain tab triggers and text replacements for a chunk of text. For instance, When I use Kendo UI Mobile, I end up writing a lot of markup. To keep me from having to manually generate so much HTML, I created a set of Kendo UI Mobile snippets for Sublime Text 2. Now if I want to create a mobile view, I simply type km-view and hit tab. If there is any text selected when I activate the snippet, it uses the text as the id of the view. It also does some regex matching to make the title the same as the ID but with the first letter capitalized. This is what the snippet looks like for Sublime Text 2:

<div data-role="view" id="${1:$SELECTION}" data-title="$2${1/\b([a-z])(\w+)\b/\u$1$2/g}"$3>$0</div>

You can do the exact same thing in Visual Studio. Unfortunately, it's not as straightforward as it maybe could be. Fortunately, a guy named Matthew Manela decided to fix this by creating a Visual Studio Snippet Designer extension. Once you install the extension, you can do File -> New -> File. Select the Snippet Designer at the bottom of installed templates and then Code Snippet.

This gives you a UI for composing Snippets. I use the jQuery CDN a lot, so I can create a snippet for that.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Then you just set the "shortcut" property to "jquery" and make sure that the "Language" dropdown is set to HTML. Now you can get the jQuery CDN in your page by just typing "jquery", and hitting tab.

JavaScript Linting

The dynamic nature of JavaScript makes it incredibly fun to use, but it can also make it maddening. Visual Studio historically hasn't provided a whole lot of help when it came to JavaScript. You essentially just started closing braces and you knew you had it right when Visual Studio fixed the indentation.

Sublime Text 2 on the other hand has great integration with JSHint via the Sublime Linter package. It lints all sorts of code, but I use it for JavaScript. It will tell you when you have unreachable blocks, global variables and other gremlins that won't bite you until runtime. Linting your code as you build it will decrease the amount of time you spend in your dev tools tracking the exact place where you used a "=" instead of a ":".

If you installed Web Essentials, you already have this functionality in Visual Studio. Warnings show up in the "Messages" tab of the "Error List" pane.

The defaults are super relaxed, so it's best to head directly over to Tools -> Options -> Web Essentials and turn on many of the checks. I did some cursory research, and it looks like the following settings are generally recommended:

• Declare Param Before Use - You can't use a variable that hasn't been defined yet
• Enforce Curly Braces - Forces you to put curly braces around loops, even if there is only one line inside
• Disallow unused variables - Spots unused code
• Disallow undefined variables - You can't reference a variable that has not at all been defined
• Require "strict mode" - You always use strict mode right?
• Disallow trailing whitespace - Won't let you have extra spaces around your code. It seems trivial, but it can be really ugly in strings if you don't catch it

Some Useful Keyboard Shortcuts

There are a few keyboard shortcuts that I use all the time and recommend committing these to memory.

There is also a great StackOverflow thread of people's favorite VS shortcuts that you should definately check out.

Sublime Studio

I think that loving your code editor is really the foundation of being productive. At the end of the day, it's all about creating a workflow that makes your life easier.  Now that I've added all of the functionality that I was missing from Sublime Text 2, and I've learned Visual Studio's essential keyboard shortcuts, I feel like my speed has increased by 10x. I'm calling it Sublime Studio since I tweaked it to my liking.

If you're using Visual Studio, make sure to download Kendo UI. You can get it in it's straight JavaScript form (now with TypeScript support!), or you can get MVC wrappers with strongly typed classes for all the widgets - which means intellisense AND even dynamic LINQ helpers for all your querying needs.  It's the perfect compliment to Visual Studio and your HTML5 web and mobile apps.

So tweak away. The only thing standing between you and the editor that you want is a few right-clicks, some keyboard shortcuts, and a few Visual Studio extensions. What will your Visual Studio look like?