You spend a lot of time inside a code editor as a coder, so reducing friction with the editor is essential.

One of my favorite friction-reducing features in VS Code is multi-cursors. You can insert multiple cursors  — on a single line or across multiple lines — and edit multiple places in your code simultaneously. For instance, multi-cursors allow you to change values across several CSS lines blazingly fast:

Example adapted from the VS Code docs.

I'll show you how to:

✉️
This article was originally published in my Curious About Code newsletter. Never miss an issue. Subscribe here →

We'll use the CSS example to illustrate different ways to add multi-cursors. Here's the code if you want to copy and paste it into an editor and follow along with the examples:

.global-message-list.transition {
    -webkit-transition: top 200ms linear;
    -ms-transition:     top 200ms linear;
    -moz-transition:    top 200ms linear;
    -khtml-transition:  top 200ms linear;
    -o-transition:      top 200ms linear;
    transition:         top 200ms linear;
}

But, as you'll see in the practice exercises, multi-cursor utility extends far beyond CSS.

Creating Multiple Cursors With Your Mouse

You can use your mouse to insert multi-cursors anywhere you want, or you can select multiple lines and insert multi-cursors at the end of each selected line.

Insert Individual Cursors

Hold Alt on Linux and Windows, or Option on macOS, while you click to insert a multi-cursor under your mouse pointer:

Add individual multi-cursors to edit several lines of CSS.

When you're done, press Esc  to remove all of your multi-cursors. And if Alt doesn't suit you, you can change the multi-cursor modifier key in the VS Code preferences.

Insert Cursors At The End Of Selected Lines

Highlight several lines with your mouse and press Shift + Alt + I on Linux and Windows, or Shift + Option + I on macOS, to insert multi-cursors at the end of every selected line:

Add multi-cursors to the end of selected lines.

Creating Multiple Cursors Without Your Mouse

In most situations, it's worth it to avoid using your mouse. VS Code has keybindings for inserting multi-cursors above and below your cursor or adding multi-cursors at locations that match some selected text.

All without lifting your hands from your keyboard.

Insert Cursors Above And Below Your Current Cursor

Press Ctrl + Alt + Down / Up on Linux and Windows, or Cmd + Option + Down / Up on macOS, to insert multi-cursors below or above your current cursor:

Add multi-cursors below your current cursor.

Insert A Cursor At The Next Matching Location

Select some text and press Ctrl + D on Linux and Windows, or Cmd + D on macOS, to put multi-cursors on the next bit of text in the document matching your selection:

Add multi-cursors on text that matches a selection.

If you add too many multi-cursors, you can undo them one by one using Ctrl + U on Linux and Windows, or Cmd + U on macOS.

Insert A Cursor At All Matching Locations

Select some text and press Ctrl + Shift + L  on Linux and Windows, or Cmd + Shift + L on macOS, to insert multi-cursors at all occurrences of the selected text:

Add multi-cursors at all locations matching the selected text.

This shortcut operates across the entire open file. If you aren't careful with your initially selected text, you can end up with multi-cursors on unintended lines.

Customizing Multi-Cursor Behavior

You can modify some aspects of multi-cursors in the VS Code settings. For instance, you can change the multi-cursor modifier key, how overlapping multi-cursors interact, and modify all of the multi-cursor keybindings to suit your needs.

Change The Multi-Cursor Modifier

Press Ctrl + , on Linux and Windows, or Cmd + , on macOS, to open the VS Code settings editor. Then, search for multiCursorModifier in the search bar.

The multiCursorModifier setting.

By default, the multi-cursor modifier key is setting is set to alt. In this setting, you use Alt on Linux and Windows, or Option on macOS, to insert multi-cursors wherever you click your mouse.

You can change the setting to ctrlCmd to use the Ctrl key on Linux and Windows, or Cmd key on macOS, instead.

Change Overlapping Multi-Cursor Behavior

Open the VS Code settings editor and search for multiCursorMergeOverlapping:

The multiCursorMergeOverlapping setting.

When the box is checked, multi-cursors are merged when they overlap:

Overlapping multi-cursors are merged into one.

When the box is unchecked, you can create multi-cursors with overlapping selections:

Multi-cursors with overlapping selections.

Personally, I don't use overlapping multi-cursors.

Modify Multi-Cursor Keybindings

Using VS Code's Keyboard Shortcuts Editor, you can change the keybindings for multi-cursor operations.

Open the editor by navigating the menu bar to File > Preferences > Keyboard Shortcuts, or by pressing Ctrl + K + Ctrl + S on Linux and Windows, or Cmd + K + Cmd + S on macOS:

The VS Code Keyboard Shortcuts Editor.

