Mar 30, 2019
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?!
“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 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.
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-↑ or CTRL-ALT-↓.
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.
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.
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!
To select all instances of the current word hit CTRL-F2.
If you select a word and want to include the quotes (or brackets, or anything that surrounds a word), you can use SHIFT-ALT-→ to expand your selection. For example, if your cursor is in the middle of every word, hitting SHIFT-ALT-→ will select the entire words. Hitting SHIFT-ALT-→ again will select the quotes around each word, and it will continue extending the selection every time you hit SHIFT-ALT-→. To shrink your selection, using SHIFT-ALT-←.
You can use rectangular selections to edit … well, rectangular areas of text.
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.
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 DN to extend your rectangular selection by an entire page.
These shortcut key combinations are not unique to multi-cursor editing, but — when used with multi-cursor editing — they can be quite useful.
You can select the entire line where your cursor(s) sit by hitting CTRL-L.
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-→ or CTRL-←, it will select from your current cursor position to the next word boundary.
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!