We're live-coding on Twitch! Join us!
Master VSCode File Editing Multi Cursor Workflows

Master VSCode File Editing Multi Cursor Workflows

Code Project

tl;dr: A couple of years ago, just like you, I was trying to learn all these power user workflows. Today is your lucky day because I am going to teach you how to deal with lines, how to juggle with words, and how to use multiple cursors with VSCode.

About a decade or so ago, I used to watch all the pro developers code like crazy hackers. They'll be talking about how to not write a recursion and then all of a sudden there it is. Multiple cursors editing multiple things at the same time.

I'd be like wow. I need to do that. That's what brought me to the Sublime Text Editor. Then as fate would have it, I became a web dev purist. In 2017 I switched to VSCode and haven't looked back yet. VSCode is super duper powerful, especially if you are a web developer. But this post is for everyone.

Over the years, I have built hundreds of VSCode Power Users Workflows. In this post, I am going to share ~15 file editing workflows that will improve your development workflow many folds. You'll not only enjoy writing code more, but you'll be pen down your ideas quickly.

VSCode File Editing Power User Workflows

I am going to share three types of power user workflows today. All of these can be used while editing lines of code, similar words , and my personal favorite; workflows of using multiple cursors.

🤔 You Should Know this before you proceed…

Before we start, I need to tell you that I am using macOS and when I say COMMAND (⌘) that should be CONTROL on Windows or Linux or other OS. And similarly, when I say OPTION, you should know that I mean ALT (⌥) on other OS.

  • OS: macOS vs Windows/Linux.
  • KEY: Command === Control
  • KEY: Option/Alt === Alt

One last thing, I am also using Sublime Text Keymap which changes the default keyboard shortcuts for me. I definitely recommend using such a keymap since it makes switching to VSCode a breeze. I teach all about it in my VSCode.pro course. You can find your exact keyboard shortcut through the Keyboard Shortcuts Editor. Open this editor by going to the menu under Code > Preferences > Keyboard Shortcuts (File > Preferences > Keyboard Shortcuts on Windows/Linux).

📺 If you prefer a video, then watch the one below for VSCode Multi Cursors, which is part of my VSCode course.

Essential Reading: Learn React from Scratch! (2019 Edition)

Learn everything about VSCode in this five hours 200+ tips/tricks course and use all of my workflows. I have a 70% off discount for this Cyber Monday. On top of it, I support Purchasing Power Parity through which you can get up to 80% off in ~149 countries. Go ahead, become a VSCode Power User

That's about it. Let's get started.

Workflow #1: Line Iterations

🤔 First thing first, our current workflow is line iterations. Let's say, my cursor is at the start of the line, and I want to move it to the end of the line. I have seen developers press the RIGHT key and hold it till they get to the end. That's no way to live your life.

🔥 You need to use the COMMAND (⌘) or CONTROL (⌃) key. See when you press and hold COMMAND (⌘) and then press the RIGHT key, it jumps the cursor to the end of the line. Similarly, when you press & hold COMMAND (⌘) and press the LEFT key, you are at the start of the line.

🤔 The next thing you do is how do you go word by word making your cursor go after each word, let's say, you want to add something here.

🔥 What I would do here is, I would press ALT (⌥) and then RIGHT that'll take us forward word by word. And when I press ALT (⌥) and LEFT key, the cursor moves backward in a similar word by word fashion.

🤔 Now what if you need to select while you are iterating over this line?

🔥 Well for that, you can add SHIFT (⇧) to the mix. For example, press & hold COMMAND (⌘) along with SHIFT (⇧) and when I press the LEFT key, all of that line gets selected.

And similarly, when I press and hold ALT (⌥) + SHIFT (⇧) and start moving to the right. I am selecting each word, one by one. I can also go back by the left key.

Workflow #2: Delete a Line

🤔 Now let's move to our second workflow. How do you delete a line of code? I have seen people select all the lines and then press DELETE. Or they cut that line, putting it in the clipboard for no reason at all.

🔥 What you can do instead is, your cursor could be anywhere, let's say, in the middle of the line here. All you have to do is press COMMAND (⌘) + SHIFT (⇧) + K and the line is gone, deleted!

