Sublime Text Packages for Front-End Development

Sublime Text is my favourite code editor, and packages are a large part of why it works so well for front-end development. This is the collection I used regularly for syntax support, editing, and the small repetitive jobs an editor should handle for you.

Install Package Control first. You can open the Sublime Text console with Ctrl+` or through View → Show Console, then follow the installation instructions for your Sublime Text version.

Languages and syntax

• CSS3 adds broader CSS support.
• SCSS adds SCSS syntax support.
• JavaScriptNext — ES6 Syntax adds an ES6 JavaScript language definition.
• Stylus, LESS, and Liquid add support for those languages and templates.
• jQuery, AngularJS, and nginx add syntax or completion support for those tools.

Editing and navigation

• SideBarEnhancements adds useful file and folder actions to the sidebar.
• Alignment and AlignTab align selections, with AlignTab supporting regular expressions.
• BracketHighlighter makes matching brackets and tags easier to see.
• Emmet expands abbreviations into HTML and CSS.
• Clipboard History keeps earlier clipboard entries available.
• MultiEditUtils extends Sublime Text’s multiple-selection tools.
• Modific marks lines changed since the last version-control commit.

Checks, formatting, and small helpers

• SublimeLinter provides a common framework for language-specific linters.
• HTML Prettify formats HTML, CSS, JavaScript, and JSON through Node.js.
• Sublime Minifier minifies CSS and JavaScript.
• ColorPicker provides a colour picker inside the editor.
• Color Highlighter displays colours behind values such as #fff and rgb(255, 255, 255).
• Base16 Color Schemes adds the Base16 colour-scheme collection.

Snippets and project tools

• Sass Snippets, Bootstrap 3 Snippets, jQuery Snippets, and Rails Snippets reduce repetitive typing in those stacks.
• Vagrant exposes Vagrant commands inside Sublime Text.

I would not install every package at once. Start with syntax support, Emmet, a linter, and one or two helpers that fix annoyances you actually have. An editor full of unused packages is just another project to maintain.

← Back to all articles