Anthony Short

Designer and Front-End Developer

Setting up Sublime Text 2 for Front-End Development

A few weeks ago I decided to give Sublime Text 2 a try. I have a habit of switching text editors fairly frequently. Seeing as we sit staring at our text editors for the majority of the day I find it refreshing to switch editors every couple of months. I've heard good things about Sublime Text 2. I spent some time setting it up this week just the way I like it. It has a lot of settings and options that can be a bit overwhelming.

Most of my days are filled with front-end development - SCSS and Javascript - so I've tried to find addons for Sublime that would make my job easier.

Soda Theme

If you're a designer like me, the horrid UI will set you off Sublime instantly. There is a solution though. The first add-on you'll want to get is Soda theme by Ian Hill. This improves the UI and makes it much more Apple-like. As a bonus there are a couple of nice syntax themes that Ian has included with the project.

Package Manager

If you've used Textmate or Espresso you'll know about bundles (or 'sugars' for Espresso). There was never an easy way to install bundles from the app itself or a central repository for to find the bundles. Sublime has a brilliant package manager that you can install that makes finding and installing bundles a breeze.

Just open up the console in Sublime by press control + ` and paste this in:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Now you can install packages by pressing command + shift + p to bring up the command palette. Type 'install' and choose 'Package Control: Install Package'. It will bring up list a available packages you can install. Alternatively, if you don't know what you want you can browse the packages online.

I found a few packages that are definitely worth looking at for front-end development. Remember you can install all of these directly from the package manager inside of Sublime:

There are a few others that add language-specific support, but I'm sure you'll be able to find them. There are a many, many more packages but these are the ones I've found most useful.

Taking it further

These are just some of the addons I've found to make Sublime more awesome. I'm still learning all of the shortcut keys but I'm really impressed with the application overall. It's the little things that are making it a joy to use. It takes a bit of getting used to and it's definitely not as pretty as Espresso but the language support is much better. Hopefully Espresso gets more language support and I can switch back. Unfortunately what makes a text editor popular are the bundles available for it and bundles can really only become abundant when an application is popular.

It's been nice switching to a new editor. Maybe something new will come around in the next few months (like Chocolat) that can make work just a little bit more interesting again.