How To Edit Multiple Lines At Once In VS Code

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:

I'll show you how to:

• Create multiple cursors with and without your mouse.
• Customize multi-cursor behavior.
• Practice multi-cursors in a variety of scenarios with guided exercises.

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:

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:

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:

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:

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:

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.

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:

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

When the box is unchecked, you can create 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:

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:

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:

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:

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:

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!

What To Read Next

Save time with these five VS Code keyboard shortcuts, and learn how to practice them to make them second nature:

5 Time-Saving VS Code Shortcuts And How To Memorize Them

Quickly learn shortcuts through varied, purposeful practice.

davidamos.devDavid Amos