Sublime Text packages for Front-end web development

My recommended list

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.

Package Control

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


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 #FFFFFF, rgb(255,255,255), white, etc.) with their real color. Also, plugin adds color picker to easily modify colors.

Case Conversion

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

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.

Soda Theme

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.

Base16 Color Schemes

My favourite Sublime colour schemes.


Sublime Plugin with sticky tabs, more tab closing options, and additional menu items.

For specific syntaxes

Syntax Highlighting for Sass

Syntax highlighting package for both SCSS and Sass on Sublime Text.

Sass Snippets

Sass Snippets for Sublime


This is an improved syntax package for Javascript. Language definitions for ES6+ JavaScript with React JSX syntax extensions.

JavaScript & NodeJS Snippets

To set it as the default syntax for a particular extension:

  1. Open a file with that extension
  2. Select View from the menu
  3. Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)
  4. Repeat this for each extension (e.g.: .js and .jsx).

Node Requirer

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.

JSCS Formatter

Plugin to autoformat your javascript code according to the JSCS configuration files you already have.

HTML Mustache

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.

For lolz


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.