Sublime Text 2 Workflow & Packages

With the new year beginning all of us at Digital Surgeons are seeking ways to increase our personal efficiency and productivity. Part of that is learning to take full advantage of the tools available to us. We thought it would be worth it to share killer features of a program near and dear to many of our developer’s hearts — Sublime Text 2. We’ve selected a sampling of the features we find to be the most helpful and unique to the editor. But before we spill the beans on usage tips, we’ll take a short detour showing how we configure ST2 and some of the options that are available to you.

Configure it, (J)SON!

Sublime Text 2 stores settings in a series of JSON formatted files that exist in pairs of “Default” and “User” versions. These are accessible from the Preferences menu (inside the application menu on OSX). The Default version is overwritten on program upgrade and serves as a well commented reference for customizing every available option. Your personal configuration lives in the User version of the file and will remain in place on upgrade. As a bonus, add-ons follow the same convention and can be found in Preferences > Package Settings.

The main editor configuration lies in “Settings”, and is where some of the more interesting program-wide settings are available. Here are some of the changes we like to make:

"auto_complete_commit_on_tab": true,
"default_line_ending": "unix",
"ensure_newline_at_eof_on_save": true,
"trim_trailing_white_space_on_save": true

This combination of settings enforces a Unix world view on our files. Since we are a LAMP shop and work mostly on *nix operating systems (Macs + Linux), these settings make sense for everything we do. In particular it allows us to use the tab key to trigger autocompletion much like bash or zsh would. It also enforces the line-ending and whitespace conventions of Unix, which help to keep things clean in our source files.

"highlight_line": true,
"highlight_modified_tabs": true

These settings help with scanning and visibility while working. The first adds background color to the line the cursor is on, which is useful to quickly locate it. Syntax highlighting color schemes affect how contrasting the background color is. The second, as you might have guessed, adds a marker to tabs to let us know unsaved changes have been made to a file.

"open_files_in_new_window": false

Specific to OSX, this prevents opening source files in Finder from opening a new Sublime Text 2 window instead of adding a tab to the current project.

What Does the Scouter Say About His Power Level?!

Make no mistake; The true power of Sublime Text 2 lies in it’s “fuzzy matching” and multiple cursors. If used judiciously, these features can account for a great deal of saved time and happier wrists. This alone is well worth the modest price of a license.

No-one Can Resist Fuzzy Matching. Except Klingons.

Fuzzy matching refers to the editor’s universal ability to guess what you mean from just a few key characters. It’s like autocomplete, except that you don’t have to spell things perfectly and can skip parts of the word/identifier. For example, if I want to switch the current file’s syntax highlighting to Bash, I would open up the command palette (Mac: Cmd-Shift-P, Linux/Windows: Ctrl-Shift-P) and invoke the command “Set Syntax: Shell Script (Bash)”. Typing any of “Syntax: Sh”, “syntax: sh”, “syntsh”, “setbash”, “stebash”, “stbsh”, or even just “bash” or “shell” will all bring that command to the top of the options, and simply hitting enter will select it and perform the action. That saves a lot of keystrokes, and prevents having to wade through the menu and get your hands away from your keyboard.

If that doesn’t seem terribly useful to you, consider when you are typing a variable name and mis-spell it. Say $darth_vader gets typed as $darthvader. Sublime Text 2 is smart enough that simply hitting tab at this point will correct it to match one of the identifiers it knows about. Or perhaps you have three similarly named variables like $hobbit, $hobbiton and $hbts, after typing just $hbt, you can cycle to the variant you want by hitting tab multiple times.

Even more helpful, autocompleting many built-in functions will automatically add the parentheses and move your cursor between them. This functionality is referred to as snippets and usually comes bundled with syntax highlighting packages. More advanced snippets go further and give you boilerplate code with the tab key moving you to the next logical editing area. Take for example the snippet for foreach in php:

