Must-Use Features & Hotkeys for Sublime Text; Sweet Video Tutorial

I’m a bit ashamed. I started using Sublime Text more than a year ago, but never got around to learning many of its best features. This is my penance.

First, let’s be clear (and opinionated): if you develop for UI, you probably ought to be using Sublime. Sure, there are the folks who insist that terminal-based modal editors keep them closer to Jesus, or might allow them to someday squash bugs on the production server with their phone, from the top of Mt. Hood, in a blizzard, while making sweet love to an angel. But for more… uhhh… practical… folks, Sublime is the way to go. In particular, UI devs spend so much time working in desktop applications as the point of interaction with designers, product owners, clients, etc. that I don’t think it makes sense to “break your hands” with vim/emacs shortcuts when you can keep yourself comfortable with the Mac OS hotkey paradigm. (YMMV.)

(Note 1: If any of those vi/vim/emacs folks are reading this, Sublime is the first GUI editor to provide a vast amount of what you’re used to, including programmability & plug-ins, and has an extra-special ‘Vintage‘ package to conform to your habits and expectations. It’s also got a chrome-less ‘distraction-free mode’.)

(Note 2: Yes, I know some people just adore IDE’s. But my reading and my limited experience with them leaves me with the prejudice that there is just way too much cruft, and that Sublime has more elegantly included most of their core functionality anyway. That said, I’m prepared to consider WebStorm some day, solely because I keep seeing gurus like Misko Hevery using it in Angular.js demos. But I’ll be surprised if a comprehensive feature comparison reveals much that I could use on a daily basis for small projects I’ve written myself. Then again, I’m not a guru, so YMMV. UPDATE: the Angular-UI team have produced a plugin for sublime that reproduces much of the Auto-Complete and GoTo-Definition functionality that WebStorm had previously offered for Angular. See my post.)

So, Sublime. Sublime is a bit like Photoshop, in that it’s an onion. A software onion. You just keep peeling back layers, and there just keep being more and more and more features hidden in there. So, if you learn your lesson from me, you’ll understand that all those beautiful, time-saving features in Sublime won’t just reveal themselves to you unless you make a concerted effort to go find them. And you’ll go find them. I had my mind blown about three separate times while figuring these out. They’re just invaluable, and will allow you to move around with the fluidity of the grey-beards who use vim, plus some features they only wish they had.

There are other ways to learn Sublime’s features, but many folks (especially those just starting with Sublime) will find their time well-invested in Jeffrey Way’s outstanding and free tutorial, Perfect Workflow in Sublime Text 2. Really, all video tutorials ought to be as crisp, professional, and well designed as that one. (I might actually watch some of them, if they were.) It’s so good, it’s linked from Sublime’s own support page. Most people will easily make back their time investment in a month or two. The whole thing is well over 2 hours of content, including all the plugins, but you can start with the fundamentals in about 50 minutes.

(Foolishly, I skipped ahead to one of the middle pieces of the tutorial, thinking that I already had the basics figured out, then quickly reversed course once I noticed how good his content is, and how many tricks he was already using that I didn’t know. Until now, I had been really pleased with myself for just discovering multiple cursors a while back. <sigh>)

Anyway, I promised you Sublime’s must-use Mac OS features & hotkeys, focused on editing/navigation features. Commit these to muscle-memory and it’ll save you hours. I’m writing this post precisely to help myself do that.

  • Show/Hide Sidebar: ⌘-K + ⌘-B
    You won’t need your sidebar much, after you memorize these hotkeys. But note the use of ⌘-K as a modifier prefix. This will recur, and lets Sublime offer many more hotkeys than it could otherwise. It’s like that second set of presets on your car radio. 

