Multi-Cursor Editing in Visual Studio Code4 min read

Introduction

A few days ago, I was showing a co-worker on how to localize a web part using SPFx. I had a series of words to copy and move into a JSON structure.

I selected the whole text and inserted a " in front of every word, a " after every word, and a , at the end of every line in about 5 keystrokes.

"HOW DID YOU DO THAT?!" my co-worker asked, inappropriately too loud for a quiet office setting.

I could have produced a rabbit from the computer and he wouldn’t have been more impressed.

He had never used multi-cursor editing before — or, apparently, seen anyone use it.

Then I remembered another time, a few months ago, when I had shown the same feature to a friend of mine. Someone that I have looked up to and respected for over 15 years, who has more to teach me than I could ever teach him. He had said, "you should blog about this!".

I had completely forgotten about it.

This article will demonstrate how to use multi-cursor editing. I don’t think it is particularly earth-shattering, but I do hope that someone else will learn ways to save some keystrokes.

Multiple Cursors in Visual Studio Code for Windows

Multiple cursors is a feature that is available out-of-the-box within Visual Studio Code. (It is also available in Visual Studio, but some of the shortcut keys are different).

You use multiple cursors by creating multiple cursors in your editing window (selecting all instances of text you wish to edit), and editing your text.

Once you have multiple cursors in place, you can move them just like you would a single cursor, by using the arrow keys.

To go back to single-cursor editing, just hit ESCAPE.

It takes a while to get used to it, but once you get the hang of it, it can save you quite a bit of time.

CTRL+ALT+ ↑ / ↓: Select next/previous line

If you have a bunch of text in consecutive lines, you can simply start on a line and add cursors on the lines before or after by using CTRL-ALT-UP ARROW or CTRL-ALT-DOWN ARROW.

ALT-CLICK: Create cursors

If you want to insert multiple cursors throughout a document that aren’t on consecutive lines, you can simply hold ALT and click on each line.

CTRL-U: Undo last cursor operation

Picture this: you carefully selected over one hundred lines by alt-clicking and — as you get ready to click on the last line — you click on the wrong line. You may think that alt-clicking again will deselect the line, but you’d be wrong. And don’t try to let go of the ALT key to de-select the wrong line because you’ll lose your entire selection!

Simply hit CTRL-U to under your last cursor operation. You can continue hitting CTRL-U to undo more cursor operations.

CTRL-SHIFT-L: Select current match

You can insert cursors in every instance of the selected text by clicking CTRL-SHIFT-L. It saves you from having to manually find every instance of a word and Alt-click on every word. Fast!

CTRL-F2: Select current word

To select all instances of the current word hit CTRL-F2.

SHIFT-ALT-→ / ←: Expand/shrink selection

If you select a word and want to include the quotes (or brackets, or anything that surrounds a word), you can use SHIFT-ALT-RIGHT ARROW to expand your selection. For example, if your cursor is in the middle of every word, hitting SHIFT-ALT-RIGHT ARROW will select the entire words. Hitting SHIFT-ALT-RIGHT ARROW again will select the quotes around each word, and it will continue extending the selection every time you hit SHIFT-ALT-RIGHT ARROW. To shrink your selection, using SHIFT-ALT-LEFT ARROW.

Rectangular Selections

You can use rectangular selections to edit … well, rectangular areas of text.

SHIFT-ALT-Drag: Create rectangular selection

If you hold SHIFT and ALT while dragging your mouse, it will create a rectangular selection area, regardless whether there is text under the selection or not.

SHIFT-ALT-CTRL-Arrows: Create rectangular selection (keyboard-only)

You can also select a rectangular area from your current cursor position by using your arrow keys while holding SHIFT-ALT-CTRL.

You can also use SHIFT-ALT-CTRL-PG UP and SHIFT-ALT-CTRL-PG DOWN to extend your rectangular selection by an entire page.

Other shortcuts to use with multi-cursor

These shortcut key combinations are not unique to multi-cursor editing, but — when used with multi-cursor editing — they can be quite useful.

CTRL-L: Select entire line

You can select the entire line where your cursor(s) sit by hitting CTRL-L.

CTRL-→ / ←: Select to word boundary

Holding CTRL while using the left and right arrow will move the cursor to the next word boundary. A word boundary is anything that’s not an alpha-numeric character, like space, quote, hyphen, etc. If you hold SHIFT while doing CTRL-LEFT or CTRL-RIGHT, it will select from your current cursor position to the next word boundary.

Conclusion

Editing multiple with cursors in Visual Studio Code allows you to increase productivity by reducing repetitive steps and keystrokes.

I hope that you’ll enjoy using multiple cursors in the future!