Perhaps the most time saving variation of fuzzy matching is the ability to jump to any file, symbol, method or line via Goto > Goto Anything (Mac: Cmd-P, Linux/Windows: Ctrl-P). Type a few key words or letters of a file in the current project and instantly have that file in front of you, pressing enter to pin it to a tab. Goto Symbol (Mac: Cmd-R/Cmd-P, ‘@’ Linux/Windows: Ctrl-R/Ctrl-P, ‘@’) allows you to browse symbols in the file with fuzzy matching, letting you type things like “set” to jump to any of the set methods in a php file for example. Goto Line (Mac: Ctrl-G/Cmd-P, ‘:’ Linux/Windows: Ctrl-G/Ctrl-P, ‘:’) to jump to any line in the current file. That’s really useful when investigating an error message. A hidden option using ”#” in the Goto Anything prompt lets you jump to any word in a file. Combining two of these let’s you move even quicker. Say you need to go to the only get method in a file you remember having ProjectContent or Projcontent or some such in the name, you can type Cmd-P then “prjcont@get” enter and be brought straight to the declaration. Magic!

Coding Like a Sailor with Multiple Cursors

Multiple cursors is exactly what it sounds like, but I promise you it will bow your mind how useful it is and how dependent on it you will become. Let’s show an example of where it shines. Say you have the following code:

<ul>
	<li></li>
	<li><a href="http://example.com/" target="_blank">Link 1</a></li>
</ul>
<ul>
	<li></li>
	<li><a href="http://example.com/" target="_blank">Link 2</a></li>
</ul>
<ul>
	<li></li>
	<li><a href="http://example.com/" target="_blank">Link 3</a></li>
</ul>
<ul>
	<li></li>
	<li><a href="http://example.com/" target="_blank">Link 4</a></li>
</ul>
<ul>
	<li></li>
	<li><a href="http://example.com/" target="_blank">Link 5</a></li>
</ul>

