Learn shortcuts to edit faster with VSCode (lots of images)
Tags: beginners, vscode, productivity
Published: 2022-05-28 10:19:07

Editing texts becomes so much easier when we use shortcuts. I think the most important part is that it makes me feel less tedious and more productive because it allows me to focus more on coding rather than typing.

In this article, We'll learn a few VSCode shortcuts and combine them with some [basic shortcuts](https://dev.to/gohomewho/basic-but-powerful-shortcuts-that-help-editing-texts-dh7) I shared last week. We'll go through a few examples where shortcuts can make our lives so much easier. 

Let's open VSCode and do this together. On the top left toolbar section, there's a selection tab and it contains some features of selection. We will go through most of them. Note that the keybinding you see in the image might be different than yours because I configured some of them. But don't worry! I'll show you how to configure. 

![VSCode selection tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sv4mym3y406gaid4weu.png)
 
We can configure keybinding by clicking the gear icon at the bottom left corner and click `Keyboard Shortcuts`.
![menu by clicking gear icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf4j3qq1z7a0j83zlq9q.png)

We can search features and click the pencil icon to configure keybinding.
![Search keyboard shortcuts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wo78naxwkiiwyv89hdn.png)

Press the keys we want then press `Enter`. Notice if the keybinding already exists, VSCode will notice us. We can click the link to see where the keybinding is used. 
![configure keybinding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anepnh39yzuxq0k62sc0.png)

Dummy HTML for practice
```html
<button class="BTN button-primary" data-call-to-action-btn>
  Yes
</button>

<form class="form">
  <p class="heading">form</p>
  <button class="BTN b-success rounded btnnnn" data-submit-btn>
    Submit
  </button>
  <p>some text contains primary</p>
</form>

<button class="BTN b-success rounded" data-cancel-btn>
  No
</button>
```
 
---

## Search
👇`Ctrl` + `F` to open search bar, type the text you want to search, turn on `Match Case` and `Match Whole Word` if needed. We can press enter to find next matched instance. 
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4ymbplbyb7apim96gwv.gif)
 
We can press `Alt` + `Enter` to select all matched instances.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj63wftebv2ys08yt6gg.gif)

Press `↑`/`↓` to bring back your find history
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wooxgk84f157tqx2c5wh.gif)
 
Press(maybe twice) `Esc` to close the search bar. The last matched instance you find will be selected.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxgx6cnemxtmenkcoz18.gif)

---

## Multi-Select and Actions
Sometimes we want to rename a variable or a class. Wouldn't it be nice if we can select them all and edit at once. Luckily, it's easy to do in VSCode.

### Add Selection To Next Find Match
![keybinding of Add Selection To Next Find Match is configured to `Ctrl` + `D`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bg2aq50fozykj1iqyv05.png)

If we currently don't have a selection, pressing `Ctrl` + `D` will behaves like double click, which select the word our cursor is on. After we have a selection, press `Ctrl` + `D` will find the next match instance and select it.

Notice there is cursor added to each selection which means we can edit them at once.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nroyiyg50wodnrefcdum.gif)
 
 
### Add Selection To Previous Find Match
Same usage as `Add Selection To Next Find Match`, but it select in a reverse order.
![keybinding of Add Selection To Previous Find Match is configured to `Alt` + `D`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmz6hy4qwq1srir86nre.png)
 
Notice when I select `primary` there is one match below which is not I want. So I use `Alt` + `D` to select previous find match.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtqjab2rorg5x2hjl1ji.gif)

### Use **Search** with **Add Selection** together
One thing to note that these two `Add Selection` features by default is `Match Case` and `Match Whole Word`. But when we have search bar on, the configuration from the search bar is used.

Notice when I press `Ctrl` + `D` to select "BTN", matched instance are exactly "BTN", but after I press `Ctrl` + `F` to bring up the search bar, everything that includes "btn" are also matched because `Match Case` and `Match Whole Word` are turned off on the search bar.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qnx0hrv8i0j0zt36y0t.gif)

### Add Multi-Cursor with mouse
Sometimes we want to select different things but edit them to the same or similar. We can do that by explicitly adding cursor and select multiple things. The shortcuts for Multi-Cursor can be toggled between `Ctrl` + `Click` and `Alt` + `Click` in the selection tab.

![Toggle Multi-Cursor shortcuts in selection tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fegxnagd4c5rb8njnlz.png)

Holding `Alt`/`Ctrl` + `Click` to add cursor then press `Ctrl` + `D` to select the words. Combined with `Ctrl` + `←`/`→`, we have the flexibility to edit more at once.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xla7day1ocs23pt2pz6t.gif)

### Expand Selection and Shrink Selection

Expand more
`editor.action.smartSelect.expand`
![keybinding of Expand Selection is configured to `Alt` + `A`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pwesz6decoza32r2x9k.png)

