42 Visual Studio Code Shortcuts You Need to Know. Visual Studio Code is a popular code editor that offers a variety of features to help you be more productive. One way to boost your productivity is to learn and use keyboard shortcuts.
In this article, we’ll go over some of the most useful Visual Studio Code shortcuts that will save you time and supercharge your development when using Visual Studio Code. This article covers default keyboard shortcuts for Windows, Linux and macOS.
Visual Studio Code (VS Code) is one of the most popular and most used code editors. It’s open source and free to use. It also provides support for many languages and frameworks, whether through built-in features or the extensive list of extensions available for the editor.
Please note that these Visual Studio Code shortcuts are taken from VS Code’s documentation. If some shortcuts don’t work, it could be due to changes in shortcuts in your editor or file format, or sometimes due to extensions installed.
This section presents all the Visual Studio Code shortcuts that allow you to navigate different parts of the editor.
Searching for a specific file, especially as the project gets larger, can chew up a lot of time. Even if you already know where the file is, it’s definitely handy to learn this keyboard shortcut to easily open files in your project.
Visual Studio Code comes with a lot of features and settings that you can change to fit your needs. This keyboard shortcut makes it easier to get to the settings whenever necessary.
A lot of times you need more space for the open file you’re working on. So, this keyboard shortcut is handy to show or hide the sidebar whenever necessary.
When you have a lot of tabs open and you need to move between them, one easy way to do it is with this keyboard shortcut, which shows you the list of the tabs and lets you navigate between them and choose which one you want to open.
Keep pressing tab to switch between tabs.
One of the nice features that Visual Studio Code provides is creating tab groups. Tab groups allow you to split up your tabs into groups, and each editor group takes a part of the screen.
This keyboard shortcut makes it easier and faster to navigate between groups in the editor group history. This shortcut also allows you to create a new group if the editor group you select in the shortcut is higher than the number of groups currently open.
During your development, you’ll most likely be using the terminal a lot. Visual Studio Code allows you to open a terminal window right inside the editor. This saves you from moving between the editor and the terminal and allows you to completely focus on the editor and the code.
There are lots of commands you can execute in Visual Studio Code. These commands can be related to out-of-the-box features or extension features.
With this keyboard shortcut, you can easily open the command palette. The command palette allows you to search through the commands you can use and execute them.
During development, you’ll most probably need to make selections in your code, whether for copying, cutting, or other purposes.
Instead of doing so with your machine’s mouse, doing it with the keyboard saves you time. These keyboard shortcuts focus on making selections quickly.
A lot of times you need to select the entire current line your cursor is at. This keyboard shortcut makes it very simple.
How many times do you need to rename a variable, or simply change a certain repeated text or phrase throughout the entire file you’re working with?
Two keyboard shortcuts can be used in a situation similar to this. The first requires you to already have the word or phrases selected, while the other doesn’t.
Current selection
With this keyboard shortcut, all you need is to have one occurrence of the text you’re looking for in the file selected. Then, by pressing the keys of the shortcut, you’ll select all its occurrences in the file.
Current word
This keyboard shortcut allows you to do the same as the previous one, but without having anything selected. While the cursor is placed on a word, you can press the keys of this shortcut and the current word with all of its occurrences in the current file will be selected.
Note: on macOS, make sure to press fn at the same time as F2.
When selecting a certain part of the code, you can easily move and expand the selection with this shortcut. You can use the right arrow or the left arrow to go in the direction you want.
Mastering these keyboard shortcuts will boost your development speed and makes you a coding hero. These keyboard shortcuts allow you to select across multiple lines to make necessary modifications or additions.
This saves you from repeating yourself and saves you the additional time you’d spend doing the same operation across multiple lines.
Dragging your cursor across lines of code or text selects each line from end to end. But you can also select a group of lines only partially with this shortcut. Multiple lines will be selected, but only as much of them as you drag over.
You can do the same as above but without using your mouse. Instead of dragging a mouse, you use they keyboard arrow keys.
All editors, even simple editors, should have a find feature so that you can find certain words, like function or variable names, phrases, or blocks of code either in the current selected file or across multiple files.
This section will go over keyboard shortcuts that will allow us to make the best out of the results of using the find feature in Visual Studio Code.
You can use this keyboard shortcut to move between find results in the active file.
Note: on macOS, make sure to press fn at the same time as F3.
If you’re using the find feature to find certain bits of text so that you can modify a subset of these results, you can use this shortcut to navigate and select the find results in the active file.
If you’re using the find feature to do certain modifications with all the find results, this keyboard shortcut allows you to select all the find results.
As each file or project grows, it becomes harder to find certain parts of the code. Finding errors or going to the code at a certain line can be hard when doing it manually.
These keyboard shortcuts save you the hassle and allow you to invest your time in what you actually want to do.
Finding code at a certain line is especially helpful when you get a compile or runtime error that specifies what line of code caused it. This keyboard shortcut eliminates the need to actually find the line yourself.
You’ll often find yourself needing to find the matching closing bracket of a block. This is especially true when the files grow with time. This keyboard shortcut allows you to easily find the closing matching bracket of the current block. In HTML tags, it allows you to move to the end of the current tag.
When reading a file with a lot of lines or data, it’s easier to fold (hide) an entire block that you’re not currently focusing on so you can focus on something else. This keyboard shortcut allows you to fold or unfold a block. Click anywhere in the block and then hit the following keys.
What if the block contains sub-blocks? Using the above command will fold the parent, but when the parent is unfolded the sub-blocks will have been unchanged. If you need to fold and unfold a block and its sub-blocks, you can do it with this keyboard shortcut.
Finding errors and warnings in your code is essential. Sometimes some errors are not easy to find — such as when a line doesn’t end with ;
as it should. This keyboard shortcut saves you the hassle of scrolling or thoroughly looking through the line to find the exact problem. It allows you to move to the next error or warning.
Note: on macOS, make sure to press fn at the same time as F8.
In a lot of cases, you might need to have multiple cursors, each at a different position in the file. These keyboard shortcuts help to make it easier to move around with multiple cursors.
There are two ways to insert an additional cursor into the file: either at a specific position, or above/below the current line the cursor is at.
1. At position
This keyboard shortcut allows you to insert an additional cursor at any point in the file.
2. Above or below
The second way you can insert a cursor is to insert it above or below each of the current cursor positions.
What if you inserted a cursor by mistake, or realized later that you don’t want to insert the cursor at that position anymore? This keyboard shortcut allows you to undo the last cursor insert. This is very helpful when you’ve inserted multiple cursors, as it allows you to keep the others in place and just removes the last inserted one.
Another keyboard shortcut that makes your development faster is to insert the cursor at the end of a highlighted selection.
In this section, we’ll go through Visual Studio Code shortcuts that will make certain operations related to your code easier and quicker.
A lot of times you might need to move a line from one position to another. Instead of copying or cutting and pasting the line into another position, this shortcut offers a faster solution. Just place the cursor on the line.
This will also move a whole paragraph of text that the cursor is active in. If you want to move a block of code, simply highlight that code before pressing the shortcut above.
What if you need to copy a line and paste it below or above?
Instead of having to actually copy and paste the line, this shortcut duplicates the line either below or above it, based on the direction chosen with the arrows.
To move a block of text or code in the same way, highlight it first and then use this shortcut.
As you copy lines from one place or file to another, or as you make changes to the code, a lot of times the code will end up wrongly indented. This shortcut allows you to easily indent or outdent lines as necessary. Select multiple lines to move them all together.
In a lot of cases, you might need to comment or uncomment a line. This can be easily done with this shortcut. This works for both line and block comments.
Line Comments
Click on the line you want to comment out. (If you highlight a block of code, this command will comment out each line individually.)
Block Comments
Unlike the above shortcut, the following shortcut will comment out the code you highlight as a single comment.
It’s essential to keep your code and files formatted for readability reasons. Visual Studio Code provides two shortcut commands for code formatting.
File
This shortcut allows you to format the entire file.
Selection
This shortcut allows you to format just the selected set of lines in a file.
In a lot of cases when there’s an error, Visual Studio Code can resolve it if it’s a common or simple mistake — for example, if a semicolon ;
is missing. This shortcut allows you to apply the quick fix to any error or warning if the quick fix is available for it.
Renaming a variable, function, or class that’s used multiple times can be prone to errors if done manually. You might miss a usage of it whether in the current file or a different file. This shortcut gives you a safe way to rename any symbol.
Note: on macOS, make sure to press fn at the same time as F2.
Why manually trim white spaces from the end of a line when you can just do it with this shortcut?
Note: holding ctrl or command throughout, press K first, then X separately.
By default, Visual Studio Code detects the current programming language of the file you’re working on. Usually, it’s done by checking the extension of the file.
However, sometimes it doesn’t correctly detect the language if the extension of the file isn’t supported.
For that reason or any other reason, if you need to change the programming language of a file you can use this shortcut.
One cool VS Code feature is the option to run code right in the editor. This depends on the language, framework, or the kind of task you need to run. For example, you can set up debugging for Javascript projects. However, if you have a debugger or task runner configured, you can use this shortcut to run code in VS Code.
Note: on macOS, make sure to press fn at the same time as F5.
These keyboard shortcuts revolve around understanding the code that we’re working with to produce better code.
To write good quality code, we need to understand the functions, classes, or methods we’re using.
Sometimes, we resort to googling a function to see its definition or signature. However, this might end up wasting our time or it might not apply to the code we’ve created.
It’s essential to understand the definition of the code we’re using before actually using it. These Visual Studio Code shortcuts allow us to see their definition and documentation easily from the editor.
Go to definition
This shortcut takes us to the file or line where the part of code is initially defined.
Note: on macOS, make sure to press fn at the same time as F12.
Peek definition
This shortcut allows us to open definition and documentation in the same place we’re checking the definition. This makes it easier to see the definition without the need to move to another file or line.
Note: on macOS, make sure to press fn at the same time as F12.
While writing our code, VS Code or some of the extensions we’ll have installed will show us suggestions for our code. This shortcut allows us to toggle the suggestions to see or hide them.
This is very common with most, if not all developers. We tend to forget functions’ signatures, even when they’re functions that we use a lot. With this shortcut, you can easily see parameter hints for the function. With the parameter hints, you can check what parameters you need to pass to the function.
Although this is not related to understanding the code and definitions, this shortcut is useful if you need to be completely focused on your code. With this shortcut, you can enable Zen mode, which will change the display to be completely focused on the currently open file.
Press the same keyboard shortcut to return to the normal editor view.
VS Code is one of the best code/text editors for developers at the moment. It provides a lot of out-of-the-box features as well as an extension marketplace that allows developers to easily contribute and provide extensions for the community.
Keyboard shortcuts make development in VS Code even easier and allow you to focus on building good-quality projects in less time.