This is the 10th day of my participation in the First Challenge 2022, for more details: First Challenge 2022

Visual Studio Code is one of the most popular and commonly used Code editors available today. It is open source and free to use. It also provides support for multiple languages and frameworks.

Note that these Visual Studio Code shortcuts are taken from the official VS Code documentation. If some shortcuts do not work, it may be because the shortcut in the editor or file format has changed, or an installed extension has affected the shortcut.

First, fast navigation

1. Search for files

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

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

2. Enable Settings

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

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

3. Switch the sidebar

Many times, we need more space to put the files we need to work on. Therefore, this shortcut makes it easy to show or hide the sidebar.

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

4. Navigation TAB

This shortcut is used when you have a number of tabs open and need to switch between them. It displays a list of tabs and navigates between them, allowing you to select which TAB to open.

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

5. Navigate to TAB groups

Visual Studio Code provides the ability to create TAB groups. TAB groups allow us to group tabs, and each TAB group takes up a portion of the screen. Use this shortcut to switch between different TAB groups. This shortcut creates a new group if the TAB group selected in the shortcut is greater than the number of groups currently open.

  • Windows/Linux: CTRL + 1 or 2 or 3
  • MacOS: Command + 1 or 2 or 3

6. Open the terminal

During development, you will use terminals frequently. Visual Studio Code allows us to open terminal Windows in 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 to open the command panel easily. The command panel allows you to search for available commands and execute them.

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

Second, quick selection

In the development process, you often need to make choices in the code, including copying, cutting, and so on. Instead of using the mouse, use the keyboard to save time. These shortcuts focus on making choices quickly.

1. Select the current line

You can use this shortcut to quickly select the entire line of code on which the cursor is located.

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

2. Current selection

Using this shortcut, you can select all of the text you want to find in a file by selecting it once, so that you can edit the text at the same time.

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

3. Current words

This shortcut performs the same action as the above shortcut, but you do not need to select anything. When the cursor is over a word, press this shortcut to select all positions of the word in the current file.

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

4. Choose until the end of the word

When selecting a part of the code, you can move and expand the selection of this shortcut. You can use the right arrow or the left arrow to move in the desired direction.

  • Windows/Linux: Shift + Alt + → or ←
  • MacOS: Shift + Option + → or ←

5. Drag the mouse to select multiple lines of code

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

  • Windows/Linux: Shift + Alt + drag the cursor
  • MacOS: Shift + Option + drag the cursor

6. Use the arrow keys to select multiple lines of code

You can do the same with this shortcut key, but instead of using a mouse, use the arrow keys on the keyboard.

  • Windows/Linux: CTRL + Shift + Alt + ← or ↓ or ↑
  • MacOS: Command + Shift + option + → or ← or ↓ or ↑

Three, quick search

All editors have find capabilities so that certain words, such as function or variable names, phrases, or code blocks, can be looked up in the current file or multiple files. Here’s a look at some shortcuts related to finding functions.

1. Result navigation

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

  • Windows/Linux: F3
  • MacOS: F3 + FN

2. Select multiple results

If you want to modify multiple search results, you can use this shortcut to select multiple items from the search results in a file, each time you press this key you select a result, and then you select it in the order of the search results.

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

3. Select all outcomes

This shortcut allows you to select all of the results if you want to modify them using the find function.

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

Code navigation

As a file or project becomes more complex, it becomes more difficult to find parts of the code. Manually finding errors or going to a line of code can be difficult. These shortcuts can save a lot of trouble and allow us to spend more time on what we really want to do.

1. Jump to the specified line

When a specified line of code causes a compilation or runtime error, you can use this shortcut key to jump to this line of code. Simply press this shortcut key, enter the number of lines of code, and press Enter to jump to this line of code. This shortcut is useful when a file has a lot of code.

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

2. Go to the matching brackets

We might need to look for the close bracket that matches the code block. It’s difficult when the file is long. Use this shortcut to easily find the right 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

In files that contain a lot of code, we can fold (hide) a block of code that we’re not currently focused on so we can focus on something else. This shortcut is used to collapse or expand blocks of code. Click anywhere in the code block, then press the following key.

  • Windows/Linux : ctrl + shift + [或]
  • MacOS: Command + option + [or]

4. Collapse/expand code blocks and child code blocks

What if a code block contains child code blocks? Using the command above collapses the parent block, but when the parent block is expanded, the child block remains unchanged. If you need to collapse and expand a code block and its children, use this shortcut to do so.

  • Windows/Linux : ctrl + K + [或]
  • MacOS: command + K +

4. Navigate to errors and warnings

It is important to look for errors and warnings in your code. This shortcut saves scrolling to find the exact problem. It can go straight to the next error or warning.

  • Windows/Linux: F8
  • MacOS: F8 + fn

Move the cursor

In many cases, you may need to have multiple cursors, each 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 inserts an additional cursor anywhere in the file.

  • Windows/Linux: Alt + mouse click position
  • MacOS: Option + Mouse click position

2. Insert an extra cursor above or below it

The second way to insert the 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 was inserted incorrectly, or is no longer needed in that position? This shortcut undoes the cursor that was last inserted. This fast key is useful when inserting multiple cursors, because it can hold the other cursors in place and remove the last cursor inserted.

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

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

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

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

Six, fast 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. Rather than copy or cut and paste the code to another location, this shortcut provides a faster solution by placing the cursor over the line of code. If you want to move multiple lines of code, simply 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, the shortcut copies the line below or above it, depending on the direction selected using the arrow. If you want to copy multiple lines of code, select the code you want to copy and then use this shortcut key.

  • Windows/Linux: Shift + Alt +↓ or ↑
  • MacOS: Shift + option +↓ or ↑

3. Indent code

When copying code from one location to another, or when changing code, many times the code gets indented incorrectly. This shortcut allows you to indent code as needed, or to move multiple lines of code together.

  • Windows/Linux : ctrl + [或]
  • MacOS: Command + [or]

4. Switch code comments

Use this shortcut to comment out or uncomment the line of code on which the cursor is located. If you want to comment or uncomment multi-line code, you only need to select the multi-line code first.

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

5. Toggle code block comments

Unlike the shortcut above, the following shortcut comments selected lines of code as a single comment.

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

6. Code format

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

The following shortcuts format the code in the entire file:

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

The following shortcuts 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 occurs, Visual Studio Code can fix it directly — for example, missing semicolons. This shortcut can quickly fix errors or warnings if quick fix is available.

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

8. Renamed

Manually renaming variables, functions, or classes that are used multiple times can be error-prone. This shortcut provides a secure way to rename any symbol.

  • Windows/Linux: F2
  • MacOS: F2 + FN

9. Delete the blank space

You can use the following shortcuts to remove extra blank lines:

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

​

Note: Press CTRL or Command all the time, then K, then X.

10. Change your programming language

By default, Visual Studio Code detects the programming language in which the file is being processed. Typically, this is done by checking the extension of the file. However, if file extensions are not supported, the language may not be properly detected. Therefore, when you need to change the programming language of the 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 definitions

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

  • Windows/Linux: F12
  • MacOS: F12 + FN

2. View the definition

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

  • Windows/Linux : alt + F12
  • macOS : option + F12 + fn

3. Switch suggestions

VS Code or some extensions show Code suggestions when writing Code. This shortcut allows you to quickly toggle code suggestions to view or hide them.

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

VS Code is one of the best Code editors out there. It offers a lot of out-of-the-box functionality and rich third-party extensions, and using shortcuts in VS Code makes development a lot easier, allowing us to focus on writing high-quality Code in less time. This article introduces some useful Visual Studio Code shortcuts to help you develop more efficiently!

Finally, attach VS Code shortcuts for Windows, Linux, and macOS: