VSCode shortcuts worth learning

Shortcuts are the kind of thing where “you can write without knowing them, but knowing them makes it a lot easier all at once.” You don’t need to learn them all. The knack is to get them into your hands little by little, starting with the ones you use every day. Here we hand-pick the ones beginners benefit from first, grouped by the situation you use them in.

Type 1: Get these basics into your hands first

Operations that complete with just the keyboard—the ones that come up most often.

Save

⌘ + S / Ctrl + S

The one you use most. Fixed something? Save. If a ”●” shows on the tab, that’s the unsaved sign. When in doubt, save first.

Undo / redo

⌘ + Z / Ctrl + Z (undo), ⌘ + ⇧ + Z / Ctrl + Y (redo)

“Ah, I deleted it” is solved in one press with this. You can go back any number of times, so you can experiment without fearing mistakes.

Search for anything (command palette)

⌘ + ⇧ + P / Ctrl + Shift + P

VSCode’s “entrance to anything.” Type a feature name here and you can run most things. Its strength is that you can call things up by name without memorizing where they are in the menus.

Quickly open a file

⌘ + P / Ctrl + P

Just type part of the file name to jump to the file you want. An essential move once your files grow in number.

Type 2: Speed up writing and fixing

Being able to operate on whole lines at once greatly cuts down retyping.

Toggle comments ON/OFF

⌘ + / / Ctrl + /

Turn selected lines into comments all at once, or back again. Handy for “I want to delete this line for now but keep it around.”

Copy a whole line

⇧ + ⌥ + ↓ / Shift + Alt + ↓

Duplicates the line you’re on straight down (↓). When writing several similar lines, it saves you from retyping.

Move a line up or down

⌥ + ↓ / Alt + ↓

“Relocate” the selected line up or down. You can swap the order without cutting and pasting.

Delete a whole line

⌘ + ⇧ + K / Ctrl + Shift + K

Deletes the line you’re on in one shot, without the trouble of selecting it first.

Type 3: Edit multiple places at once

When repeating the same edit here and there, adding cursors is the shortcut.

Add multiple cursors

⌥ + Click / Alt + Click

Hold the key and click each place you want to type, and the cursor multiplies. It’s magic for when you want to write the same content in different places all at once.

Select the same word one at a time

⌘ + D / Ctrl + D (press repeatedly to add to the selection)

Adds the same word as the one your cursor is on, one at a time, each time you press. Good for when you want to rename just one thing.

Select all of the same word

⌘ + ⇧ + L / Ctrl + Shift + L

Selects all occurrences of the word your cursor is on across the file at once. When you want to rewrite the same class name everywhere, this one press is enough.

Return the added cursors to one

Esc

If, after adding cursors, you panic that “the characters I type go into every place,” press Esc once. The cursor returns to one. If you only learn how to add them and not how to return them, you can get stuck, so learning them as a set is reassuring.

Type 4: Move around the screen

It’s a common story that your hands actually reach for the mouse to switch panes more often than they type code. Turning that into keystrokes is what changes the feel the most.

Show / hide the sidebar

⌘ + B / Ctrl + B

Tucks away the file list on the left so your code gets more room. Especially effective on a laptop with a narrow screen.

Show / hide the terminal

⌃ (Control) + backtick (`) / Ctrl + backtick

Pops the black screen where you type commands up from the bottom, and tucks it back. The same key toggles it, so you don’t have to leave it open eating your screen.

Switch between open tabs

⌃ + Tab / Ctrl + Tab

For going back and forth between HTML and CSS. Hold the key down and a list appears, so you can pick one and release.

Split the screen left and right

⌘ + \ / Ctrl + \

Turns the file you’re in into two panes. Lining up HTML on the left, CSS on the right lets you write while looking at your class names, which cuts down typos.

Fold / unfold

⌘ + ⌥ + [ / Ctrl + ⇧ + [ (fold), ] to unfold

Lets you fold away the parts of a long HTML file you’re not looking at right now. It makes deeply nested files much easier to survey.

Type 5: Tidy up how the code looks

Line up the indentation all at once (format)

⇧ + ⌥ + F / Shift + Alt + F

Straightens out a file whose indentation has gone messy, in one press. With a formatting extension such as Prettier installed, it lines things up more cleverly.

Wrap long lines, or don’t

⌥ + Z / Alt + Z

Wraps lines that run off the right edge so you can see all of them on the spot. No horizontal scrolling, which helps when editing long text.

Make text bigger or smaller

⌘ + + / Ctrl + + (bigger), ⌘ + - / Ctrl + - (smaller)

For when you’re showing your screen to someone, or your eyes are getting tired. ⌘ + 0 / Ctrl + 0 returns it to the original size.

The twelve to keep at hand

Here are the twelve to get into your hands first. Printing this and sticking it next to your screen works well too.

Summary

1. Practice ⌘/Ctrl + S (save) and ⌘/Ctrl + / (comment) until your hands do them automatically
2. Call up files with ⌘/Ctrl + P, and features with ⌘/Ctrl + ⇧ + P
3. Duplicating, moving, and deleting lines, plus multiple cursors and bulk selection, cut down your retyping
4. ⌘/Ctrl + B and split panes cut down how often you reach for the mouse in the first place
5. When a key does nothing, click once inside the editor and press it again

When your fingers move less, your head can focus only on “what you want to make.”