Waaay Faster Text Editing with Multiple-Cursor Tricks

jumbled text | text editor shortcuts

Life is short. Why read an article on text editor shortcuts and tricks?

To be a good web developer, you have to be unusually skilled at quickly and precisely editing text files on a computer.

Well, at some point, jobs get down to their basics. Lawyers have to read quickly, surgeons have to have steady (and washed!) hands, and so on. These building blocks don’t sound as glamorous as “charm a jury” or “transplant a heart”—but there’s literally no job, including those glamorous parts, without the basics.

Web development is the same.  You might think a web developer’s job is to have strong opinions about impenetrable ideas like “API design” and “abstraction layers.” But a literal description of our job is “to type things into a computer.”

And so, if you want to be a good web developer, you have to be unusually skilled at editing the contents of text files on a computer, and doing it quickly and precisely. Only then do you get to the fun part, which is—as we all know — muttering “C’mon, baby” as you hack the mainframe from the back of a speeding getaway van.

Let’s Learn Some Text Editor Tricks and Shortcuts

To get you closer to getaway-van status, today we’re discussing some shortcuts that will make you much more efficient at editing text files—specifically, in a text editor, in my case Sublime Text.

You’ll learn some of the most helpful principles of “Sublime-Text-Fu” (or “whatever-text-editor-you-use-fu,” see below): how the text editor shortcuts that relate to editing multiple elements at the same time, combined with specific text editing practices, can help you work much more efficiently with large unwieldy text blocks of any kind.

Follow Along with the Video Guide

This week’s article is very much an exercise in show-and-tell, since it’s very hard to describe how to use these tricks and shortcuts work without demonstrating them.

So please follow along with the video below. If you don’t want to watch the whole thing (probably the right impulse!), I’ve timestamped key moments from the video in the text, in bold.

By the way, the sound quality is sadly not ideal on the video—seems I was too close to the mic. Don’t let it distract you, and I hear it too. :)

Working with Other Text Editors and Operating Systems

This text editor tutorial discusses Sublime Text shortcuts on a Windows machine, but it should be useful to everybody.

This text editor tutorial discusses Sublime Text shortcuts on a Windows machine, but it should be useful to everybody, not just the subset of people who use that combination. Here are some notes for translating these text editor shortcuts to your own setup:

Most Basic Shortcuts are Consistent Across Text Editors

From what I’ve seen, the basic keyboard shortcuts for other text editors—at least, the ones we’re discussing here—are very similar. Certainly the ones listed for PHPStorm and Atom are almost identical.

If you’ve got your own text editor, just check the documentation for the commands I mention, and revise my advice as needed. However, it’s more than likely that trying what I describe here will “just work” if you have a well-established text editor—a degree of consistency in text editor shortcuts is in everyone’s interest.

CMD: Mac for CTRL

The only difference to keep in mind if you’re on a cool Mac instead of a gross PC is that, rather than the ctrl key, Macs have a cmd key that serves (for the purposes of this article) the same function. So just swap cmd for ctrl and you should be good to go with the rest of the advice here.

Given that preamble, you can follow along with the video with the text editor of your choice, Firefox or Chrome, and this page of gross table-based HTML markup from one of the oldest still-active websites in the world, dedicated to (what else?) hatred of Internet Explorer. And if you need a primer on browser inspectors (which I use to pull the page’s markup from Chrome into Sublime Text at 1:55 in the video), do yourself a favor and read up on those impossibly useful tools.

Okay, let’s dive in!

The Big Epiphany: Working with Multiple Cursors

Using multiple cursors to edit multiple things at once is the basis of the efficiency gains discussed here.

The single coolest experience I’ve had in learning to work with a text editor was when I started to use multiple cursors at once.

Multiple cursors mean you make an edit once, and that edit shows up everywhere in the document you’re editing. The video’s full of examples of it—4:30 is where I explain and demonstrate it for the first time, by deleting every instance of the text </font> throughout a document, all at once.

Using multiple cursors to edit multiple things at once is the basis of the efficiency gains discussed here. The only other question is: How do we figure out where to put our multiple cursors? The rest of the article discusses that topic.

Matching Within a Text File

Probably 90% of the time that you use multiple cursors, it’s to do the same thing to similar or identical elements within your text. Examples of this would be:

  1. To give every <h2> tag a class of chapter-subhead.
  2. To replace every deprecated <b> tag with a <strong> tag (as the video does at 8:00).
  3. To replace the phrase “our team” with the word “we” after the first three uses.

Every one of these examples has an element of matching: it involves finding an element to work on that meets specific criteria, from “is an <h2>” tag to “is the fourth or later occurrence of the phrase ‘our team.'”

So we want the things our multiple cursors select—the multiple elements we “do something to”—to match a rule. After that, editing those things is as easy as editing the first one, and that’s where the time savings come in.

How do we select multiple matching elements?