Cursor Control, Multi-Selecting

  • Multiple-Cursors: ⌘-D
    Once any string is selected, pressing ⌘-D will find the next instance of that string, and insert an additional cursor there, until no further instances are found. (With nothing selected, will first ‘expand selection’ to the word around your cursor.)
    BONUS: If you go too far, you can reverse course and deselect the last instance with ⌘-U.
    BONUS 2:  You can modify ⌘-D with Sublime’s ⌘-K prefix to skip the current instance and go to the next one.
  • Multiple-Cursor-Find-All: ⌘-CTRL-G
    Multiple Cursors at *all* matching locations in the current doc.
  • Multiple-Cursor-By-Line-Splitting: ⌘-SHIFT-L
    If you have a multi-line selection, this hotkey converts it to multiple, single-line selections, with a cursor at end of each line. I’ve swapped this mapping with ⌘-L, for consistency (see below).
  • Multiple-Cursors via Column-Select: OPTION-DRAG
    You’ll just need to try this to get it. Creates multiple selections/cursors in a symmetrical block of characters, without including whole lines, and without needing all of the selections to match, as with ⌘-D. Inserts a cursor at the beginning or end of each selection, depending on the direction you drag.
  • Multiple-Cursors (Columnar) by Keyboard: CTRL-SHIFT-UP/DOWN
    If you just can’t bring yourself to lift your fingers from the keyboard to get columnar multi-cursors like above, just hold down CTRL-SHIFT, while pressing UP or DOWN. 
  • Multiple-Cursors with Additive Selection: ⌘-click/drag
    Are the options above too… symmetrical… for you? OK. Believe it or not, Sublime lets you free-select as many additional, totally random, unrelated-in-any-way areas for cursor insertion as you want. Just hold down  and choose them with your mouse.
  • Deactivate Multiple-Cursor Mode: ESCAPE

Searches & Quick-Finds

  • Quick-Find: ⌘-OPTION-G.
    Just like ⌘-F, but without all the extra steps, and a find panel you have to close when you’re done. Jumps immediately to the next instance of the selected word. If you haven’t selected anything, it assumes you want whatever word your cursor is in.
  • Quick-Find-All⌘-CTRL-G
    This is the same as what I called “Multiple-Cursor-Find-All”, above. Repeated here because of both hotkey and conceptual similarity. 
  • Re-Quick-Find: ⌘-G
    Quick-Finds, but re-using whatever your last search term was (whether it was a quick-find or a traditional find). On my own machine, I’ve swapped the assignments of this and Quick-Find, as I expect to use Quick-Find far more often.
  • Incremental Search⌘-I
    More like ‘modal’ search, as there’s nothing really ‘incremental’ about it. Per the unofficial docs: “The only difference with the regular search panel lies in the behavior of the Enter key.”
    With ⌘-F, the selection jumps to the first instance of your search string, and you have two options: press ENTER to jump to the next instance, or press ESCAPE to exit the search panel and keep your cursor at that location.
    With ⌘-I, you can modify your string but ENTER will close the search panel and drop you at the first instance. This is good for simply jumping ahead to an editing target you can already see, without lifting your fingers from the keyboard. To advance to the next instance before you close the search panel, use ⌘-G (Re-Quick-Find), then ENTER to close.
  • Traditional ‘Find’, but Project-Wide: ⌘-SHIFT-F

Expand/Edit/Move Selection

These commands start from your insertion point and make a selection outward from there. Repeated presses of the key will continue outward.

  • Select Whole HTML Tag: ⌘-SHIFT-A
  • Select Whole Line: ⌘-L
    This works even in multiple selections. (That said, I use ⌘-LEFT/RIGHT more often in that context.) I’ve customized mine to ⌘-SHIFT-L, to match the other ‘expand selection’ commands. 
  • Select Whole Scope: ⌘-SHIFT-SPACE
    Makes an odd stop at a function’s params before continuing to the whole function.
  • Select Whole Indented Block: ⌘-SHIFT-J
  • Select Whole Bracket: CTRL-SHIFT-M
    Again, I’ve remapped this to ⌘-SHIFT-M to match the other selections, so all 5 can begin with ⌘-SHIFT
  • Wrap Selection With Tag: CTRL-SHIFT-W
    Just type the tag/element name once it’s wrapped.
  • Duplicate Selection ⌘-SHIFT-D
  • Join Selection (into 1 line) ⌘-J
  • Swap Selection Up/Down 1 Line ⌘-CTRL-UP/DOWN
  • Line or Selection Indent/Unindent⌘-[  /  ⌘-]
    MUCH better than manually inserting tabs.

Goto Anything

  • Open Goto Anything Panel: ⌘-P or: ⌘-T
    Goto Anything is a mind-blower right up there with multiple cursors. Typing a search string into the panel gets you fuzzy searches and instant previews for any/all of the following:

    • Goto File: 
      I
      nstant access, via keyboard, to any file in your project. Fuzzy search will locate any files with matching names, or even kinda-sorta matching names, and show you an instant preview of the top-ranking match. To see instant previews of other matches, just arrow-down through the list. If a quick look was all you needed, hit ESCAPE and you’re done. To open and activate the file that’s previewing, hit ENTERClose your sidebar, now, and make yourself get used to this feature. 
    • Goto Symbol:
      Use the @ operator, followed by a search string, to jump immediately to a symbol in the active file.
    • Goto Line:
      Use the : operator, followed by an integer, to jump immediately to a line in the active file.
    • Goto Text:
      Use the # operator, followed by a search string, to jump immediately to that occurrence in the active file.
    • Goto Line or Symbol or Text in File:
      Yes, you can totally combine all of the above, to go directly to a certain line or symbol in a certain file. Start with the file search string, select the file you want as those results come up, and then add : or @ or  # to the string to goto line or symbol or free text in that file.
  • Goto Any Project:  ⌘-CTRL-P
  • Show/Hide Sidebar: ⌘-K + ⌘-B
    Really: close your sidebar now and get used to Goto Anything. 

