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 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.
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.
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)
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.
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.
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.
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.
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.
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 src="../|" />
ctrl+space, will activate AutoFileName. A list of available files where be ready to select.
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.
Bootstrap 3 Snippets
Use common Bootstrap 3 code snippets without having to remember every class used by this popular CSS framework.
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
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.
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.
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.
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.
SASS and SCSS syntax highlighting ported from TextMate.
Code intelligence plugin ported from Open Komodo Editor to Sublime Text.
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).
Theme - 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.
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.