Shrink some when we expand too much 🤣
`editor.action.smartSelect.shrink`
![keybinding of Shrink Selection is configured to `Shift` + `Alt` + `A`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esgivkj46hopw5r7tqek.png)
 
Notice how easily we can remove the classes from a element. Expand selection is usually used to select something within something else. It's very very powerful.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzcyyz19a49qnsep5o0n.gif)

### Cut
In VSCode, if you don't have any selection, `Ctrl` + `X` can directly cut a line. I used it to quickly delete lines until I found a better option. The difference between `Cut` and `Delete Line` is cut will also copy. If we use `Cut` to delete empty lines, we will lose what we actually want to `Cut`.

`editor.action.deleteLines`
![keybinding of Delete Line is configured to `Alt` + `X`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/veupelfhlsjbxv5db653.png)

### Copy Paste
In VSCode, if you don't have any selection, `Ctrl` + `C` and `Ctrl` + `V` can directly copy and paste a line down. 
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3nv23uk8ot6wffj2tn9.gif)

When copy multiple lines we have many options, We can either select everything we want and use `Ctrl` + `C` and `Ctrl` + `V` or use the copy line shortcuts. 

![keybinding of Copy Line Down is `Shift` + `Alt` + `ArrowDown` and Copy Line Up is `Shift` + `Alt` + `ArrowUp`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df4li3nr4ost09pl4h7f.png)

The benefit of using copy line shortcuts is that you don't have to perfectly select everything in the lines. 
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqfpqy4jckb5aqgtd107.gif)

### Move Line

![keybinding of Move Line Down is `Alt` + `ArrowDown` and Move Line Up is `Alt` + `ArrowUp`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txz96uym4qyerybfazln.png)
 
Similar to copy line, we don't have to select everything in the lines. 
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guvn68xwga1pk1v8pk7g.gif)

Be careful when you want to move through the code that is commented and folded, it will unfold them which is unlikely what you expect. This unintentional move could be frustrated because we use shortcuts to work faster and this result cannot be undo by `Ctrl` + `Z`. This is bad especially when our commented code is long.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ce2hgx516qicdudmfo9.gif)

### Toggle Fold
Toggle fold or unfold of the tree object. 
![keybinding of Toggle Fold is `Ctrl` + `Shift` + `A`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lzou5nvcs7gupm8atyw.png)

We can use this with expand selection `Alt` + `A` to see the area we want to fold.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/806umdtaamz2aapyehqs.gif)
 
We can also use this shortcut to quickly fix the mistake I just made above. As long as our cursor is in the commented code, toggle  fold can directly toggle the whole commented area.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6goa0ruw2c5h2c1uadp.gif)

### Parallel Create
This is useful when we have multiple things that need to be created to something similar. 

![keybinding of Add Cursor Above is `Ctrl` + `Shift` + `ArrowUp` and Add Cursor Below is `Ctrl` + `Shift` + `ArrowDown`](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1a6c2lr8c2kg8x0p7rdm.png)

When we switch file, we lose the previous multi-cursor, thus we need to use `Add Cursor Above / Below` in order to do parallel move. We can use `Ctrl` + `P` and search file name to switch to the file which is also a very useful shortcut. 

![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/noxxb5z3e0zsb1uz7nvx.gif)

### Add Wrapper to elements
Sometimes we want to wrap some elements within a new parent element, there is a feature for it.

`Ctrl` + `Shift` + `P` bring up the toolbar then type wrap. The option `Emmet: Wrap With Abbreviation` is what we want. This feature doesn't have a default keybinding, but you can configure it by clicking the gear icon on the right side.
![`Ctrl` + `Shift` + `P` bring up the toolbar then type wrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/276dh6ceey0n0xg0krz4.png)
 
we can use the shortcuts we've learned so far to select the range of elements, then use `Emmet: Wrap With Abbreviation` and type what you want to wrap elements with.
![Demonstrate the workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9a0v08sbd4ia3y9j8csw.gif)

## Wrap Up
We cover so many shortcuts that can help us code faster in VSCode. In my opinion, if there is something we are going to use every day, it's definitely worth to spend some time to try and learn. These combinations will become intuitive as we practice more and use every day. 

In case you are curious about the keystrokes, it is a VSCode built-in feature, you can toggle it by `Ctrl` + `Shift` + `P` bring up the VSCode features toolbar and type `screencast` then click it.
![`Ctrl` + `Shift` + `P` and type "screencast" in VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmiyukyzuc2kibmvo31y.png)
 
By the way, if you forget a shortcut but you know the name of the feature. You can also search in that toolbar, e.g. `fold`.
![`Ctrl` + `Shift` + `P` and type "fold" in VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e449ccgualgylhe1y07j.png)