The following is a guest post by Wes Bos. Wes has been writing about Sublime Text and all the great stuff it brings to code editing for a while now. He has a new book and video package out now: Sublime Text Power User. I met him at a conference recently and saw his talk on Sublime Text. The conference was buzzing about it. Newbie’s jaws were dropped and old pro’s learned new tricks. Here, Wes is going to share some of best stuff as it relates to front enders like us.
With Sublime Text being one of today’s hottest editors for web development, it’s important to know the ins and outs of the editor as it relates to front end development. Rather than being a step by step guide on Sublime Text, this post is filled with hot tips, tricks and packages that will make you amazing with Sublime Text.
Syntax Highlighters
It’s almost 2015 and a ton has changed in the last few years – CSS has exploded with new features, JavaScript has introduced new functionality and syntax and we have a handful of new languages that compile into HTML, CSS or JavaScript. The syntax highlighters that come with Sublime are old, and even unavailable for some languages.
The following packages will allow for the best possible syntax highlighting. Even if you already have syntax highlighters for all of your languages – give this a read as you may wish to change a few of them.
The JavaScript Next syntax highlighter provides better code highlighting than the default JavaScript highlighter as well as support for ECMAScript 6 features such as modules, succinct methods, arrow functions, classes, generators, and accessors (ES5).
CSS3 provides highlighting for every CSS3 feature in the spec. That is everything new as well as things that are yet to be implemented. This should totally replace any existing CSS syntax highlighting that you have.
Sass users should install the SCSS package. Heads up – it’s a common mistake to search and install the Sass when you really aren’t writing the Sass syntax, but the Scss syntax – make sure you have the right one enabled so that all other packages, like Emmet, continue to work properly.

Of course there are are also Stylus and LESS packages available if they are your CSS weapon of choice.
Write Coffeescript? Make sure you have the Better-Coffeescript package installed. It’s important to grab the better-coffeescript package as the regular CoffeeScript package is no longer maintained. There is also a Typescript Package those in that camp.
The Haml package extends the default Haml package to include nested languages such as JS, CSS, Sass, etc, so you can maintain both your highlighting and snippets. The Slim and Jade packages provide much needed highlighting to these newish markup languages.
Packages and Plugins
Sublime owes much of its popularity to the endless supply of interesting and helpful packages that the community has created. If you are new to Sublime, you can add and manage your packages with Package Control.
While we could sit around all day and talk about the best Sublime Packages, and I hope you do in the comments, these are a handful of must-have packages for a front end developer working with HTML, CSS and JavaScript.
Color Highlighter
When working with colors in a stylesheet – it’s helpful to have some sort of visual aid showing you the actual color. Color Highlighter will scan your stylesheet and color your color name, hex code or RGBA by filling in the background with that color. There are options to underline with the color or display it as a circle in the gutter.

Recently, support for Sass, LESS, and Stylus variables have been added, which makes this tool ready for almost any workflow!
Emmet
Almost everyone already knows about Emmet and many have been using it since the Zen Coding days. However, I’ve found many developers are missing out on some of the powerful features of Emmet.
HTML
Emmet is great for writing HTML very quickly. Simply type the CSS selector for the markup you wish to have and hit tab. Use Jade, Slim or Haml? Emmet works with those markup languages too!

This can be as simple or as complicated as you want. Here are a few examples — be sure to check out the cheat sheet for all the possible ways to use Emmet with HTML.
- `element` + `tab` creates that element and puts your cursor inside:
- `span` + `tab` →
<span></span>
- `p` + `tab` →
<p></p>
- `span` + `tab` →
- `element.className` or `element#ID` + `tab` creates that element with the associated class(es) or ID
- `span.hello` + `tab` →
<span class="hello"></span>
- `p.odd.warning` + `tab` →
<p class="odd warning"></p>
- `div#contact` + `tab` →
<div id="contact"></div>
- `span.hello` + `tab` →
- `element>childElement` + `tab` creates nested elements
- `ul>li` + `tab` →
<ul><li></li></ul>
- `p>span` + `tab` →
<p><span></span></p>
- `ul>li` + `tab` →
- `[element*5]` + `tab` creates that element times the number
- `p.hello*2` + `tab` →
<p class="hello"></p><p class="hello"></p>
- `p.hello*2` + `tab` →
You can also use the $
as a placeholder for the increment. Use $$
for a leading zero.
`li.item$*3` + `tab` →
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
Square brackets for attributes and curly braces for an elements text.
`figure*2>img[src=”dog$.jpg”]+figcaption{This is dog $}` →
<figure>
<img src="dog1.jpg" alt="">
<figcaption>This is dog 1</figcaption>
</figure>
<figure>
<img src="dog2.jpg" alt="">
<figcaption>This is dog 2</figcaption>
</figure>
CSS
Learning Emmet for CSS is one the the better investments an front end developer can make. Not only does it speed you up, but it cuts down on the silly mistakes we all make.
Emmet for CSS works by typing the approximate CSS property/value that you want. There are no snippets, Emmet works on something called fuzzy matching which takes a best guess based on what you have inputted.
posrel
→position: relative;
posab
→position: absolute;
fl
→float:
fr
→float: right;
db
→display: block;
dib
→display: inline-block;
tdn
→text-decoration: none;
c
→color: #
w
→width:
w100
→width: 100px;
w100p
→width: 100%;
p
→padding:
p10
→padding: 10px;
p10p
→padding: 10%;
bt1-s-red
→border-top: 1px solid red;
You get the point – it’s worth taking the time to re-train your brain to use these fuzzy matches rather than typing the entire property and value out.
Sublime Linter
Linting your code is an important step in the process. If you have never used a linter before, it’s a code quality tool that checks for errors and bad practices, alerting you when you make them.
With Sublime Linter you can easily get real-time linting feedback for virtually any language. As front end developers, we should be linting our JavaScript and possibly our CSS. If you make a mistake, Sublime Linter will stick a flag in the gutter alerting you to the error.

Themes and Color Schemes
Still using the default Sublime theme and color scheme? It might be time to check out a few different ones. There are two parts to changing the color of Sublime — a color scheme changes the color of your code syntax highlighting while a theme changes the color of the editor chrome such as the tabs, sidebar and command palette.
As of the latest build of Sublime Text 3, we now have the ability to put specific icons in the sidebar.
Whether you like light or dark, there is bound to be a theme that you like. Here are a few popular ones:
Solarized Dark
Solarized is a fantastic theme that offers a light counterpart as well. It’s available in almost every editor and has become a beloved standard by many top developers.

Cobalt2
This is my own theme that has been a tweaked and refined over the last 5 years. It’s based on the original Cobalt theme and has many improvements with an emphasis on being easy on the eyes with crisp and clear contrast.

Seti UI
A new theme on the scene, this is a very dark theme that offers chunky blue pops of color throughout.

GoTo anything
If you are coming from another editor such as Coda, Textmate or Dreamweaver, you probably rely on the sidebar to navigate around your files. Sublime introduced the concept of GoTo anything. At its simplest you can use it to open any file in your open folder or project. Just hit ⌘
(Ctrl
on Windows) + p
and it will open a list where you can start to type the name of your file. This dropdown supports fuzzy matching so you don’t have to worry about spelling it exactly right, or even specifying which folder it is in.
Once comfortable with that, GoTo anything support line numbers of files jquery.js:205
, column numbers jquery.js:205:15
as well as something called symbols jquery.js@ajax
which allow you to quickly jump to functions, methods or selectors.

What’s your favorite?
Sublime Text is just packed full of handy features and packages. Enough to fill a book!

What are your favorite tips, tricks or packages?
Awesome Wes. I love the color package!
A while back, I published my preferences file if anyone is interested.
Thanks! Here is my preferences file is anyone is interested – http://wes.io/YfBS
Really nice post, thank you very much!
Here is an awesome dark theme for Sublime Text I’ve been using for a while:
https://github.com/Samuelsson/YeahLikeDark
Great syntax highlighter and colors. Here’s a screenshot aswell:

Great article. Been using Sublime for a while and still coming across nice new packages.
How did you get those icons for file types in the sidebar?
SublimeText 3 (still in beta) supports sidebar icons by default.
The most recent Beta of Sublime Text support them – then you need to find a “theme” that has custom icons – two of them in this post support the icons.
Your theme must also have it enabled though, Soda does now. Not sure about others.
My favorite trick is not to play too much with Sublime Text. A theme can crash randomly even when you have made no changes.
That sounds more like a bug in Sublime, rather than the ‘theme’ crashing.
The themes are just a collection of images and hex colors for most of them.
I love the Predawn Theme for a clean/flat/dark UI
Thank you for this, it’s a gorgeous theme.
I wrote a couple of post about it. I think you will like it, the posts and the site design. Sure!
My Sublime Text front-end plugins:
http://hoyheaprendido.es/plugins-para-sublime-text/
(In spanish)
We’ve been maintaining and using this plugin a ton at Behance: https://github.com/mrjoelkemp/sublime-dependents.
It allows developers to more easily traverse their codebases and understand the impact of their JS and Sass changes by easily seeing all of the affected files.
I installed the CSS3 package (https://github.com/y0ssar1an/CSS3/), and the message that its author has written stated that Emmet should be removed, as its CSS shortcuts is “often quite outdated, and it’s completions completely drown out the completions in this plugin.”
That might be a bitter pill to swallow for some developers who rely heavily on Emmet.
Yeah if you se Emmet you have to go all in – you can’t use another CSS auto-complete plugin. As far as it being outdated – I don’t find that to be true at all.
Wes,
Thank you for your input on this. I’m not a heavy Emmet user, but I have met developers who “swear by it.” Good to know that Emmet’s CSS is not as outdated as the CSS3 package author claims.
Hi,
Do you know what is the shortcut to wrap div in another div in Sublime Text 3?
From:
To:
Ohh, finally I found it.
CTRL+W (MacOS using Emmet).
Note that you need to have Emmet installed and enabled for Chris Coyier’s suggestion to work.
As you’re denoting possession, you’re missing the apostrophe from “element’s”
You’re missing a period at the end of your sentence.
So are many of the other comments here. Why don’t you go and troll them as well?
One plugin that I’ve been using for a couple of months now and that I found really useful is STProjectMaker: https://github.com/bit101/STProjectMaker
“A Sublime Text 2/3 plugin to allow creating any kind of project from your own custom templates”
Another great add on Package is GitGutter – https://github.com/jisaacks/GitGutter/
Just Checkout “Theme – Flatgrammer” too.
https://github.com/artifactdev/flatgrammer-theme
Sublime colt is very awesome – realtime javascript integration with browser: http://blog.codeorchestra.com/post/68973544159/sublime-colt-add-100-intellect-to-your.
Video: https://www.youtube.com/watch?v=qkscS1aI2JI
I’ve installed the CSS3 package. I’ve installed the SCSS package.
If I’m in an
.scss
file how do I get all of the CSS3 package’s auto completions to work? If I change the syntax to CSS3 then of course all the highlighting for the sass stuff goes away.This sounds simple in my mind, but how do you merge the CSS3 package with the SCSS package.
This is exactly what I need to know. Did you ever figure it out?
Colbalt2, indeed. I installed it for the mere icons only, lol. But the square and highighted tabs are awesome too. For color scheme I use Monokai Bright that comes with ST.
The one line in my preferences that’s killer is this one:
"trim_trailing_white_space_on_save": true
» It deletes any spaces at the end of your lines. INCREDIBLY helpful because it keeps my code/markup neat :)Thanks for an awesome article.
Just curious:
Does anyone know what the package PyV8 is for and what does it do? It comes preinstalled in ST.
Pretty sure it’s the pyv8 binaries – used by Emmet.
It is PyV8 binaries. It is required for Emmet to function, and sometimes it breaks. If Emmet stops working remove both and start again.
It seems weird that the author recommends the CSS3 plugins and Emmet, but when U install the CSS3 U got the message that they won’t work together.
Check out Git Gutter. It places symbols in the gutter for the lines you’ve changed, added, and removed since your last commit to the repo.
I cant use sublime text in office just becouse he doesn`t have good FTP support, so I use eclipse PDT
I do not know about PC or other FTP software but Transmit on Mac works nicely with Sublime Text. Just double click on the file in Transmit, it opens up in ST for editing, make changes and hit Cmd+S. The updated file gets automatically uploaded to the server.
http://d.pr/i/1itJP
Sublime SFTP brother: http://wbond.net/sublime_packages/sftp
I don’t find the sFTP when I search for it in the List Packages.
Or https://sublime.wbond.net/packages/FTPSync No SFTP support (only FTP), but it’s free
@Sridhar, you’re right, it’s not coming up via Package Control. Contact the author: [email protected]
On a side note, weirdly my Package Control somehow wasn’t installed anymore, so I had to install it again. Not sure if others had run into this same issue.
sFTP package is now available.
Why not use the MIT licensed GitHub Atom which offers most of these – if not all – packages as well?
Because the stability of a JavaScript driven coding environment is still not as stable as a native application, just like the native app vs. a wrapped web-app performance. Not only that, why would you use something else if it does exactly the same? If you’re used to one thing, there’s no point reinventing the wheel on yourself. If you mean as alternative to price differences, well, obviously Atom is open source whereas ST3 isn’t and that might put you off ST3. Though, it’s not about the tools, it’s the person who uses them! ;)
I would highly recommend Git and GitGutter packages for Sublime Text. The first allows you to do most git-related actions without having to leave the editor through the go-to-anything menu (adding, committing, pushing, diffing, viewing status etc etc), the second shows you the git diff from the current HEAD in the gutter, so you always know what you added/changed/removed.
Nice article, didn’t knew about the color highlighter package :)
Unfortunately I can’t get the colored circle to be displayed in the gutter. Does anyone know why this is? The ColorHighlighter settings seem to be right (
"icons": true
) so probaly it is some (ST3) setting which isn’t set correctly.The circles use something called ImageMagick – I wrote a post on how to get it running. This post uses another package, but the process for imagemagick is the same. http://wesbos.com/css-gutter-color-sublime-text/
As the (admittedly negligent) maintainer of the Sass ST2/3 package, I would love to implement full support for SCSS, along with a host of other improvements. (It’ll probably require a full refactor, plus lots of testing). The current package has been in lockdown mode as one of the last pull requests I merged in broke things pretty badly, and I couldn’t risk that happening again.
If you’re interested or able to help, please hit me up on GitHub.
Great Article Chris.
My favorite color scheme package is “Dayle Rees Color Schemes” – Comes with a ton of different schemes for you to try out.
Also, the SFTP Plugin by Will Bond (same guy that makes package control) saves me thousands of clicks and uploads a day, my productivity skyrockets.
I couldn’t get Color Highlighter to work on variables (outside the variables partial). I wonder what I am missing.
Well, I might not be missing anything. Looks like the variable has to be declared or imported to the same file for it to work if I am reading this correctly: https://github.com/Monnoroch/ColorHighlighter/issues/154
Nice article! Emmet is definitely one of the first packages I install when setting up a new Sublime Text install. I’ll also have to give Sublime Linter a shot.
A couple of packages that I use additionally are:
GitGutter – which gives you nice gutter icons to let you know whether you’ve made changes to a file. This keeps me in the text-editor instead of checking
git diff
in Terminal to see if any changes have been made.SidebarEnhancements – gives you a bunch of additional file and folder operations such as new file, duplicate file, open with finder, etc for your sidebar.
I’ve tried using sublime over the past few years and could never quite get my workflow dialed into it. I always felt like I had to tweak and hack every feature I wanted to sort of get the functionality I wanted. It just never seems very solid though. I felt like the community plugins were so disjointed and inconsistent in their implementations.
I don’t mean to totally knock Sublime. I do appreciate how fast it is and I think it looks really nice. And if it works great for you, then awesome!
I’m currently using phpstorm and would highly recommend it to anyone looking to check out a different editor. Like Sublime, it has tons of plugins that fill practically every need I’ve ever had in the app, but they integrate into the app a lot tighter. Jet Brains makes most of the core plugins as well so they are very solid and just work. In general it just does a lot of super smart things with code, the debugger is awesome and using git couldn’t be easier.
http://editorconfig.org/ is a great addition as well, especially for collaboration.
Is there any documentation on creating ST2/3 themes yet? I was searching about a month ago and came up empty handed. Cobalt2 definitely looks pretty nice though.
Definitely need EditorConfig in this! My config is super simple but does a great deal of work!
Hey all, I’ve bought Sublime Text 3, used it in the past.
* It’s a great product.
* It’s very fast
* It’s perfect for people moving from VI or VIM
However, in my case, it was less useful than what I was already using. There are some file types that I still like to use Sublime Text for, as it can handle some files well; eg. Template files.
I have stuck with Jet Brains: phpStorm. They also have WebStorm.
* helps debug from IDE
* jump to functions
* search for a file or class
* code inspection, so you know if a typo exists before running code
* sass, less, git, …
* plenty of plugins
I still cannot find a better IDE, the only other one that is similar is NetBeans & Eclipse however they are bloated and too slow for my liking… so I just pay for phpStorm.
Hope that helps you all. I know how time draining it can be to look for a good IDE. Cheerioooo
ST development seemed to taper off.
It’s all about Brackets now. I hate Adobe and I loooooveeee this editor. Highly recommend. Or vim. Always vim.
Here’s a great resource for learning Sublime Text.
http://code.tutsplus.com/articles/perfect-workflow-in-sublime-text-free-course–net-27293
nice site
I’m using Coda 2, but Sublime seems to be more intuitive. But Coda has ftp built in, which ftp your file as you save it.
Any OSX standalone FTP tool that can serve me with the same thing? Upload as I save a file in Sumblime?
Enjoy your coding day!
Try Transmit. Also from Panic, as is Coda.
It’s simply the best FTP client for the Mac.
For SCSS highlighting, I’ve long been using this package rather than the SCSS one you mention. The author has done a lot of work supporting the most recent syntax more thoroughly and coverage is much better. From the same author there is also a javascript highlighting package comparable to Javascript Next https://github.com/P233/Syntax-highlighting-for-Sass
Great Article! And still a lot to talk about! Sublime is still the bet light-weight editor. I was using Cobalt theme until I came across Cobalt2 by wesbos, I liked it.
Really nice post, thank you very much!
I’m currently obsessed with the SpaceGray theme. It’s utterly clean and easy on the eyes.
@Evan Jacobs – I am using thet theme too. Simple and beatiful.
I am using Enmet LiveStyle Sublime Plugin + LiveStyle Chrome plugin.
It is ** revolutionizong** front-end development!
1) CSS changes immideatly reflects on site(even without saving document)
2) Changes, made in broswer dev tools immideatly get back in you css file!
Now, I can’t imagine front-end development without it)
It is now in beta-stage and free. In future it will be paid plugin. Definitly will buy it.
Unfortunately, it is not that stable at the moment – sometimes it stops working randomly
Higly recommend it. :)
Nned, check my comment https://css-tricks.com/sublime-text-front-end-developers/#comment-1586932. Colt can do that in different browser + way more. That is a revolution for Sublime. I have no idea why developers ignore it.
Codelobster works better for me.
Nice post about emmet, some things I did not know about it.
I’m personally using ITG theme for it’s eye relax feeling. Some of plugins worth mention – Favorite files and if you’re working on Bootstrap/Foundation Framework there’re some snippets so you can make components with just few clicks.
Really fantastic !
I went from trying out Sublime Text to it being the only code editor I use now. I used a few others before (Coda, NP++, vim, eMacs) and nothing comes close to Sublime Text for me personally.
Some customization I like to do is set my font to Consolas and at around 11pts along with adding line padding and margin in the user settings.
hi,
Thanks For your Description, Do You Know how Sublime supports to Persian and Unicode UTF-8?