I’ve been supercharging my development workflow in the last couple of days, and quite a few of you have asked me on Twitter to write a summary on my choices. Most of it centers around the excellent Sublime Text 2 text editor. Sublime is highly extensible through a Python-based plugin API, and by itself is pretty lighweight, cross-platform and fast. Grabbed it? Ready for some tuning? Here we go.

Package control

First do yourself a favor and install the excellent Package control plugin by Will Bond. Package control is an unofficial centralized package manager for Sublime that allows for easy installation of plugins. Almost all popular Sublime plugins today support it, and while you technically can skip this and put the plugins into their respective folders manually, this makes your life so much simpler.

The best of the best

Nettuts has an excellent writeup of their favorite Sublime plugins over at http://net.tutsplus.com/tutorials/tools-and-tips/essential-sublime-text-2-plugins-and-extensions/. The ones that I find stand out and are particularily helpful are the following:

SublimeLinter

SublimeLinter “lints” (spell-check for programming languages, basically) while you write them. For JavaScript, it comes with jshint and jslint preinstalled (make sure you have node.js installed, or both won’t work), and for CSS, they’ve got CSSLint. Visually, you’ll see borders around certain portions of your code, and when you click them, it shows the warning in the status bar.

By default, SublimeLinter lints your code live while you type. While this feature is arguably useful, it consumes lot of CPU cycles, and made my editor on my slow Macbook Air noticably slower, so I recommend customization. Here is how:

  1. Go to “Preferences -> Package Settings -> Sublime Linter” and copy the contents of “Settings – default” to “Settings – user”.
  2. Change the “sublimelinter” setting to “load-save”
  3. Optional: Look for “jshint_options” and “csslint_options” and change your preferences

Now the linting will only be enabled when you save and load files, which, in my case, is more than enough.

Sublime Prefixr

This nifty plugin (by the same author who wrote the Package control) makes Prefixr available right in your editor. After installation, you will never have to write cross-browser prefixed CSS again. Take the following CSS:

div {
    transform: rotate(90deg);
}

Now select it in Sublime, then press “control+cmd+x”. The status bar showsa little progress bar indicating that prefixr runs, and then your selection transforms into this:

div {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Pretty neat, huh?

Sublime CodeIntel

This one almost transforms Sublime into an IDE. After installation, you got smart autocompletion (yes – this guy knows the jQuery API!) in JavaScript, jumping to symbol definitions and documention of known function through the status bar. One downside: per default, it uses alt+click to display info about a function, so it breaks column selections. I encourage you to modify the default key and change it to alt+rightclick.

ZenCoding

ZenCoding is an amazingly speedy way to write HTML. You basically write out CSS selectors instead of markup, then hit the tab key, and it will expand the selector into actual markup. Installation is painless, again via package control.

jsFormat

Well, duh. Makes your JavaScript nice and pretty :)

ColorPicker

Not on Nettuts’ list, this one can be found via package control and provides you with a simple color picker than spits out hex colors. Super useful. Activate via “cmd+shift+c” (or through the “Edit” menu).

Live Reload 2

This is not related to Sublime, but worth mentioning as it was part of the tools I installed over the last few days and definitely kicks ass. Live Reload reloads your website automatically if it detects changes to it. It’s pretty damn nifty. It’s so nifty that it detects style changes and then only reloads the stylesheet.

I also found the setup almost too easy – you install the program and the browser extension, then drag the folder of the site you want to watch into the program. That’s it. I was absolutely convinced it wouldn’t be able to detect my customized apache crap, but locating to the folder on my localhost, and then changing something in my text editor reloaded the page. I don’t say this easily, but this this just works. Very much worth the 10 bucks.

Until next time, and let me know if you have additional suggestions!