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
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:
- Open a file with that extension
- Select View from the menu
- Then
Syntax->Open all with current extension as...->Babel->JavaScript (Babel) - Repeat this for each extension (e.g.:
.jsand.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.