🔥 Let's press COMMAND (⌘) + Z to undo the deletion and let's delete the first line. COMMAND (⌘) + SHIFT (⇧) + K. It's not in your clipboard or anything. It's just gone. Truly deleted without polluting your clipboard.

Workflow #3: Duplicate a Line

🤔 The next workflow here is, how can we duplicate a line. Maybe you are writing a JavaScript object and you need to duplicate a key-value pair.

🔥 Your cursor could be anywhere, in the middle of the line. All you have to do is, press ALT (⌥) + SHIFT (⇧) + DOWN this will duplicate this line below. Or you can also duplicate this line above by pressing ALT (⌥) + SHIFT (⇧) + UP . Easy, eh!

Workflow #4: Cut/Copy/Paste

🤔 This next workflow is straightforward, but I have seen developers who don't know how easy it is to cut/copy/paste a line in Visual Studio Code.

🔥 Again, you can have your cursor at any place. You don't need to be at the end of the line or at the start of the line. Your cursor could be placed there in the center for what it's worth, and you would just have to press COMMAND (⌘) + X and then the line will get cut. Simple!

🔥 Or you can press COMMAND (⌘) + C to copy this line. Go to another line and then just press COMMAND (⌘) + V. There you have it.

One more thing that I see developers doing wrong is that they feel the need to move to the start of the line if they are going to paste a line.

That is not true. For example, check the pic below, I pressed COMMAND (⌘) + C. Now I can be in the first line, and when I press COMMAND (⌘) + V you see, the first line becomes the second line, and the first line moves down.

There's no need to go create a new line and paste at the end or the start of a line. Just paste where you want to.

Workflow #5: Move a Line

🤔 Let's see how easy it is to move a line up or down. For that my cursor is in the third line here. In the middle of the line really.

🔥 I am going to press and hold COMMAND (⌘) + CONTROL (⌃) And when I press UP arrow key my line, the entire line will go UP.

🔥 And then again when I press and hold COMMAND (⌘) + CONTROL (⌃) And when I press DOWN arrow key my line, the entire line will go DOWN.

Press and hold COMMAND (⌘) + CONTROL (⌃) and then the UP OR DOWN keys are here to serve you well.

Workflow #6: Next Occurrence

🤔 Sometimes you need to select the next occurrence of a similar word. For example, you see, there is this users word here. Check below:

I need to change the first three words that read users. So, my cursor could be anywhere inside or at the end of this users word.

🔥 I am going to press COMMAND (⌘) + D — this users word will get selected. And when I press COMMAND (⌘) + D again, the very next iteration of that same word i.e. the next users word will get selected.

🔥 COMMAND (⌘) + D again and there you have it. And let's change it to something like a new word user by removing s from the end in one go.

That's it. Simple but pretty useful. The multiple cursors help you change multiple things at the same time. Try it now. It feels like magic. I'm serious. If you have never done this before, open your VSCode editor and experience this multi-cursor workflow. I'll wait.

Workflow #7: All Occurrences

🤔 Now that you've done that, what if you want to select all occurrences of a word?! That's what you'll learn in this workflow. It's again a multi-cursor workflow. I love these simple tricks. For example, here is this word users.

I want to select all of the occurrences of the word users words. And change them to something else, for example, leads.

🔥 Make sure your cursor is around or inside a particular word that you are about to change. Now press COMMAND (⌘) + CONTROL (⌃) + G and all of these similar words that are users in this current file will get selected.

Yes, it's that time now. We can change them all to, let's say, leads.

Workflow #8: Move Selection to Next

🤔 Let's learn how to move your selection to the next same word. For example, I have selected this word students. But really, what I want is to be able to select the very next students word, which could be anywhere in this file.

🔥 So let's select this students word. Now to move my selection from this to the very next students word — what I can do is, I can press COMMAND (⌘) + K and COMMAND (⌘) + D and it will select the very next word, students.

Workflow #9: Multi-Cursor

🤔 Now let's talk about one of my favorite workflows, the multi-cursor workflows. You are going to be using the mouse or keypad for this multi-cursor workflow.

SETTING: By default, VSCode ships with ALT (⌥) as the multi-cursor modifier. This is not OK with me. So, go ahead and turn it back to the COMMAND (⌘) key before someone sees you. Use the following setting in your settings.json file "editor.multiCursorModifier": "ctrlCmd". Or you can just search for multiCursorModifier in the Settings UI and change it to ctrlCmd.

