Memorize these VSCode shortcuts to improve your development efficiency!

This article summarizes some VSCode shortcuts recorded in official documents that can improve efficiency. Memorize them to improve development efficiency! !

Visual Studio Code is one of the most popular and commonly used code editors. It is open source and free to use. It also provides support for multiple languages ​​and frameworks. [Recommended study: "vscode Getting Started Tutorial"]

Note that these Visual Studio Code shortcuts are taken from the VS Code official documentation. If some shortcuts don't work, it may be because the shortcut has changed in the editor or file format, or an extension has been installed that is affecting the shortcut.

1. Quick Navigation

1. Search for files

When you need to search for specific files, and when the project is large, it will take a lot of time. Even if you already know where the file is, using this shortcut key will be very convenient to easily open the file in the project.

• Windows/Linux: ctrl P
• macOS: command P

2. Open settings

Visual Studio Code has many features and settings that can be changed as needed. This shortcut makes it easy to open settings when necessary.

• Windows/Linux: ctrl ,
• macOS: command ,

3. Switch side Sidebar

Many times, we need more space to place the files we need to process. Therefore, this shortcut key can conveniently show or hide the sidebar.

• Windows/Linux: ctrl B
• macOS: command B

4. Navigation tab

When you have many tabs open and need to switch between them, you can use this shortcut key, it will display the tab list and navigate between them, we can select the tab to open.

• Windows/Linux: ctrl shift tab
• macOS: control shift tab

5. Navigation tab group

Visual Studio Code provides the function of creating a tab group. Tab groups allow us to group tabs, each taking up a portion of the screen. Use this shortcut key to switch between different tab groups. If the tab group selected in the shortcut is greater than the number of groups currently open, this shortcut creates a new group.

• Windows/Linux : ctrl 1 or 2 or 3
• macOS: command 1 or 2 or 3

6. Open the terminal

During the development process, the terminal will be used frequently. Visual Studio Code allows us to open a terminal window within the editor. This eliminates the need to switch between the editor and the terminal, allowing us to focus on the editor and code.

• Windows/Linux: ctrl J
• macOS: command J

7. Open the command panel

We can execute many commands in Visual Studio Code. Use this shortcut key to easily open the command palette. The command palette allows searching for available commands and executing them.

• Windows/Linux: ctrl shift P
• macOS: command shift P

2. Quick selection

During the development process, it is often necessary to make selections in the code, including copying, cutting and other operations. Instead of using the mouse, you can save time by using the keyboard. These shortcut keys focus on making selections quickly.

1. Select the current line

You can use this shortcut key to quickly select the entire line of code in the line where the cursor is.

• Windows/Linux: ctrl L
• macOS: command L

2. Current selection

Use this shortcut key to only select the text you want to find once, and you can select all this text in the file, so that you can edit these texts at the same time.

• Windows/Linux : ctrl shift L
• macOS : command shift L

3. Current Word

This shortcut performs the same action as the shortcut above, but without selecting anything. When the cursor is placed on a word, press this shortcut key to select all positions of this word in the current file.

• Windows/Linux: ctrl F2
• macOS: command F2 fn

4. Select until the end of the word

When you select a portion of the code, you can move and expand the selection of this shortcut. You can use the right or left arrow to go in the direction you want.

• Windows/Linux : shift alt → or ←
• macOS : shift option → or ←

5. Select multiple lines of code by dragging the mouse

Drag the cursor over the code to select each line from beginning to end. But you can also use this shortcut to select partial lines of code, but only multiple lines of code you drag.

• Windows/Linux : shift alt drag the cursor
• macOS : shift option drag the cursor

6. Use arrow keys to select multiple lines of code

You can also perform the above operations using this shortcut key, but instead of using the mouse, use the arrow keys on the keyboard.

• Windows/Linux : ctrl shift alt → or ← or ↓ or ↑
• macOS : command shift option → or ← or ↓ or ↑

3. Quick search

All editors have a search function so that you can search in the current file or multiple files Certain words, such as function or variable names, phrases, or code blocks, etc. Let’s take a look at the shortcut keys related to the search function.

1. Result Navigation

You can use this shortcut key to move between search results in the file.

• Windows/Linux：F3
• macOS：F3 fn

2. Select multiple Results

If you want to modify multiple search results, you can use this shortcut key to select multiple contents in the search results in the file. Each time you press this key, one result will be selected, and then you will press Search results are selected in order.

• Windows/Linux : ctrl D
• macOS : command D

3. Select all results

If you want to use the search function to modify all search results, this shortcut key can select all search results.

• Windows/Linux: alt enter
• macOS: option enter

4. Code Navigation

As a file or project becomes more complex, it becomes increasingly difficult to find certain parts of the code. It can be difficult to manually find errors or go to a certain line of code. The following shortcut keys can save a lot of trouble, allowing us to devote more time to what we really want to do.

1. Jump to the specified line

When you encounter a specified line of code that causes a compilation or runtime error, you can use this shortcut key to jump to this line of code. Just press this Shortcut key, enter the number of lines of code, and press Enter to jump to this line of code. This shortcut is very useful when there is a lot of code in a file.

• Windows/Linux: ctrl G
• macOS: control G

2. Go to the matching bracket

We may need to find the closing bracket of the matching code block. It's difficult when the file is long. Use this shortcut to easily find the closing matching bracket for the current block. In HTML tags, it can be moved to the end of the current tag.

• Windows/Linux : ctrl shift \
• macOS : command shift \

3. Collapse/expand code blocks

When files contain a lot of code, we can collapse (hide) a certain code block that we are not currently focusing on so that we can focus on other content. This shortcut key is used to collapse or expand code blocks. Just click anywhere in the code block and press the following keys.

• Windows/Linux : ctrl shift [or]
• macOS : command option [or]

4. Collapse/expand code blocks and sub-code blocks

What if a code block contains sub-code blocks? Using the above command will collapse the parent code block, but when the parent code block is expanded, the child code block will remain unchanged. If you need to collapse and expand a code block and its sub-code blocks, you can use this shortcut to do it.

• Windows/Linux : ctrl K [or]
• macOS : command K [or]

4. Navigate to Errors and Warnings

It is crucial to find the code where errors and warnings occur in your code. This shortcut saves you the trouble of scrolling to find the exact problem. It can go directly to the next error or warning.

• Windows/Linux：F8
• macOS：F8 fn

5. Move the cursor

In many cases, it may be necessary to have multiple cursors, each located at a different location in the file. These shortcuts make it easier to move around with multiple cursors.

1. Insert an extra cursor at a specific position

This keyboard shortcut can insert an extra cursor anywhere in the file.

• Windows/Linux : alt mouse click position
• macOS: option mouse click position

2. Insert an additional cursor above or below

The second way to insert a cursor is to insert it above or below the current cursor position.

• Windows/Linux : ctrl alt ↓ or ↑
• macOS : command option ↓ or ↑

3. Undo cursor insertion

What if the cursor is inserted by mistake, or the cursor is no longer needed at that location? This shortcut undoes the last inserted cursor. This shortcut key is useful when inserting multiple cursors, as it keeps the other cursors in place and deletes the last inserted cursor.

• Windows/Linux : ctrl U
• macOS : command U

4. Select Insert the cursor at the end of the code

Use this shortcut key to insert the cursor at the end of each line of selected code.

• Windows/Linux : shift alt I
• macOS : shift option I

6. Quick coding

1. Move lines or blocks of code

Many times you need to move one or more lines of code from one location to another. Instead of copying or cutting and pasting the code to another location, this shortcut provides a faster solution by simply placing the cursor over the line of code. If you want to move multiple lines of code, just select the code you want to move and then use this shortcut key.

• Windows/Linux : alt ↓ or ↑
• macOS: option ↓ or ↑

2. Copy lines or blocks of code

What if you need to copy one or more lines of code and paste them below or above? Instead of actually copying and pasting the code, this shortcut copies the line below or above it depending on the direction you select with the arrows. If you want to copy multiple lines of code, just select the code to be copied and then use this shortcut key.

• Windows/Linux : shift alt ↓ or ↑
• macOS : shift option ↓ or ↑

3. Code indentation

When copying code from one location to another, or when changing code, many times the code will have incorrect indentation. This shortcut allows you to indent the code as needed, or select multiple lines of code to move them together.

• Windows/Linux : ctrl [or]
• macOS : command [or]

4. Switch code comments

Use this shortcut key to comment or uncomment the line of code where the cursor is. If you want to comment or uncomment multiple lines of code, you only need to select the multiple lines of code first.

• Windows/Linux: ctrl /
• macOS: command /

5. Switch code block comments

Different from the above shortcut keys, the following shortcut keys will comment the selected multiple lines of code into a single comment.

• Windows/Linux : shift alt A
• macOS : shift option A

6. Code Format

For readability reasons, it is important to maintain the format specified by the code. Visual Studio Code provides two shortcut commands for code formatting.

The following shortcut keys can format the code in the entire file:

• Windows/Linux: ctrl shift F
• macOS : option shift F

The following shortcut keys can format the selected code:

• Windows/Linux : ctrl K, then ctr l F
• macOS : command K, then command F

7. Quickly fix errors

In many cases, if a common or simple error, Visual Studio Code can fix it directly - such as a missing semicolon. If Quick Fix is ​​available, this shortcut can quickly fix errors or warnings.

• Windows/Linux : ctrl .
• macOS : command .

8. Rename

It is easy to make mistakes if you manually rename variables, functions or classes that are used multiple times. This shortcut provides a safe way to rename any symbol.

• Windows/Linux: F2
• macOS: F2 fn

9. Delete whitespace

You can use the following shortcut keys to delete extra blank lines:

• Windows/Linux : ctrl K X
• macOS : command K

10. Change the programming language

By default, Visual Studio Code detects the programming language of the file being processed. Usually, it's done by checking the file's extension. However, if the file's extension is not supported, the language may not be detected correctly. Therefore, when you need to change the programming language of a file, you can use this shortcut key.

Windows/Linux

: ctrl K, then press M
• macOS
: command K, then press M
• 7. Better Coding

1. Go to the definition

Many times, we need to understand the definition of the code we are using. For example, when calling a function and want to know how the function is defined, you can use this shortcut key.

Windows/Linux

：F12
• macOS
：F12 fn
• 2. View definition

This shortcut key can open the definition where the definition is checked. This makes it easier to view definitions without having to switch to another file or line of code.

Windows/Linux

: alt F12
• macOS
: option F12 fn

3. Switch suggestions

When writing code, VS Code or some extensions will display code suggestions. This shortcut lets you quickly toggle code suggestions to view or hide them.

Windows/Linux

: ctrl I
• macOS
: command I
• VS Code is currently One of the best code editors. It provides many out-of-the-box features and rich third-party extensions. Using shortcut keys in VS Code can make development easier, allowing us to focus on writing high-quality code in less time. This article introduces some practical Visual Studio Code shortcut keys, hoping to help you improve development efficiency!

Finally, here are the shortcut keys for VS Code in Windows, Linux, and macOS systems:

For more knowledge about VSCode, please visit: vscode tutorial

! !

The above is the detailed content of Memorize these VSCode shortcuts to improve your development efficiency!. For more information, please follow other related articles on the PHP Chinese website!