HTML Prototyping in Sublime Text 3

These days, to better serve our engineering team, I’m doing more HTML prototyping than actual coding, so I thought I’d adopt a code editor more lightweight than RubyMine. (Generally, I’m very pleased with JetBrains products, but, as Java applications, they are resource beasts!)

As a designer, I’m naturally concerned with both the visual elegance of my editor as well as its efficiency.

So when I reintroduced myself to Sublime Text 3 this week, I thought I’d keep better track of the customizations I’ve made.

Custom icon

Sublime Text’s application icon is dated. I use this one by Rafael Conde. Much sleeker.

Theme

This is an important choice. Hardcore developers go for dark themes, so as a designer, I must choose a light theme instead: in particular, Ayu Light. It looks great in their suggested font, Roboto Mono – download and install it first.

You’ll need to add these preferences:

{
  "theme": "ayu-light.sublime-theme",
  "color_scheme": "Packages/ayu/ayu-light.tmTheme",
  "font_face": "Roboto Mono"
}

Autosave

Nothing slows down one’s CSS tweaking like hitting Command-S with every change. Having gotten used to JetBrain’s autosave-on-lost-focus, I was delighted to see Sublime Text has the same option. Add this preference:

{ "save_on_focus_lost": true }

File system power

Sublime’s Side Bar is the poor man’s “project” view. Make it powerful with SideBarEnhancements. Now you can duplicate files, open files in a browser, reveal files in the Finder, etc.

HTML editing FTW

As far as productivity is concerned, we have a couple plugins to install.

Occasional Ruby & ERB work

First, open an ERB file and make sure you see “HTML (Rails)” file type in the lower right corner of your screen. If it just says “HTML” and the ERB syntax isn’t properly colored, click HTML and select Open all with extension as... > Rails > HTML (Rails) from the menu.

I like BeautifyRuby for formatting. It requires the htmlbeautifier gem, which I installed, eventually, like so:

$ cd ~
$ which ruby
/Users/jonathan/.rvm/rubies/ruby-2.3.3/bin/ruby
$ rvm use 2.3.3@global
Using /Users/jonathan/.rvm/gems/ruby-2.3.3 with gemset global
$ gem install htmlbeautifier

Then, install BeautifyRuby and configure to your preference. Use Cmd-Ctrl-K to reformat the current file.

I also value the ability to Command-Click to symbol definitions, like I do in RubyMine, rather than use Ctrl-R, Sublime’s default. Per this gist, create the file ~/Library/Application Support/Sublime Text 3/Packages/User/Default (OSX).sublime-mousemap and put this in it:

[
    {
        "button": "button1",
        "count": 1,
        "modifiers": ["super"],
        "press_command": "drag_select",
        "command": "goto_definition"
    }
]

Happy prototyping!