VS Code shortcuts that you must know! (Mac and Windows)
Tags: vscode, codenewbie, tutorial, beginners
Published: 2021-05-10 01:27:56

## 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
```

![Moving Cursor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6y1w2dibahtx1d4hhzz.gif)

#### Move the cursor to the prev or next word.
```
Mac: Option ⌥ + Left Arrow / Right Arrow
Win: Ctrl + Left Arrow / Right Arrow
```

![Moving Cursor by word](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wdr3enyhy95gnghn6c9.gif)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0h78asvc3w0zerei75u.gif) 

#### Highlight the whole line.
```
Mac: Shift ⇧ + Cmd ⌘ + Left Arrow / Right Arrow
Win: Shift + Home / End
```

![Highlighting each word](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coe8ghzmghrpzmiluhry.gif)
 

#### Highlight each word.
```
Mac: Shift ⇧ + Option ⌥ + Left Arrow / Right Arrow
Win: Shift + Ctrl + Left Arrow / Right Arrow
```

![Highlighting the whole line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6i7lherx8eiu70ylqgn.gif)

#### Highlight the same word.
```
Mac: Cmd ⌘ + d
Win: Ctrl + d
```

![Highlighting the same word](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj4l494vl8s71qgvqd8w.gif)

## Delete one line code
There are two ways to delete one line code.
```
Mac: Cmd ⌘ + Shift ⇧ + x
Win: Ctrl + x
```

I am personally more convenient to use this, which is the `cut` shortcut.
```
Mac: Cmd ⌘ + x
Win: Ctrl + x
```

![Delete one line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lelfvm1etpb5fmzn1o85.gif) 

## Close the current file
```
Mac: Cmd ⌘ + w
Win: Ctrl + w
```
 
![Close each file open](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3y1ggle2dge38tqimm0.gif) 

## Close all open file
```
Mac: Cmd ⌘ + k w
Win: Ctrl + k w
```

![Close all open file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/go6r4k0ed4y2xdvan2vs.gif)

## Open a file

```
Mac: Cmd ⌘ + p
Win: Ctrl + p
```
It will open a search bar, and we can type the file name there.

![Open file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyvb6xy2rqstm4kvzug5.gif)
 
## Change to another file tab
```
Mac: Ctrl ^ + tab
Win: Ctrl + tab
```

![Change Tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56u0cfjn3fcief8kxypp.gif)

## Split screen

```
Mac: Cmd ⌘ + \
Win: Ctrl + \
```

![Split Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5k8l8limztil51gm7jpv.gif)

## Move focus to another split-screen

```
Mac: Cmd ⌘ + 1 / 2 / 3
Win: 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.

![change split focus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwa5ykc7dfka09rrtm1g.gif) 

## Open and close Sidebar

```
Mac: Cmd ⌘ + b
Win: Ctrl + b
```

![Open Close Side Bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju0vb4sfdutz8ckajn1c.gif)
 

## Open terminal

```
Mac: Ctrl ^ + ~
Win: Ctrl + ~
```

![Open Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgxb89w1kk5gxa725kly.gif)

## 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
```

![Command pallete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b430y97enfkgpkxdol63.gif)

## 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](https://www.youtube.com/watch?v=s3H6PmB4SZ4), and his video shares about the two useful extensions.

### [File Utils](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils)

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

This extension gives you access to this feature below.
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvuwd2z62nleaph8xmn3.png)
 
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](https://marketplace.visualstudio.com/items?itemName=patbenatar.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wcl4ev67no4q8ynuiiv.gif)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7zaqdhks2z2z6aqdhsj.gif)
 
## 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?