« HE:labs

Sublime Text Pro Tips for Front-enders

Postado por Matheus Costa em 09/03/2015

So you think you code fast... We'll see it.

Sublime Text Protips

First of all

Before you start, make sure you have Package Control installed and if you haven't don't worry, it's pretty easy to install, just follow this link.

After installed you need to be familiarized with this command: CMD (or CTRL in case you are a Windows user) + Shift + P. With this you`ll be able to search and install all packages that I'll show here.

Now each headline means the name of the package. So when you hit the command above, press Enter and type one of the dotted headlines names.

● Color Highlighter

Hexadecimals are a lil' bit hard to memorize, so how about click and see what color is? That's exactly what Color Highlighter do.


This also works for pre-processors variables and note that the colors will be always underlined either.

● Sidebar Enhancements

The default sidebar actions of ST are kinda poor. You can't even move a file to another folder! To solve that, install this plugin and a lot of options will show up when you make a right click.


● Emmet

Emmet is a toolkit to improve HTML & CSS. In other words you can do almost anything in a half of time (and lines).


To create this default HTML5 strucutre I just type ! and hit tab. These itens inside the body I did h3+ul.menu>li*5>a which gave us a headline, an unordered list named menu with 5 list items and a link in each one.

● Emmet Css Snippets

This plugin is to boost up the previous one. A bunch of abbreviations that Emmet is missing you can find here (like pseudo properties for example).

Emmet Css Snippets

● Syntax Support

Sublime Text doesn't have all the syntaxes over the web. In my case I need to work with Ruby Slim and Sass so if you need to edit a file and the colors are not matching the colorscheme, probably it's because you have to install it.


Further than packages, Sublime has cool and useful shortcuts like sort lines alphabetically just selecting them and pressing F5.

Sort lines

Or maybe select and replace multiple lines... (CMD + D)

Multiple lines

You can also setup the preferences the way you want (like change a colorscheme, increase font size and do not open new files in a new window) just editing the menu preferences > settings - user.

User preferences

These are just a few things that Sublime Text can do for you. More information about packages and themes you can find in this link.


Sabia que nosso blog agora está no Medium? Confira Aqui!