There are several multi-cursor shortcuts that you can modify:

  • editor.action.insertCursorAtEndOfEachLineSelected
  • editor.action.insertCursorBelow
  • editor.action.insertCursorAbove
  • editor.action.addSelectionToNextFindMatch
  • editor.action.selectHighlights
  • editor.action.changeAll
  • cursorUndo

First, type the ID for the shortcut you want to change into the search bar. Then click on the edit icon to the left of the shortcut item in the list.

VS Code prompts you to enter a new sequence of keystrokes for the shortcut:

Modifying a keyboard shortcut.

Practicing Multi-Cursors

Keyboard shortcuts are only helpful if you can work them into muscle memory.

When you have to stop and think about a keyboard shortcut, you interrupt your current thought process and dump a bunch of new information into your working memory. As a result, it slows down your coding and makes it harder to solve problems by cluttering your brain with irrelevant information.

To help you build muscle memory, I've put together some guided exercises based on actual use cases that have made my life easier. You can modify and use them as part of a deliberate practice program.

Exercise 1: Change Verb Tense In A Bullet-Point List

I'm a technical writer at my day job, which means I write a lot of bullet-point lists.

One thing I find myself doing reasonably often is rewording an introductory sentence and changing all the tenses of the verbs in the list. For example, here's how I might write a bullet-point list in a first draft:

# Introduction

In this guide, you'll learn how to use multi-cursors in VS Code by:

- Creating multi-cursors with and without your mouse.
- Customizing multi-cursor behavior.
- Practicing multi-cursors through guided exercises.

Later, during editing, I often choose to shorten the introductory sentence and change the verb tense in the list to the imperative:

Editing a bulleted list in markdown.

The trick is to select the ing ending of one verb in the list, then press Ctrl + D to add multi-cursors to the ing part of each other verb in the list. Then type e to replace the ending of each verb.

Of course, the verbs in most lists aren't as perfectly set up as the ones in this exercise. You can't convert every verb to imperative by replacing ing with e. But this trick lets you transform several verbs in a row and can drastically reduce edit time over many lists.

Trust me; I write a lot of lists.

Exercise 2: Format Arrays Vertically

Suppose you want to reformat the following Python list so that each item is on a separate line:

my_list = ["one", "two", "three", "four", "five"]

You can reformat it quickly using multi-cursors:

Reformatting a Python list.

Highlight the space after the first comma. Then press Ctrl + D (or Cmd + D on macOS) to match the spaces after the remaining commas. Finally, manually insert cursors at the beginning and end of the list using Alt + Click (or Option + Click on macOS).

Of course, some languages have auto-formatters that can do this automatically, but I still find myself doing this with relative frequency. It's handy for turning a comma-separated list in markdown into a bullet-point list, and I've used it in several configuration languages.

Exercise 3: Edit JSON Objects

Multi-cursors can help make editing JSON slightly more tolerable.

For example, suppose you want to change the dimensions of every JSON object of type "B" in the following JSON array to 500 by 500:

{"items": [
    {"item": {
        "id": 1,
        "type": "A",
        "dimensions": {
            "width": 250,
            "height": 100
        }
    }},
    {"item": {
        "id": 2,
        "type": "B",
        "dimensions": {
            "width": 100,
            "height": 100
        }
    }},
    {"item": {
        "id": 3,
        "type": "A",
        "dimensions": {
            "width": 250,
            "height": 100
        }
    }},
    {"item": {
        "id": 4,
        "type": "B",
        "dimensions": {
            "width": 100,
            "height": 100
        }
    }},
    {"item": {
        "id": 5,
        "type": "B",
        "dimensions": {
            "width": 100,
            "height": 100
        }
    }},
    {"item": {
        "id": 6,
        "type": "A",
        "dimensions": {
            "width": 250,
            "height": 100
        }
    }},
    {"item": {
        "id": 7,
        "type": "B",
        "dimensions": {
            "width": 100,
            "height": 100
        }
    }},
    {"item": {
        "id": 8,
        "type": "A",
        "dimensions": {
            "width": 250,
            "height": 100
        }
    }}
]}

There are four objects of type "B", but they aren't consecutive.

Select all objects of type "B" by highlighting type: "B" on one line and pressing Ctrl + D (or Cmd + D on macOS) to insert multi-cursors on the other lines containing type: "B". Then use the arrow keys to move each cursor to the dimensions of each object:

Editing multiple JSON objects simultaneously.

Naturally, this only works perfectly when all of the objects have identical structures, which, if you've ever spent five minutes looking at real-world JSON data, you know isn't the case.

I still find this trick helpful, though. You can usually use it to edit at least half a dozen or so objects simultaneously as you move through a document.

That's still a significant time saver!