Sublime Text packages for Front-end web development

My recommended list

article

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

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

SublimeLinter

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:

jQuery

This package provides snippets for most of jQuery’s methods making the API even easier to use.

Inc-Dec-Value

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

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.

BracketHighlighter

Bracket and tag highlighter for Sublime Text

AlignTab

An alignment plugin using regular expression

MultiEditUtils

A Sublime Text Plugin which enhances editing of multiple selections.

MoveText

Select text and move it around using the keyboard, or setup a text ‘tunnel’ to move code from one location to another.

EditorConfig

Helps developers maintain consistent coding styles between different editors. Find out more at editorconfig.com

For the user interface

SideBarEnhancements

Enhancements to Sublime Text sidebar. Files and folders.

Modific

Highlight lines changed since the last commit (supports Git, SVN, Bazaar, Mercurial and TFS).

Origami

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

Themr

A UI theme selector for Sublime Text.

ColorSchemeSelector

Sublime Text Plugin to select theme quickly via the Quick Panel.

Base16 Color Schemes

My favourite Sublime colour schemes.

TabsExtra

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

Babel

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

Liquid Templates in Sublime. Useful if you develop Jekyll sites.

For general help

FindKeyConflicts

Plugin for Sublime Text to help identify conflicting key mappings.

For lolz

Sound

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.