OK, let's get back to our multi-cursor workflows. Say you want to change all of these background colors to a one single, similar color.

🔥 What you can do is, you can press and hold the COMMAND (⌘) key and then click wherever you want. My cursor is growing in size, and now I can select all the color codes and change them all to a new color.

Again, press and hold COMMAND (⌘) and then click. Now all these areas are editable. See how easy is it is. At the same time, it's super useful. Go ahead and try it out before you forget.

Workflow #10: Multi-Cursor Drag

🤔 Is there a quicker way of creating multi cursors that are meant to select consecutive lines? Oh, yes, there is. I call it the Multi-Cursor Drag.

🔥 I can do it in a much larger way as well, for example, let's put our cursor at the start of line #7 and let's drag it down to the end of the file. See how many cursors we have. One cursor for every line from 7 to 20. Yay!

Workflow #11: Multi-Cursor Keyboard

🤔 Can we do this with keyboard only? I hear you. You want to create multi-cursors with the keyboard without even using a mouse or this keypad thingie. We are talking about power user workflows, after all. Power developers do not like to leave the keyboard.

🔥 Well, you can do that very easily. For example, let's again do the same thing here. Change the background colors of all these buttons to white or tomato. I am going to press & hold COMMAND (⌘) + ALT (⌥) and then I am going to press the DOWN key. Just like that, I have three cursors.

Now I can select them and add tomato here instead. Yes, tomato is a real color in CSS, and it's pretty flippin' awesome.

Now I can press ESCAPE to escape out of these multi-cursors. Similarly, I can go up as well. Press & hold COMMAND (⌘) + ALT (⌥) and press the UP key to create multi-cursors. There you go, edit away.

Workflow #12: Multi-Cursor Selection (Keyboard)

🤔 But Awais, can we select a couple of lines with the keyboard and just create multi-cursors for each of the selected lines?! Now you're just mocking me, aren't you? Yes, definitely, we can do that.

Let's do the multi-cursor selection thing with just your keyboard. What I want are three cursors. I am going to use keyboard only to do this by pressing & holding SHIFT (⇧) and then DOWN to select these three lines. Just like we did in the first workflow.

🔥 Now I am going to press COMMAND (⌘) + SHIFT (⇧) + L — there you go, we have three cursors in front of all the three selected lines.

🔥 Let's select all of this file with COMMAND (⌘) + A and then if you press COMMAND (⌘) + SHIFT (⇧) + L it will put cursors after every single line. But you don't need to go that crazy. Haha.

Workflow #13: Undo the Last Multi Cursor

🤔 Most of the times when you go crazy while creating multi cursors you end up with one or two extra cursors that you didn't need. I have seen developers press the ESCAPE key and redo all that only to end up with another extra cursor. Guess what you can undo the cursors.

🔥 The last one here is, how to undo the extra cursors. Imagine you wanted to change these colors. You pressed COMMAND (⌘) + ALT (⌥) and then DOWN, DOWN, and there is this extra cursor that you didn't need.

🔥 Press COMMAND (⌘) + U and it will undo the last cursor action.

It's also true for your mouse and keypad. Click at the start of line 17, press & hold COMMAND (⌘) + SHIFT (⇧) and then drag it to the end. We didn't need this last one cursor on line #20.

🔥Again, press COMMAND (⌘) + U and there, the extra cursor is gone.

There're More VSCode Workflows

I hope you liked the file editing power user workflows. There's a lot more where this came from. After 10 years with Sublime Text, I switched to VSCode — the new open-source, cross-platform editor everyone's talking about, and most of the developers are using nowadays.

I've spent over 1,000 hours perfecting my setup to help you switch today. Bring all your custom settings and learn the power user workflows for HTML/CSS, GitHub/Git & Open Source, supercharged Markdown, and everything from JavaScript to PHP, Go, Python, C++, C#, ROR & 50+ Extensions. I'm sharing it all in a five hours — 65 videos online course.

I have a 70% discount for this Cyber Monday. On top of it, I support Purchasing Power Parity through which you can get up to 80% off in ~149 countries. Go ahead, become a VSCode Power User → Use your code for good. Peace! ✌ ️

Like this article? Follow @MrAhmadAwais on Twitter