By josh / July 28, 2012

Using Sublime Text’s amazing multiple selections

Multi-select

Multiple cursor mode is one of Sublime Text’s most distinctive features, and it’s a huge productivity booster.

To illustrate how useful this feature can be, let’s take a look at some simple editing scenarios using the following HTML list:

<ul>
	<li>The Office</li>
	<li>Fringe</li>
	<li>Touch</li>
</ul>

If I want to add a CSS class element of tv-shows in most text editors, I’d either try to do some kind of find and replace on the opening li element, or I’d need to enter column selection mode to vertically select a single column and then then type in the text I need in all three rows. Every text editor seems to set this mode up a little differently, if at all, and it always takes me some fumbling around to get it working.

Sublime’s multiple selections are much more intuitive. After each opening li, I can just Command+click on Mac OS X or Ctrl+click on Windows and Linux, and then start typing:

Multiple selections in action.

You can even click multiple locations on the same line.

Multiple selection can help with many scenarios where you’d normally need to take a couple of minutes to figure out a good find and replace approach or record a macro.

Consider the following list:

The Office
Fringe
Touch

To wrap these items in li elements, you could record a macro where you typed the opening <li> tag, jumped to the end of the line, typed the </li> tag, moved down a line, then jumped to the beginning of the line. Replaying this two times would result in the entire list being formatted. When you have a lot of items to work with, this extra effort is often worthwhile.

However, to make a quick, three-line change like this, using multiple selections is much faster. In this scenario, all you need to do is:

  1. Insert the cursor at the beginning of the first line.
  2. Invoke the Add Next Line command twice.
  3. Type the opening <li> tag.
  4. Press End.
  5. Type the closing </li> tag.

Mulitple selections can handle tasks that would otherwise require a macro.

You can combine the multiple selection feature with Sublime’s powerful selection features to perform tasks that would normally require complex macros or fiddling with regular expressions. For example, given a list of items with different CSS classes:

<ul>
	<li class="current">The Office</li>
	<li class="current">Fringe</li>
	<li class="current">Touch</li>
	<li class="reruns">24</li>
	<li class="reruns">The X Files</li>
</ul>

You could quickly change the class names of all items by combining Add Next Line with Expand Selection to Word:

Multiple selections can negate the need for complex regex replaces.

Multiple selections is such a unique feature that it’s sometimes hard to remember it even exists. Spend a few minutes play around with it, and next time you find yourself making tedious manual edits because there doesn’t seem to be an easy way to automate a task, ask yourself whether you could knock it out with multiple selections.

P.S. Do you love using Sublime to get more done? Sign up for the free Sublime Text Tips newsletter to get more tips every week. As a bonus, I’ll send you a 12-page guide to Sublime’s advanced editing features so you can start using Sublime more effectively–today.

About the author

josh

2comments
w p - November 10, 2012

Just found it and this site is awesome!

One suggestion, in a post about a certain shortcut you may reference other shortcuts. You bold these references. If you used the abbr tag to showcase the shortcuts on hover or maybe an abbr/:after combo to have them always showing inline the usability would go way up. Not sure the easiest implementation but maybe just let js handle it, build a reference array/object and as long as you used the same text() inside the abbr you would be good. Could parse the strong tags in the same so you wouldn’t have to deal with changing legacy posts.

Thanks for the site!

Ward

Reply
    w p - November 10, 2012

    Alright, rough implementation, wouldn’t use this as is but –

    <code

    stt = {

    ref : {

    ‘Fold Tag Attributes’ : ‘Mac: Cmd+K, Cmd+T or Win: Ctrl+K, Ctrl+T ‘

    },

    init: function() {

    var $ = jQuery,

    $tags = $(‘strong’),

    tagText, $this;

    $tags.each(function() {

    $this = $(this);

    for (tagText in stt.ref) {

    if ( tagText === $this.text() ) {

    $this.html( tagText + ‘ (‘ + stt.ref[tagText] + ‘)‘ );

    }

    }

    });

    }

    };

    stt.init();

    wow disqus blows for preserving formatting eh? It’s moving and changing my code and pre tags

    Reply
Click here to add a comment

Leave a comment: