Until last year I had a bit of a reputation for switching code editors every few weeks. I'd used Coda, Espresso, Chocolat and a couple of others. They were all good, but I was never satisfied… until I used Sublime.
For a while the developer folk at my old job hassled me to try Sublime, being a typical designer I'd always dismiss it as a complicated editor with a ugly icon... but actually, after using it for a while I found it to be the best app for codey goodness. And it turns out it really isn’t that complicated to get configured.
For those of you on the fence, or for those who are just brand new to the world of Sublime I’d thought I’d throw together a little setup / config guide.
This is where the magic happens. Package control lets you install useful customisations such as new themes and syntax highlighting options, it’s the first thing you’ll want to setup.
Once you’ve downloaded and installed Sublime open it and hit
ctrl ` (control + backtick), this will open the console, in here paste and run the code from this page.
Installing new packages
Once package control is installed we can access the package manager by hitting
⌘⇧p (command + shift + p).
In my opinion these are the essentials and the packages I use on a daily basis:
- SideBarEnhancements - The standard sidebar in Sublime is lacking a few key features, SideBarEnhancements fixes this problem
- TrailingSpaces - Strips trailing whitespace from files, keeps developers happy
- BracketHighlighter - Highlights opening / closing brackets
- Sass - Enables syntax highlighting for Sass
Install them by opening Package Control (
install package and hit enter, now you should be able to type the names of the packages and install them.
Now that we have a handful of packages installed we should probably configure Sublime with some sensible settings. Access your user settings with
⌘,. New settings should be added between the opening and closing brackets.
Convert tabs to spaces
Unless you want developers giving you the glare of doom I suggest you find out if they work with tabs or spaces, they'll have a pretty strong opinion on which to use. Every developer I've worked with has used spaces, to change Sublime to use spaces add:
"translate_tabs_to_spaces": true, "tab_size": 2
Bonus guide: Make it pretty
I dislike the default Sublime interface, but luckily you can pretty it up...
Spacegray is a nice, minimal UI. From package control (
⌘⇧p if you haven’t remembered it yet!) head to
install package and find
Theme - Spacegray and hit enter. Once it’s done installing add the following to your user config (
"theme": "Spacegray Eighties.sublime-theme"
Once you’ve installed and configured the theme restart Sublime.
There are lots of good replacement icons around, my favourite is this one by Sam Markiewicz on Dribbble.
To replace the icon right click the Sublime app in your
Applications/ folder and select
View Package Contents, then browse to
Contents/Resources/ and drag the new icon into this directory (overwriting the existing one).