Sublime Text is the best text editor on the market right now. If you do work on the web, you should consider using this text editor. The interface is clean, intuitive and out of the way. The back end is fast as all get out. Searching thousands of files is snappier than you'd imagine. Text rendering on retina is gorgeous. But most of all, Sublime is highly pluggable and configurable. I recently downloaded the Sublime Text 3 beta and used it as an opportunity to reboot my editor config and plugin loadout. I've been doing loads of front-end work lately and wanted to create a development environment that favored that type of work. Below is where I ended up and I couldn't be happier with the results.
Getting Setup (Download ST & Package Manager)
If you don't already have ST installed, go get it NOW! Sublime is cross platform so you don't have to worry about it not running on Windows (but seriously, buy a Mac already). You can evaluate Sublime Text for free but you'll need to purchase a license eventually. I own ST2 but the link above is for the ST3 beta that I'm running now. It's hardly a beta; this beta feels every bit like a finished piece of software. Once you've got ST installed and running, the next step is installing the package manager.
The easiest way to install plugins into ST is to use the Package Manager. You can install a package manually, but the package manager makes the process trivial. If you don't have it installed, you can find directions here. Basically, you open up the ST console and paste in some commands....done!
Must-have Packages
SublimeCodeIntel
Adds in-depth code completion for loads of languages like PHP, JavaScript, HTML5, CSS. Sublime out of the box will do code completion for text snippets that already exist in your current file. This is great for reusing variables, function names, etc. but it isn't the best for writing new code. CodeIntel bridges the gap and does it seamlessly.
Git
Adds basic git command support right within Sublime! View repo status, commit logs, diffs, file history and even blame! All this without leaving Sublime. Honestly, any tool that keeps me in my editor, away from other windows (distractions) is a good thing. I was skeptical about this one at first, but I'm using it more and more each day.
GitGutter
This little gem is my favorite plugin of them all. From the project's
GitHub page, "A sublime text 2/3 plugin to show an icon in the gutter
area indicating whether a line has been inserted, modified or deleted."
Great for seeing (at a glance) all of the areas of a file that have
changed since your last commit. How often have you accidentally
committed debugging code like console.log(var) or dsm($array)? I'd
wager you'll do way less of that with this nifty plugin. So clever. h/t
to our very own Adam Zimmermann for finding this one.
SCSS
Sass is pretty much the gold standard when it comes to CSS preprocessing. Every great front-ender I know is using it these days. If you're one of them, you need to install this package. It adds syntax highlighting and code completion for Sass and SCSS files.
BracketHighlighter
How often have you been knee-deep in markup or some function and wished you could quickly find the opening/closing tag or if statement. BracketHighligher highlights the opening and closing brackets for the active code block (wherever your cursor is) in the ST gutter. It works for all kinds brackets in all kinds of languages. This type of thing really helps keep me sane and productive.
SideBarEnhancements
One gripe I've had with ST since I started using it was there aren't basic file operations baked in to the sidebar/file browser. Things like "reveal", "move to trash", etc. This package adds these and more. These things might not bug command line experts, but I know it drives front-enders crazy when they can't do these things from their editor.
Basic Config
As I mentioned above, Sublime is highly configurable. You can customize just about anything. Key bindings, tab size, default syntaxes, etc. To get started, have a look at the Settings page on the ST2 Docs website. You'll learn how to tweak your editor to suit your needs. Here's what my current settings look like:
{
"color_scheme": "Packages/Color Scheme - Default/Solarized (Dark).tmTheme",
"font_face": "Source Code Pro",
"font_size": 12.0,
"ignored_packages":
[
"Vintage"
],
"rulers":
[
80
],
"tab_size": 2,
"translate_tabs_to_spaces": true,
"use_tab_stops": true,
"trim_automatic_white_space": true,
"trim_trailing_white_space_on_save": true,
"ensure_newline_at_eof_on_save": true,
"fallback_encoding": "UTF-8",
"default_line_ending": "unix",
"shift_tab_unindent": true,
"word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?"
}Summarized, that configuration does the following:
- Sets my default color scheme to the lovely Solarized Dark theme!
- Sets my default font to Source Code Pro My favorite monospace font that Adobe was gracious enough to open source.
- Adds a ruler at character position 80 so that I know when my documentation and comments are running too long.
- Sets tab size to the Drupal standard of 2 spaces.
- Misc. text formatting stuff for Drupal standards (see below).
So that's it! This is my current setup and it's working great for me. What's your favorite SublimeText package or customization? Leave it in the comments!
P.S. If you're a Drupal developer, check out this post from Drupal.org on configuration tailored to Drupal standards and links to some wicked Drupal plugins.
