My Favorite Sublime Text Packages

Sublime Text is the most powerful text editor for anyone who works in web development, design, and programming. It may seem daunting to use at first with its non-standard interface and learning curve, but it is very easy to create a powerful setup that is customized for each individual's own workflow and capabilities.

The Basics

Command Palette

commandpalette

The first command to learn is cmd+shift+p for the command palette. Almost any function needed is accessible here by typing the first few letters of what you want to do. It is similar to Alfred or Quicksilver but only used inside Sublime Text.

File Palette

filepalette

The second thing to learn is to open your whole project folder in Sublime Text. I drag my project folder onto the application icon and all my files are accesible with a similar command palette interface by pressing cmd+p. This is great for working with numerous code snippets and dependencies.

Multiple Selections

Many users swear by the multiple selection capabilities to save time when editing repeating text strings. You can select text and then hit keyboard commands to extend your selection and type in multiple places at once. (cmd+d selects the next occurence of your selection, cmd+ctrl+g selects every occurence)

Code Indentation

code-indentation

Sublime Text has pretty sophisticated handling of white space. It tries to line up opening and closing tags with the correct number of tabs and the "Reindent Lines" tool in the command palette is a life-saver when trying to figure out where a missing or deleted closing tag should be.

Text-based Preferences

Although not very pretty, Sublime Text preferences are managed through text files that are administered in a normal text editing window. This interface is familiar to developers comfortable with UNIX-based systems but may be a little confusing for Mac users who expect applications to follow OSX Human Interface Guidelines.

Packages

There are a lot of powerful tools already included but the real fun in Sublime Text comes from the awesome plug-ins (called packages in Sublime Text) that are available.

Package Control

package-control

Installing, updating, deleting and other management of Sublime Text packages manually goes from being a chore, but after installing Package Control, the process is easy and fun to discover new packages that create a customized workflow that isn't really possible in other text editors. There's over 2,000 packages available for installation and most are available for free under open source licensing.

Once Package Control is installed, it's easy to add new packages in the command palette (cmd+p) by typing "install package". It updates its package listing automatically and waits for a package name to be typed in. Press Enter and Package Control takes care of the rest.

The Package Control website is a great resource to find packages on your own and check out my favorites below.

Package Control website


AdvancedNewFile

This plugin allows for faster file creation within a project.

Simply bring up the AdvancedNewFile input through the appropriate key binding. Then, enter the path, along with the file name into the input field. Upon pressing enter, the file will be created. In addition, if the directories specified do not yet exists, they will also be created. For more advanced usage of this plugin, be sure to look at Advanced Path Usage. By default, the path to the file being created will be filled shown in the status bar as you enter the path information.

More info on Github


AutoFileName

Do you ever find yourself sifting through folders in the sidebar trying to remember what you named that file? Can't remember if it was a jpg or a png? Maybe you just wish you could type filenames faster. No more.

Whether your making a img tag in html, setting a background image in css, or linking a .js file to your html (or whatever else people use filename paths for these days…), you can now autocomplete the filename. Plus, it uses the built-in autocomplete, so no need to learn another pesky shortcut.

If you are looking to autocomplete an image path in an HTML <img> tag:

<img src="../|" />

Pressing ctrl+space, will activate AutoFileName. A list of available files where be ready to select.

More info on Github


Better Completion

This package aim at provide a simpler way to build own auto-completions and avoid *.sublime-completions override word-completion wrongly.

auto-completion is lightweight, easier, simpler than snippets.

This package also provide several APIs completions such as JavaScript API, jQuery API, Underscore API, HTML5 and Bootstrap Classes collected by the author.

More info on Github


Bootstrap 3 Snippets

Use common Bootstrap 3 code snippets without having to remember every class used by this popular CSS framework.

More info on Github


CDNJS

Easily link to Javascript packages on CDNJS without leaving your text editor. It makes it easy to find commonly used scripts like jQuery.

More info on Github


Clickable URLs

This plugin underlines URLs in Sublime Text, and lets you open them with a keystroke (Cmd+Option+Enter by default).

After you put the cursor over an URL, you can either hit Cmd+Option+Enter (Ctrl+Alt+Enter on Windows & Linux), or select “Open URL under cursor” from the Command Palette. Instead of selecting an auto detected URL, you can select any block of text and it will also open in a browser as a URL.

There is also an “Open all URLs” command, which opens all URLs found in the current document.

More info on Github


Color Highlighter

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.

More info on the Package Control website


ColorPicker

colorpicker

A multi-platform plugin that brings up a system color picker and converts the selected color to HEX. Press cmd+shift+c on Mac or ctrl+shift+c on Linux/Windows to insert or change a color.

More info on GitHub


Emmet

A system of commands and tools to make coding faster. A lot of features to use, check out Emmet.io for more info.

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

More info on Emmet.io


SCSS

SASS and SCSS syntax highlighting ported from TextMate.

More info on GitHub


SublimeCodeIntel

Code intelligence plugin ported from Open Komodo Editor to Sublime Text.

Supports all the languages Komodo Editor supports for Code Intelligence (CIX, CodeIntel2): JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

Provides the following features:

  • Jump to Symbol Definition - Jump to the file and line of the definition of a symbol.
  • Imports autocomplete - Shows autocomplete with the available modules/symbols in real time.
  • Function Call tooltips - Displays information in the status bar about the working function.
  • Plugin should work in all three platforms (MacOS X, Windows and Linux).

More info on GitHub


Theme - Soda

soda

Popular theme for Sublime Text that is available in dark and light color variants. Includes custom folder icons, file tabs, and Retina (Hi-DPI) icons.

More info on GitHub


It's your workflow

These packages are a good start but there are thousands of other ones to check out and make your own. I would love to know what your go-to favorites are and what new packages everyone's found useful.