The web content provides a comprehensive guide on using multi-cursor features in Visual Studio Code (VS Code) to enhance coding efficiency by allowing simultaneous edits across multiple lines and locations in the code.
Abstract
The article "How To Edit Multiple Lines at Once in VS Code" offers an in-depth look at the multi-cursor functionality within VS Code, emphasizing its utility for streamlining repetitive tasks. It demonstrates how to create multiple cursors with and without a mouse, customize multi-cursor behavior, and practice these skills through guided exercises. The guide includes visual aids such as gifs and images to illustrate the use of multi-cursors for various coding tasks, including editing CSS properties, reformatting text, and manipulating data structures like JSON objects. The author, who claims to be a technical writer and a frequent user of multi-cursors, asserts that mastering these features can significantly reduce editing time and improve coding workflow.
Opinions
The author believes that reducing friction with the code editor is essential for coders, who spend a lot of time inside one.
Multi-cursors are praised for their ability to perform blazingly fast edits across several lines of code, such as changing CSS values.
The author suggests that keyboard shortcuts are most beneficial when they become second nature, advocating for muscle memory development through deliberate practice.
Customizing multi-cursor settings, such as the modifier key and overlapping behavior, is encouraged to suit individual preferences and enhance productivity.
The author shares personal experience, stating that they often use multi-cursors to edit verb tenses in bullet-point lists and reformat arrays in code, highlighting the practical applications of the feature.
While acknowledging that not all JSON data is uniformly structured, the author maintains that multi-cursors can still be a significant time-saver when editing JSON objects.
How To Edit Multiple Lines at Once in VS Code
With real-world use cases for targeted practice
Image by author (via Canva.com)
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:
all images and gifs by author
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:
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. This is described in the Customizing Multi-Cursor Behavior section.
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
You can use VS Code’s Keyboard Shortcuts Editor to 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 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, meaning I write many 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:
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.