Let’s say you need to do a few things. You want to change the single quotes to double quotes (’’ -> ””). You also want to change each hyperlink’s url to point to a numbered article, whose number matches the number in the hyperlink’s text for demonstration’s sake (http://example.com -> http://example.com/blog/article/<number>). We would start by placing our cursor immediately after the quotations of the first href attribute. Hold Shift and click and drag with the right mouse button (Mac: Option and click and drag with left mouse button) downward to immediately before the quotations of the last href. You will notice that you now have selected all of the urls and quotations in a vertical block!

Now go ahead and type a double quote. Sublime Text 2 will be helpful and place the selection inside the new quotations instead of replacing it. But our old single quotes are still there. Simply use your keyboard’s arrow keys and delete/backspace key to remove them the same way you would for one line. Now we can just arrow over to the end of the urls and type the rest of the url as we want it (/blog/article/) up to the number. To get the numbers we can arrow over to the hyperlink text that select those numbers, copy, then arrow back to the end of the urls and paste.

Voila! You’ve just done some identical work on multiple lines with minimal tedium. Without multiple cursors we might have chosen to delete four of the lines, make our modifications then duplicate the new line four times. After which we would have had to individually increment the numbers in both the urls and the link text. All that in addition to the work we just did!

More Control with Packages

Our next order of business is to install Package Control. Package Control is a package manager in the *nix style (like an “app store”, but in text mode and minus the purchases). Through it we install and manage upgrades for all of the other packages we use. Since it uses github as a backend, the packages are always fresh and the selection is well varied. We don’t use very many packages as the default functionality of ST2 is already very mature and capable, but there are a few essentials missing that every developer should have. Two of them expand the capabilities of fuzzy matching; These are Emmet (formerly known as ZenCoding) and Hayaku.

Expanding HTML with Emmet

Emmet allows us to use intuitive css-selector-like expressions to generate tedious boilerplate HTML. It’s hard to communicate just how awesome it is without experiencing it yourself. As an excersize, try opening an html file and pasting in the following:

#main.container>(h2+p>lorem20+ul>(li>a.blue[rel="alternate"]{Link $ - })*5)*2

Now press tab while your cursor is just after the final character and watch the magic unfold. If you haven’t, take a look at what the output looks like:

There’s a lot going on here, but it should all be very intuitive to anyone who has delved into front-end development. But wait, that’s not all! We can also highlight text, press Ctrl-W and get a text box at the bottom of our editor. Just type a selector expression and it will wrap the highlighted text with the appropriate markup! For more detail on all the possibilities, we recommend looking at the documentation.

Here is Hayaku. Type only letters needed. See it unfold fast.

Hayaku greatly expands autocomplete for CSS files, letting us type just a few key letters and tab complete them into full style rules. Being able to type “dn” and get “display: none;”, or type “h20” and get “height: 20px;” by tab-completing really saves a lot of key strokes. The best part is you don’t have to memorize any abbreviations, just take your best guess as to what the key characters are in the rule and hit tab. Hayaku will amaze you at how well it can guess what you meant.

If you looked further into the Emmet documentation, then at this point you might be wondering “Hey! Emmet is supposed to do some of the Hayaku stuff too, won’t they congflict?!”. Fortunately, if both are present, Hayaku will supercede Emmet’s CSS features in favor of it’s own, resulting in a happy developer.

Trapping Code Lint with SublimeLinter

Another must-have package is SublimeLinter, which applies code linting directly in the editor as you type for a multitude of web development languages including CSS, PHP, Ruby, Javascript, JSON, Perl and just about any language that either has a linter built in to its package or provided by another program. We do find however that CSSLint is too zealous and that SUblimeLinter’s default visual notification for errors was ugly, so we made the following modifications to Preferences > Package Settings > SublimeLinter > Settings – User:

"sublimelinter_mark_style": "none",
"sublimelinter_gutter_marks": true

By default SublimeLinter outlines the entire line if one or more errors is present. Using these settings, we replace the outline with a mark in the gutter immediately next to the line numbers, which is less intrusive but still visually informative. As a bonus we have a hint for the number/severity of errors on a line by the size of the mark in the gutter. The end result looks like this:

We tweak the csslint options to turn off many of the warnings mentioned in Matt Wilcox’s criticisms of CSSLint. We could turn it off entirely, but think that the remaining items (warnings to include the other vendor prefixes, fix outright errors etc.) are worth keeping around.

"csslint_options": {
    "adjoining-classes": false,
    "box-model": false,<
    "box-sizing": false,
    "compatible-vendor-prefixes": "warning",
    "display-property-grouping": true,
    "duplicate-background-images": false,
    "duplicate-properties": true,
    "empty-rules": true,
    "errors": true,
    "fallback-colors": "warning",
    "floats": false,
    "font-faces": false,
    "font-sizes": false,
    "gradients": "warning",
    "ids": false,
    "import": "warning",
    "important": "warning",
    "known-properties": true,
    "outline-none": false,
    "overqualified-elements": "warning",
    "qualified-headings": false,
    "regex-selectors": "warning",
    "rules-count": "warning",
    "shorthand": "warning",
    "star-property-hack": "warning",
    "text-indent": "warning",
    "underscore-property-hack": "warning",
    "unique-headings": false,
    "universal-selector": "warning",
    "vendor-prefix": true,
    "zero-units": "warning"
}

In addition to these, you can obtain syntax highlighting packages for just about any language out there, and certainly all of the commonly used languages in web development. You can also find additional color schemes (syntax highlighting coloration) and themes (skins for the program itself — Soda Theme is the most polished in our opinion) to suit your preferences.

That’s a Wrap!

Despite the intimidating length of this article, we’ve only managed to go through some of the features Sublime Text 2 offers. We didn’t discuss, for example, the vi editing mode (“Vintage mode”) that one of our developers swears by (and to be fair, nothing beats Vim for terminal editing). But for many of us multiple cursors and tab completion engines are the compelling reason to stick with this editor. What do you think? Did we miss any blow-you-away features or packages that you use in your workflow? Drop us a line in the comments.