15 essential keyboard shortcuts for VS Code
These VS Code keyboard shortcuts are easy to learn, improve your workflow, and help you become a more productive developer.
A code editor is one of software development's most important (and often underrated) tools. A good code editor can make you significantly more productive by providing features like syntax highlighting, auto-completion, and code navigation. And while there are many great code editors, my favorite is VS Code.
VS Code has come a long way in recent years and has become a very powerful tool for developers. But to get the most out of it, you must learn its keyboard shortcuts. Many of VS Code's keyboard shortcuts are similar to those found in other popular code editors like Sublime Text and Atom, so if you're already familiar with those shortcuts, you'll be able to pick up VS Code's quickly.
So without further ado, here are 15 keyboard shortcuts that every VS Code user should learn.
Watch the lesson
1) Move the cursor by one word
It's common for many people to take their hands off the keyboard to move their cursor a few spots down, but with this shortcut, you can quickly position the cursor one word at a time. Then you can use your arrow keys to fine-tune the position if needed.
Bonus tip: this keyboard shortcut can be used on other word editors like Google Docs and Notion!
2) Move the cursor by one word and select the word
Similar to the previous shortcut, but in this case, the words are selected as well. This makes it easy to quickly edit or remove text in your editor.
Bonus tip: this keyboard shortcut can be used on other word editors like Google Docs and Notion!
3) Move the current line up or down
Need a line somewhere else? Instead of selecting it, copying it, and pasting it where you need it, you can use this shortcut to quickly move it where you want.
4) Copy the current line up or down
Similar to the previous shortcut, this one is useful for copying the current line up or down as many times as you need.
5) Add a new line below
This may be the simplest yet most useful shortcode on the list! Have you ever had your cursor positioned in the middle of a current line and needed to add a row below? What would you do in this situation? Personally, I used to move the cursor to the spot below the current line to create a new line. However, this shortcut will create a new line below without moving the current line!
6) Add a new live above
Insert the explanation from the previous shortcut and insert it here, but with the caveat that the line is inserted above.
7) Move the cursor to the beginning or end of the current line
By now, you've probably realized a common theme: moving your cursor quickly is important for productive coding sessions. This shortcut is your friend when you need to move quickly to the beginning or end of the current line.
8) Select the current line
Click and drag your mouse–no! Don't do that. Just use this shortcut instead.
9) Delete the current line
Need to nix an entire line? Well, this shortcut is for you.
10) Find matching values
This shortcut is one of the first many developers learn because it makes it easy to quickly edit or remove duplicate values in a file. But there are a couple of problems you'll face when using this shortcut:
What do you do when you get to a value you don't want to select?
What do you do when you select an unwanted value by accident?
To answer these two questions, you'll need shortcuts 11 and 12.
11) Skip the next matched value
When using the previous shortcut, you may come across a value you do not want to select. If this is the case, simply use this shortcut to skip the value. Then proceed using shortcut 10 to select the following matches.
Bonus tip: This shortcut is a bit weird to learn at first because your first intuition maybe be to use it before the value you want to skip is selected. However, you will still want to use shortcut 10 to select the value, then use this one to tell VS Code not to include it. Then you'll proceed with shortcut 10 to select the next match.
12) Undo the last cursor operation
When finding matches with shortcut 10, it's inevitable that you'll accidentally select a value you intended to skip. If this happens, use this shortcut to undo the last cursor operation.
13) Quick Open panel
Besides cursor shortcuts, this has to be my most used keyboard shortcut because it's crucial for moving around your project quickly. When you use this shortcut, a panel will open where you can search for files by name. Then select the file you want to open, using your keyboard, of course.
14) Manually trigger suggestions
VS Code IntelliSense usually does a great job of giving your hints and autocomplete suggestions, but not all the time. Use this shortcut for the times you need to trigger suggestions manually.
15) Open the terminal
The terminal is where the magic happens, and also the errors. Commit your changes, start up your server, and install your 100th NPM package with this shortcut.
Conclusion
Keyboard shortcuts are an important part of any developer's workflow. They help you move quickly and easily through your codebase without taking your hands off the keyboard.
In this article, we've introduced you to 15 essential keyboard shortcuts for VS Code that will make you a more productive developer. If you're just getting started with these shortcuts, don't worry! It may take some time to get used to them, but eventually, they'll become second nature. Start by practicing these shortcuts in short bursts, then gradually increase the amount of time you spend using them each day. Soon enough, you'll be zipping around your project like a pro!