VS Code shortcuts that you must know! (Mac and Windows)

Introduction

Have you ever realized that using a mouse reduces the speed of your development? Using a mouse slows down your speed because you should move your hand to the mouse and move back again to the keyboard. However, we can make both of our hands staying on the keyboard all the time if we know all the shortcuts. I'm still learning to stop using a mouse, and I want to share my most useful shortcuts in VS Code. These are important shortcuts that VSCode user must know to speed up your coding process.

Move the cursor

Move the cursor to the first or last character of the line.

Mac: Cmd  + Left Arrow / Right ArrowWin: Home / End

Move the cursor to the prev or next word.

Mac: Option  + Left Arrow / Right ArrowWin: Ctrl + Left Arrow / Right Arrow

Highlight code

The main shortcut of highlighting is holding the shift key + arrow or you can combine it with the shortcuts for moving the cursor.

Highlight the whole line.

Mac: Shift  + Cmd  + Left Arrow / Right ArrowWin: Shift + Home / End

Highlight each word.

Mac: Shift  + Option  + Left Arrow / Right ArrowWin: Shift + Ctrl + Left Arrow / Right Arrow

Highlight the same word.

Mac: Cmd  + dWin: Ctrl + d

Delete one line code

There are two ways to delete one line code.

Mac: Cmd  + Shift  + xWin: Ctrl + x

I am personally more convenient to use this, which is the cut shortcut.

Mac: Cmd  + xWin: Ctrl + x

Close the current file

Mac: Cmd  + wWin: Ctrl + w

Close all open file

Mac: Cmd  + k wWin: Ctrl + k w

Open a file

Mac: Cmd  + pWin: Ctrl + p

It will open a search bar, and we can type the file name there.

Change to another file tab

Mac: Ctrl ^ + tabWin: Ctrl + tab

Split screen

Mac: Cmd  + \Win: Ctrl + \

Move focus to another split-screen

Mac: Cmd  + 1 / 2 / 3Win: Ctrl + 1 / 2 / 3 

1, 2, or 3 depends on the screen position, and if the split screen doesn't exist, it will open a new empty split screen.

Open and close Sidebar

Mac: Cmd  + bWin: Ctrl + b

Open terminal

Mac: Ctrl ^ + ~Win: Ctrl + ~

Open VSCode Pallete

VSCode palette will give you access to all VSCode functionalities and also all shortcuts. VSCode palette is powerful!

Mac: Cmd  + Shift  + pWin: Ctrl + Shift + p

Bonus

We haven't discussed how we can add a new file or folder, delete a file, move a file, rename a file name, and duplicate a file. Unfortunately, VSCode doesn't have the built-in feature for that without going to the sidebar. However, I watch James Q Quick's video, and his video shares about the two useful extensions.

File Utils

Mac: Cmd  + Shift  + p -> Type "File Utils"Win: Ctrl + Shift + p -> Type "File Utils"

This extension gives you access to this feature below.

By using File Utils, you don't need to open the sidebar all the time just type File Utils in the VSCode Palette.

advanced-new-file

advanced-new-file extension is handy when you want to create a file or folder. File Utils provides a feature to add a file and folder, but I feel more convenient with this extension. I also create key binding for this extension Cmd + n.

How to add a shortcut for the extension?

• Open VSCode palette
• search advanced-new-file
• Click the gear icon
• Click edit
• type the shortcut

Conclusion

Remembering all the shortcuts in a time is challenging, but if we push ourselves to use shortcuts on daily basis. We will remember all the shortcuts soon. I hope it would be helpful.

Please leave a comment on which the most useful shortcut for you? or do you have another useful VS Code Shortcut?