CTRL+D: “Select the Next Match”

If you highlight a piece of text and type CTRL+D, you will also select the next identical piece of text in the same document.

If you highlight a piece of text in Sublime Text or a similar text editor and type CTRL+D, you will also select the next identical piece of text in the same document, if one exists. You’ll now have two cursors, each at the same point in an identical piece of text. Again, 4:30 in the video is the first to show this explicitly.

ALT+F3: “Select All Matches”

I learned (during recording the video :) ) that ALT+F3 selects all instances of a pattern in a document, without having to hold down “D” forever—at least in Sublime Text. That’s a very useful thing to know, especially for huge documents.

CTRL+K: “Deselect the Current Match”

CTRL+K does something interesting in Sublime Text: it deselects the current match once you’ve got multiple items selected with CTRL+D.

I bring this up because in the video (around 38:00) I learn a pattern that lets me select every alternating matching element (second, fourth, and sixth, but not first, third, or fifth)—which is really handy for my imagined goal in the video, which is to give different classes to the “first columns” and “second columns” of a two-column layout. The pattern is as follows:

CTRL+D CTRL+K CTRL+DCTRL+D CTRL+K CTRL+D

More broadly, CTRL+K gives you the possibility of “skipping” some matching elements. Let’s say you want to delete every <p> tag in a document, except the third one. When you get to the third matching element (the second time you press CTRL+D), you can just skip it with CTRL+K, select the others with further CTRL+D presses, and delete them all at once.

Tricky Matching

Here’s where creativity comes in. As I point out in the video, sometimes things are similar but not identical, and you want to do the same thing to them.

A First Example: Changing Color Hexes

As the video discusses at 10:35, the text block I chose had lots of markup that looked like this: <font color="#??????">—where the six “?”s are numbers that change depending on the specific color being requested.

We want to do the same thing to all those elements: delete them. But they’re different enough that selecting them all as the same thing using CTRL+D won’t work.

As 10:35 discusses, the solution takes some creativity. Here it is:

  1. These elements are all identical except for the “?” color values.
  2. There are always six “?” color values, because they’re an HTML hex.
  3. So select <font color="#, then select the eight characters to the right of that (to also get the "> that closes the tag), then delete.

A Second Example: Changing Opening and Closing Tags Simultaneously

At 8:00 in the video, I change all <b> tags to <strong> tags. Since <b> tags have both opening and closing elements, note that this takes two steps:

  1. Change all <b> (opening) tags to <strong> tags.
  2. Change all </b> (closing) tags to </strong> tags.

We can do this all at once, using a trick:

Both <b> and </b> tags have something in common—the string b>. Nothing else in the document matches that weird combination of two letters, but every <b> or </b> tag does.

So we just search (with CTRL+D or ALT+F3) for all instances of b>, and replace it with strong>.

General Guidelines

The general way the logic breaks down is to try and find the parts that are identical, and work from there. A lot of the time, the differences are consistent in a way you can work with, like “the different parts always make up a line I want to delete,” or “the different parts are identical except sometimes they’re capital and sometimes they’re lowercase.”

A few examples of this type of reasoning might include:

  • “Every line I want to delete starts with the same four characters, <font.” (Solution: Select the last character of the previous line and <font, delete the entire line, and hit Enter to restore the previous line you just deleted.)
  • “Every PHP function I want to delete has the same second argument, $badvar.” (Solution: Select $badvar ) { and delete the entire line.)
  • “I want to change ‘mouses’ to ‘mice’ but don’t want to mess up capitalization.” (Solution: Select “mouses,” any case, then only select “ouses” and replace it with “ice.”)

There are other logic tricks that come in, too. For example, what do you do with an example like “I want to change ‘!’ to something, and ‘!!’ to something else”? (Solution: change “!!” first, then change “!”, since otherwise you’ll end up changing every “!!” into two of the thing you changed “!” to.)

It’s a series of endlessly varied but fundamentally similar logic puzzles, all playing out in a text editor. If you like that kind of thing, then you’ve chosen the right industry.

You Now Have Your Text Editor Yellow Belt

There’s a lot more to say about the power of a text editor, but knowing how to work with multiple cursors is absolutely enormous. Thanks for reading (and watching) and I’d love to read questions or thoughts below!

Image credit: elizaIO


5 Responses

Comments

  • Fred says:

    Very cool! Thanks for the tip!

  • I use phpEclipse, but as you mentioned lots of these tricks are translatable (or even configurable.) Just a quick note re: replacing strings… It’s always a good idea to give a quick once-over before applying file-wide replacements “by hand”.

    For example, if someone changed “b>” to “strong>”, they might inadvertently break a line containing $b>c$ if that were also in their file. I don’t think refactoring is possible on a partial string, so we just have to be extra diligent.

    Thanks for the tips!

Pingbacks

Add a comment

(required)

(required)

(optional)