With real-world use cases for targeted practice
You as a coder spend a lot of time inside a code editor, so reducing friction with the editor is essential.
One of my favorite features that reduce friction 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 at once. For example, multi-cursors allow you to change values across multiple CSS lines very quickly:
I’ll show you how:
- Create multiple cursors with and without your mouse
- Customize multi-cursor behavior
- Practice multi-cursor in a variety of scenarios with guided exercises
We’ll use a CSS example to demonstrate the different ways to add a multi-cursor. 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 exercise, multi-cursor utility extends far beyond CSS.
You can use your mouse to insert the multi-cursor anywhere you want, or you can select multiple lines and insert the multi-cursor at the end of each selected line.
insert different cursors
Alt on Linux and Windows, or
Option On macOS, when you click to place the multi-cursor under your mouse pointer:
when you’re done, press
Esc to remove all your multi-cursors. and if
Alt Doesn’t suit you, you can change the multi-cursor modifier keys in VS Code preferences. This is described in the section on Customizing multi-cursor behavior.
Insert cursor at end of selected lines
Highlight multiple lines with your mouse and press
I on Linux and Windows, or
I On macOS, to insert the multi-cursor at the end of each selected line:
In most situations, it’s worth it to avoid using your mouse. VS Code has keybindings to insert multi-cursors above and below your cursor, or to add multi-cursors at locations that match some selected text.
All this without taking your hands off your keyboard.
Insert cursor above and below your current cursor
Up on Linux and Windows, or
Up On macOS, to place the multi-cursor below or above your current cursor:
Insert cursor at next matching position
select some text and press
D on Linux and Windows, or
D On macOS, to put the multi-cursor on the next bit of text in the document that matches your selection:
If you add too many multi-cursors, you can undo them one by one.
U on Linux and Windows, or
U on macOS.
put cursor at all matching positions
select some text and press
L on Linux and Windows, or
L On macOS, to put the multi-cursor on all occurrences of selected text:
This shortcut works on the entire open file. If you’re not careful with your initially selected text, you can end up with multiple cursors on unintended lines.
You can modify some aspects of the multi-cursor in the VS Code settings. For example, you can change the multi-cursor modifier keys, how overlapping multi-cursors interact, and modify all multi-cursor keybindings to suit your needs.
Change multi-cursor modifier
, on Linux and Windows, or
, On macOS, to open the VS Code Settings Editor. then, find
multiCursorModifier in the search bar.
By default, the setting for the multi-cursor modifier key is set to
alt, in this setting you use
Alt on Linux and Windows or
Option On macOS to put the multi-cursor wherever you click your mouse.
you can change the setting to
ctrlCmd to use
Ctrl key on Linux and Windows or
Cmd key on macOS instead.
Change overlapping multi-cursor behavior
Open VS Code Settings Editor and find
When the box is checked, merge multi-cursors if they overlap:
When the box is unchecked, you can create multiple cursors with overlapping selections:
Personally, I don’t use overlapping multi-cursors.
Modify multiple-cursor keybindings
You can use VS Code’s Keyboard Shortcuts editor to change keybindings for multi-cursor operations.
Open the editor by navigating to File > Preferences > Keyboard Shortcuts or by pressing the menu bar
S on Linux and Windows, or
S On MacOS:
There are several multi-cursor shortcuts that you can modify:
First, type the ID of the shortcut you want to replace in the search bar. Then click 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:
Keyboard shortcuts are only helpful if you can commit them to 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 real use cases that made my life easier. You can modify and use them as part of a deliberate practice Program.
Exercise 1: Change the verb tenses in the 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 well is rewriting an introductory sentence and changing all the tenses of the verbs in the list. For example, here’s how I write a bullet-point list in a first draft:
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 tenses in the list to the imperative:
The trick is to select the end of a verb in the list, then press
D To add multiple indicators to the part of a second verb in the list. then type
e To change the ending of each verb.
Of course, the verbs in most of the lists are not fully established in this practice. You can’t essentially convert each verb by substituting Eng with I, But this trick lets you convert multiple actions in one line and can significantly reduce editing time across multiple 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 quickly reformat it using the multi-cursor:
Highlight the space after the first comma. press again
D on macOS) to match the remaining spaces after the comma. Finally, manually insert the cursor at the beginning and end of the list
Click on macOS).
Of course, some languages have auto-formatters that can do this automatically, but I still see this being done with relative frequency. It’s handy for turning a comma-separated list into a bullet-point list in Markdown, and I’ve used it in several configuration languages.
Exercise 3: Edit the JSON Object
Multi-cursors can help make editing JSON a little more bearable.
For example, suppose you want to convert the dimensions of each type of JSON object
"B" from 500 to 500 in the following JSON array:
there are four types of objects
"B"But they are not continuous.
Select all objects of type
"B" by highlighting
type: "B" one more row on pressing
D on macOS) to put the multi-cursor on other lines containing
type: "B", Then use the arrow keys to move your cursor over the dimensions of each object:
Naturally, this only works perfectly if all objects have identical structures, which, if you’ve spent five minutes looking at real-world JSON data, you know isn’t the case.
However, I still find this trick helpful. You can usually use it to edit at least a half dozen or so items at once as you move through a document.
It’s still a significant time saver!