Editing texts becomes so much easier when we use shortcuts. I think the most important part is that it makes me feel less tedious and more productive because it allows me to focus more on coding rather than typing.
In this article, We'll learn a few VSCode shortcuts and combine them with some basic shortcuts I shared last week. We'll go through a few examples where shortcuts can make our lives so much easier.
Let's open VSCode and do this together. On the top left toolbar section, there's a selection tab and it contains some features of selection. We will go through most of them. Note that the keybinding you see in the image might be different than yours because I configured some of them. But don't worry! I'll show you how to configure.
Dummy HTML for practice
<button class="BTN button-primary" data-call-to-action-btn> Yes </button> <form class="form"> <p class="heading">form</p> <button class="BTN b-success rounded btnnnn" data-submit-btn> Submit </button> <p>some text contains primary</p> </form> <button class="BTN b-success rounded" data-cancel-btn> No </button>
Sometimes we want to rename a variable or a class. Wouldn't it be nice if we can select them all and edit at once. Luckily, it's easy to do in VSCode.
If we currently don't have a selection, pressing
D will behaves like double click, which select the word our cursor is on. After we have a selection, press
D will find the next match instance and select it.
One thing to note that these two
Add Selection features by default is
Match Case and
Match Whole Word. But when we have search bar on, the configuration from the search bar is used.
Notice when I press
D to select "BTN", matched instance are exactly "BTN", but after I press
F to bring up the search bar, everything that includes "btn" are also matched because
Match Case and
Match Whole Word are turned off on the search bar.
Sometimes we want to select different things but edit them to the same or similar. We can do that by explicitly adding cursor and select multiple things. The shortcuts for Multi-Cursor can be toggled between
Click in the selection tab.
In VSCode, if you don't have any selection,
X can directly cut a line. I used it to quickly delete lines until I found a better option. The difference between
Delete Line is cut will also copy. If we use
Cut to delete empty lines, we will lose what we actually want to
When copy multiple lines we have many options, We can either select everything we want and use
V or use the copy line shortcuts.
Be careful when you want to move through the code that is commented and folded, it will unfold them which is unlikely what you expect. This unintentional move could be frustrated because we use shortcuts to work faster and this result cannot be undo by
Z. This is bad especially when our commented code is long.
This is useful when we have multiple things that need to be created to something similar.
When we switch file, we lose the previous multi-cursor, thus we need to use
Add Cursor Above / Below in order to do parallel move. We can use
P and search file name to switch to the file which is also a very useful shortcut.
Sometimes we want to wrap some elements within a new parent element, there is a feature for it.
P bring up the toolbar then type wrap. The option
Emmet: Wrap With Abbreviation is what we want. This feature doesn't have a default keybinding, but you can configure it by clicking the gear icon on the right side.
We cover so many shortcuts that can help us code faster in VSCode. In my opinion, if there is something we are going to use every day, it's definitely worth to spend some time to try and learn. These combinations will become intuitive as we practice more and use every day.