We all know that Visual Studio Code (VS Code) is a very powerful tool for programmers. Through this article, we will learn some of the most commonly used shortcut keys in VS Code, which will help us be more efficient when programming or writing code.
Use VS Code shortcuts to increase your coding speed and make you look like an expert when using this tool. Let's look at each shortcut key one by one.
1. Open the command panel
If you are new to the VS Code editor, this shortcut may be one of the most important keyboard combinations you learn.
The Command Palette provides access to all features, shortcuts, commands, and configuration options in VS Code.
You can invoke the command palette using the following keyboard combinations:
Windows — Ctrl + P
Mac — Command + P
2. Switch the comment line
Traditionally, you had to place your cursor at the beginning of a line of code and type / / (double slashes) to convert it to a comment.
VS Code provides an easier way to comment lines of code. Using this shortcut, you can toggle a comment line anywhere on the line where the cursor is.
Here are the shortcuts for switching lines of code on Windows and Mac.
Windows — Ctrl + /
Mac — Command + /
3. Switch terminal
VS Code (Visual Studio Code) has a built-in terminal where you can run all commands like starting a server (backend), running an application (frontend), changing directories (cd), installing packages, and more.
When building complex web applications I always keep the terminal open as I often install packages and also check the terminal to see if any of my running processes have crashed.
If you also need more workspace, you can close the terminal.
Here are the keyboard shortcuts for switching to Terminal on Windows and Mac:
Windows — Ctrl + `
Mac — control + `
4. Open user settings
Normally, when you want to change some settings, you click on the gear icon in the lower right corner, or set it up by navigating to File Menu - > Preferences - > Settings.
An easier option than using the mouse to click the clicks required to reach settings is to use shortcut keys.
You can use the following shortcut keys to open settings and make the required configurations.
In VS Code, you can change settings in the visual editor settings or in the JSON file of the settings.
Suppose you want to increase the font size to make the characters more visible, you can use the following shortcut keys to open settings, then search for font size and change it to the desired number, the change will take effect immediately.
Windows - Ctrl +，
Mac - Command +，
5. Move lines of code up or down
Usually when you want to move a line of code up or down, you choose to cut and paste or copy and paste the line of code.
When you copy and paste a line of code, you must delete the original line.
I know you usually choose to cut and paste a line of code because that's the better thing to do, but there are better, faster ways to move lines of code.
You can use the following commands to move a line of code down or up without having to copy and paste it and then delete the original line.
Windows: Alt + Up Arrow / Down Arrow
Mac: OPTION + Up Arrow / Down Arrow
6. Open the file tab
This shortcut is useful if you want to quickly move to another tab without using the mouse. Typically when creating an application, you open multiple files and use the mouse to click on a specific file for editing.
VS Code provides an easier way to switch between tabs without using the mouse.
Here are the commands to easily move from one tab to another without using the mouse.
Windows — Ctrl + Tab
Mac — control + Tab
7. Move files to split windows
VS Code allows for easy split view while editing files.
Normally, when you need a split view, you use the mouse to drag the file to the right to use the split editor.
The split editor can be customized as a grid, which is useful when you need to compare and edit multiple files simultaneously.
Here are the commands for using the split editor on Windows and Mac:
Windows — Ctrl + \
Mac — Command + \
8. Copy the line of code and move it up or down
We all have the habit of duplicating a line of code by copying and pasting it. When you want to copy a line of code, you can use the following keyboard combinations to copy it. You just need to make sure the cursor is on a line of code and copy it up or down using the following commands.
Windows - Shift + Alt + Up/Down Arrow
Mac - Shift + OPTION + Up/Down Arrow
9. Copy a certain piece of code and move it up or down
Suppose you want to copy a selected block of code up or down, your first thought might be to copy and paste the block. While this works, there is a better, faster way using the keyboard. To copy a selected block of code up or down on Windows and Mac, use the following commands.
Windows - ALT + SHIFT + UP ARROW/DOWN ARROW
Mac - OPTION + SHIFT + UP ARROW/DOWN ARROW
10. Place the cursor in multiple locations for editing
Another useful feature of VS Code is the ability to place the cursor in multiple locations.
Suppose you want to add list markers around some text variables or values. You can select all the variable list or text and then use Alt + Shift + I and then press the Home key (next to the Delete key) to move the cursor to the beginning of the variable list.
This is where multiple cursors come into play, you can just hold Alt + Shift + I to edit long lists in one go.
Windows - Alt + Shift + I, then press the Home key
Mac - Option + Shift + I, then press the Home key
Finish
When you master these common shortcut keys used in VS Code, you will edit and develop code more efficiently. These shortcut keys can help you quickly locate and edit code, thereby saving time and improving work efficiency. When you start using these shortcut keys, you may feel uncomfortable, but as time goes by, you will find that these shortcut keys have become your habit, making your work smoother and more efficient. Let's master these shortcut keys in VS Code to make our code editing work easier and more enjoyable!
That’s it for today’s sharing. Thank you for reading. If you like my sharing, don’t forget to like and forward it so that more people can see it. Finally, don’t forget to follow “Front-End Expert”, your support will be mine. Sharing the biggest motivation, I will continue to output more content in the future, so stay tuned.
原文：
https://medium.com/gitconnected/10-most-used-vs-code-shortcuts-that-every-programmer-must-know-8601bef95433Author: Dilip Kashyap
It is not a direct translation. There are some self-adapted and added parts. The translation level is limited and there are inevitable omissions. Corrections are welcome.