DEV Community

Cover image for VS Code shortcuts that you must know! (Mac and Windows)
Raynaldo Sutisna
Raynaldo Sutisna

Posted on • Updated on

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

#vscode #codenewbie #tutorial #beginners

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 Arrow
Win: Home / End
Enter fullscreen mode Exit fullscreen mode

Moving Cursor

Move the cursor to the prev or next word. 

Mac: Option ⌥ + Left Arrow / Right Arrow
Win: Ctrl + Left Arrow / Right Arrow
Enter fullscreen mode Exit fullscreen mode

Moving Cursor by word

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.

Highlighting each letter

Highlight the whole line. 

Mac: Shift ⇧ + Cmd ⌘ + Left Arrow / Right Arrow
Win: Shift + Home / End
Enter fullscreen mode Exit fullscreen mode

Highlighting each word

Highlight each word. 

Mac: Shift ⇧ + Option ⌥ + Left Arrow / Right Arrow
Win: Shift + Ctrl + Left Arrow / Right Arrow
Enter fullscreen mode Exit fullscreen mode

Highlighting the whole line

Highlight the same word. 

Mac: Cmd ⌘ + d
Win: Ctrl + d
Enter fullscreen mode Exit fullscreen mode

Highlighting the same word

Delete one line code

There are two ways to delete one line code.

Mac: Cmd ⌘ + Shift ⇧ + x
Win: Ctrl + x
Enter fullscreen mode Exit fullscreen mode

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

Mac: Cmd ⌘ + x
Win: Ctrl + x
Enter fullscreen mode Exit fullscreen mode

Delete one line

Close the current file 

Mac: Cmd ⌘ + w
Win: Ctrl + w
Enter fullscreen mode Exit fullscreen mode

Close each file open

Close all open file 

Mac: Cmd ⌘ + k w
Win: Ctrl + k w
Enter fullscreen mode Exit fullscreen mode

Close all open file

Open a file 

Mac: Cmd ⌘ + p
Win: Ctrl + p
Enter fullscreen mode Exit fullscreen mode

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

Open file

Change to another file tab 

Mac: Ctrl ^ + tab
Win: Ctrl + tab
Enter fullscreen mode Exit fullscreen mode

Change Tab

Split screen 

Mac: Cmd ⌘ + \
Win: Ctrl + \
Enter fullscreen mode Exit fullscreen mode

Split Screen

Move focus to another split-screen 

Mac: Cmd ⌘ + 1 / 2 / 3
Win: Ctrl + 1 / 2 / 3
Enter fullscreen mode Exit fullscreen mode

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.

change split focus

Open and close Sidebar 

Mac: Cmd ⌘ + b
Win: Ctrl + b
Enter fullscreen mode Exit fullscreen mode

Open Close Side Bar

Open terminal 

Mac: Ctrl ^ + ~
Win: Ctrl + ~
Enter fullscreen mode Exit fullscreen mode

Open Terminal

Open VSCode Pallete

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

Mac: Cmd ⌘ + Shift ⇧ + p
Win: Ctrl + Shift + p
Enter fullscreen mode Exit fullscreen mode

Command pallete

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"
Enter fullscreen mode Exit fullscreen mode

This extension gives you access to this feature below.
alt text

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.

advance file

How to add a shortcut for the extension?

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

add key binding

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?

Top comments (0)

Read next

mince profile image

TIPS FOR BEGINNERS IN ROBLOX STUDIO 😲

Mince -

akhilproto profile image

Building a REST API with Ballerina: A Beginner’s Walkthrough

AkhilProto -

ianbrumby profile image

Effortless Debugging: AWS CDK TypeScript Projects in VSCode

Ian -

dumebii profile image

API Documentation Tools: Using Hoppscotch for API Documentation

Dumebi Okolo -