It has been a long time since I have written about Sublime Text & the benefits it provides me as a front-end developer. Its packages are one of the main reasons I haven’t changed my text editor/IDE in over 3 years. I even created a wiki (of sorts) to help users get up and running with the app and choosing the right packages for a given task. This post will only focus on the packages that I believe most users should be using for front-end development.
[UPDATE - July 2015] Added & removed some packages. See the changes here.
Before you install any other packages, make sure you install Package Control first. It makes installing and keeping packages up-to-date really simple.
For writing code
Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow. Find out more at http://emmet.io
Interactive code linting framework for Sublime Text 3. Installation instructions can be found at here and each language needs its own plugin, see a list here. Linters that I find particularly useful are:
This package provides snippets for most of jQuery’s methods making the API even easier to use.
Increase / decrease numbers (integer and fractional), dates, hex color values, opposite relations or cycled enumerations on the configured value & a bonus - string actions (upper, lower, capitalize). See my extended settings here.
ColorHighlighter is a plugin for the Sublime text 2 and 3, which underlays selected hexadecimal colorcodes (like
white, etc.) with their real color. Also, plugin adds color picker to easily modify colors.
It converts the current word/token between pascal, camel, snake, dot, dash (hyphen) cases, and separated words.
Bracket and tag highlighter for Sublime Text
An alignment plugin using regular expression
A Sublime Text Plugin which enhances editing of multiple selections.
Select text and move it around using the keyboard, or setup a text ‘tunnel’ to move code from one location to another.
Helps developers maintain consistent coding styles between different editors. Find out more at editorconfig.com
For the user interface
Enhancements to Sublime Text sidebar. Files and folders.
Highlight lines changed since the last commit (supports Git, SVN, Bazaar, Mercurial and TFS).
Split the window however you like! Create new panes, delete panes, move and clone views from pane to pane.
Dark and light custom UI themes for Sublime Text. I use the dark version, it is my preferred UI theme. A list of other themes can be found here
A UI theme selector for Sublime Text.
Sublime Text Plugin to select theme quickly via the Quick Panel.
My favourite Sublime colour schemes.
Sublime Plugin with sticky tabs, more tab closing options, and additional menu items.
For specific syntaxes
Syntax highlighting package for both SCSS and Sass on Sublime Text.
Sass Snippets for Sublime
To set it as the default syntax for a particular extension:
- Open a file with that extension
- Select View from the menu
Open all with current extension as...->
- Repeat this for each extension (e.g.:
This plugin allows you to easily require node modules without having to worry about relative paths. It parses your project to allow you to require any local module or dependency listed in your package.json. In addition, it allows you to include node core modules.
Adds HTML Mustache as a language to Sublime, with snippets. Syntax file obtained from mwunsch’s sublime repo. Supports .mustache, .hjs, and .hgn (Hogan) files.
Liquid Templates in Sublime. Useful if you develop Jekyll sites.
For general help
Plugin for Sublime Text to help identify conflicting key mappings.
This adds sound effects to many actions in Sublime. Could be a good prank to install it on a fellow developer’s machine.
Want to change some settings?
Sublime’s default setup is great but almost every part of it can be modified to your taste. Please have a look at my own settings and preferences to see what is possible.