HTML Tags

  • Close HTML Tag:   ⌘-OPTION-.
  • Wrap Selection With TagCTRL-SHIFT-W
  • Select Whole HTML Tag: ⌘-SHIFT-A

Miscellaneous

  • Paste With Indentation-Matching ⌘-CTRL-V
    Yes, it does seem that Jon Skinner can read your mind. Magic.
  • Scroll 1 Line Up/Down:  CTRL-OPTION-UP/DOWN
    Scrolls the view, without moving the cursor.
  • Scroll to Center Cursor Vertically in Window ⌘-K + ⌘-C
  • Delete Nearest Word/Subword:  CTRL-DELETE
  • Delete Line After Cursor ⌘-K + ⌘-K
  • Delete Line Before Cursor ⌘-K + ⌘-DELETE
  • Toggle Commenting on Line/Selection:  ⌘-/
  • Insert New Comment at Cursor:  ⌘-OPTION-/
  • Convert to Uppercase ⌘-K + ⌘-U
  • Convert to Lowercase ⌘-K + ⌘-L
  • Transpose ⌘-T
    Swaps the two words or characters on either side of the cursor.

Underutilized OS-wide Text-Editing Shortcuts

Many folks already know this, but we’re after text-editing power here. You can do an amazing amount of text selection and cursor movement from your keyboard in almost all applications, by just using OPTION, , SHIFT, and combinations thereof, to modify your arrow keys:

  • SHIFT: Holding down shift and moving the cursor with arrow keys selects whatever text you pass over.
  • OPTION: Arrow keys move by the word, rather than the character. SHIFT-OPTION selects by the word.
  • : As a modifier for left and right keys, jumps to the beginning or end of a line, and selects to end of line when modified with SHIFT. With up and down, jumps/selects to beginning or end of document.

Bonus Sublime Optimizations

  • For any command that searches downward in your document for something, modifying it with SHIFT will search upward instead.
  • Dragging a folder onto the Sublime icon in your dock will open up a new Sublime window and add the folder to the project, showing it in the project sidebar.
  • If you set it up properly, you can also open Sublime directly from the terminal, and pass it a particular file, or the whole current folder, just as above.
  • If you love a shortcut, but not its key-combination, you can easily redefine it. (Plus, just reading through the key bindings file will reveal tons of additional undocumented bindings of varying utility.)
  • Auto-complete is a great feature, but I think it’s frustratingly ambiguous that insertion happens automatically on ENTER, which you might intend simply as a newline character. You can change this to TAB.
  • There are a ton of other great features hidden in the prefs, so be sure to read all the way through the (well-commented) file. Other new faves include: removing hyphens from the default word separators, “indent_guide_options”: [“draw_active”], and highlight_modified_tabs. (Note: all your changes should be made in your user-settings files, else you’ll lose them on updates.)
  • If you want more background on Sublime components and concepts, the community-maintained Unofficial Docs have some good stuff. However, other parts of the unofficial docs are dodgy (like their list of hotkeys).
  • And if you want more power when you’re done with just figuring out the text-editing awesomeness: Sublime is fully extensible, and has it’s own package-management system, project build hotkeys, and much more. But that’s a whole additional post. The Perfect Workflow tutorial has good info there.
  • As if that’s not enough… Sublime Text 3 is now in Beta. It includes ‘Goto Definition’, project-wide symbol search, and other features which should be a big help in converting IDE hold-outs. Registered users can try it now…

Other great lists of must-use features from around the web:

(What have I missed that you can’t live without? Share in comments.)

Advertisements
Tagged , , ,

2 thoughts on “Must-Use Features & Hotkeys for Sublime Text; Sweet Video Tutorial

  1. I’m going to make sure that my Twitterverse knows that an outstanding post on Sublime is out there.

    I know only few of these tips/tricks but a compilation is always helpful and this will act as my go-to guide whenever I’m stuck.

  2. Love the ⌘+L, ⌘+Shift+A, had been looking for them like forever.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: