As front-end developers, most have used VSCode, and many use it regularly. But VSCode has some shortcuts that we probably don’t know about and don’t use much, which is good, so this article lists some shortcuts for you to learn and memorize.

In this article, I will list my favorite shortcuts that make writing code faster and coding more fun. Here are 21 VSCode shortcuts to share with you.

1. Search the text of all files at once

Windows: Ctrl + Shift + F

Mac: Command + Shift + F

One of my favorite features of VSCode is the ability to search through all the files in the project directory for any matching text.

To use this feature, press Ctrl + Shift + F to open the view, which displays the sidebar on the left side of the editor:




Enter what you’re looking for and press Enter, VS Code will provide a list of results that match your input, as follows:




You can also regulate all matches in each search file at the same time. If you click the little arrow on the left, it will bring up a second input box below, where you can enter the text you want to replace, and click the little box that appears on the right:




2. Set the Material Theme for the Tabs.

Are you tired of seeing the same tabs bottom color every day? You can extend VsCode’s Theme with the Material Theme so that different colors can be set for tabs.

Red:




Purple:




Yellow:




There are 16 different colors to choose from.

So if chest has this extension installed, open the command panel (Ctrl + Shift + P), select Material Theme: Set Accent Color and select a color from the list, it will change the underline color of the TAB as shown below




3. Process Explorer

Do you find your VsCode editor a little slow at times? Which process do you want to eat our memory at this point?

Well, in case you didn’t already know, VsCode has a process explorer feature that looks like this:




Look familiar?

You’ve seen this in Windows task manager, which can be opened by pressing Ctrl + Alt + Delete in VsCode.

4, Expand Bracket Selection

Open the keyboard shortcut (Ctrl + Shift + P or Command + Shift + P) and search for Expand Bracket Selection.

It took me a while to figure this out, because I couldn’t guess the name of the feature. Use this feature to automatically select the entire block, from the opening brace to the end.

I find this useful if I want to find an if/else terminating block.

5. Open the closed editing page again

Windows: Ctrl + Shift + T

Mac: command + Shift + T

When you’re working on a large project with lots of files, it can be a bit frustrating if you accidentally close a page and have to search for it again in the side menu.

Now, you can press Ctrl + Shift + T to reopen a closed page.

6. Open the file by matching the text

Windows: Ctrl + T

Mac: command + T

Speaking of searching files, you can search and open files dynamically. This is one of my favorite features because there is no need to manually click a directory to reopen a file that is no longer open.

7. Integration terminal

Windows: Ctrl + `

Mac: control + `

You can open or close the terminal by Ctrl + ‘

8. View running plug-ins

You can view all the running extensions you have installed by opening the command panel (Ctrl + Shift + P) and typing Show Running Extensions.

9. Reload

I personally think this is one of the coolest features of VsCode. It allows you to reload the editor with the window in front while having the same effect as closing and re-opening the window.

Windows: Ctrl + Alt + R

Mac: Control + Option + R

10. Swap tabs to different groups

During my development, I used to use tabs in the wrong TAB group. I also want to avoid using my mouse as much as possible to solve problems, because it makes me lift my hands off the keyboard, and I’m lazy and want to put them on the keyboard together.

Fortunately, VsCode has a way to move labels to the right group by pressing Ctrl + Alt + right arrow (Mac: Control + Option + right arrow), or Ctrl + Alt + left arrow to move labels to a separate TAB group (Mac: Control + Option + left arrow)) moves the label to the left group:

11. Select everything on the left/right

Sometimes you want to delete everything to the right or left of the cursor. You can select everything to the right or left of the cursor. For example, to select everything on the right or left:

Windows: Ctrl + Shift + Home/End

Mac: command + Shift + Home/End

The MAC doesn’t have a home button, so you can use combination keys

Fn key + left arrow key is HOME

The fn key plus the right arrow key is END

Fn + up arrow key is page Up

The fn+ down arrow key is page Down

12. Delete the last word

To delete the previous word, press Ctrl + Backspace (Mac: Option + delete). This is very useful when you have a typo.

You can use it anywhere outside of VsCode.

13. Startup performance

Sometimes, the lack of detailed information about performance issues can be a pain in the neck, while trying to figure out which ones are.

Sometimes, if you’re lucky, you’ll find a tool that gives you all the answers. Startup performance is important in VsCode. That’s why you can pop up a useful window that miraculously provides all the information you need:

Open the command panel (Ctrl + Shift + P) and search for Startup Performance.

14. Select text one by one

You can select text one by one using the shortcut keys Ctrl + Shift + right arrow (Mac: Option + Shift + right arrow) and Ctrl + Shift + Left arrow (Mac: Option + Shift + Left arrow).

15. Repeated lines

One very powerful and known feature is copying rows. Just press Shift + Alt + down arrow (Mac: Command + Shift + Down arrow)

16, move to the beginning/end of the file

The fastest way to move the cursor to the first or last line of the file is to press Ctrl + Home (Mac: Command + Home) at the beginning and Ctrl + End (Mac: Command + End) at the End.

17. Batch replace all matched text in the current file

You can select any group of texts. If multiple texts appear in the selected text, press Ctrl + F2 (Mac: Command + F2) to change all the texts at one time.

18. Move up/down one line

Press Alt + up arrow (Mac: Command + up arrow) to move the current line up. Press Alt + Down arrow (Mac: Command + down arrow) to move the current line down.

Delete a row

There are two ways to delete a row immediately.

Use Ctrl + X cut command (Mac: Command + X) to delete a line.

Alternatively, use Ctrl + Shift + K (Mac: Command + Shift + K).

20. Move the editor left or right

If you’re like me, you may have an uncontrollable desire to rearrange the tabs in a group where the tabs are related to each other, with the tabs on the left being the more important files and the tabs on the right being the less important ones.

Move the editor left/right by Ctrl+Shift+PgUp/PgDown(Command + +Shift+PgUp/PgDown).

Copy cursor up or up to batch add content

Copying cursors in VsCode can prove to be the most time-saving feature.

Press Ctrl + Alt + Up arrow (Mac:Control + Option + Up arrow) to add the cursor above and Ctrl + Alt + Down arrow (Mac:Control + Option + Down arrow) to add the cursor below.


Thanks for reading!