My Top Favorite VS Code Keyboard Tips, Tricks, and Shortcuts

Jared Potter
4 min readJun 3, 2020

--

As a software engineer, how many times a day do you reach for the mouse to navigate your code editor to select the right bits of code to edit, remove, add, or move around? Although it can take just a second or so to perform each of these mouse moments and clicks, those seconds can add significantly.

Additionally, your level of confidence and proficiency with typing during a technical coding interview can weigh the opportunity in your favor. Or if you already have a job, then you can blow their minds with your mad Typin’Skillz!

Today I’m going to share my favorite daily-driver keyboard shortcuts that work across all text applications and VS Code specific ones.
To best teach you these shortcuts, I’m not going to just tell you like some cheatsheet you can find online by googling “VS Code keyboard shortcuts” but instead show real code with real use cases to exemplify it.
Putting a little bit of practice now will pay off enormously in time saved.

Let’s get started

General Keyboard Shortcuts — Basics

Copy / Paste / Cut

Mac: Command + C / Command + V / Command X

PC: Ctrl + C / Ctrl + V / Ctrl + X

Although foundational, you’d be surprised how many people don’t fully utilize these commands with maximum efficiency and accuracy, if used correctly.
Cut and Paste

2. Select All

Mac: Command + A

PC: Ctrl + A

Sometimes you just need to delete everything and start fresh

General Keyboard Shortcuts — Leveled Up

1. Word Jump

Mac: Option + Left/Right Arrow

PC: Alt + Left/Right Arrow

Super powerful — this command can be used for numerous scenarios. Quickly jump to the middle of a line of code. Or combined with Backspace and/or Shift to replace swiftly or select, respectfully. You’ll soon learn what is considered a word with practice.

2. Delete Word

Mac: Option + Backspace

PC: Ctrl + Backspace

Just like Word Jump but used to delete the proceeding word. Also useful for removing whitespace at the end of a line (if you aren’t using on-save doc format Prettier).

3. Jump to End of Line / Just to Start of Line

Mac: Command + Left/Right Arrow

PC: Home Key / End Key

This is likely my most used keyboard shortcut. I often get my cursor to a line of code, use this shortcut to jump to the beginning/end, and then Word Jump X times to get to the right location.

4. Delete Whole Line of Code

Mac: Command + backspace |OR| Command + Shift + K

PC: Shift + End Key, then Delete Key |OR| Ctrl + Shift + K

Sometimes you just need to blow a whole line of code away

6. DEL Key

Mac (not to be confused with the “delete” / backspace key):

  • Without full-sized keyboard -> Control + D
  • With full-sized keyboard -> Del Key

PC: Del Key

This will change your life if it hasn’t already. It is useful for deleting proceeding text or to easily remove the newline.

VS Code Keyboard Shortcuts

1. Multi-Line / Multi-Cursor

Both (Mac / PC): Click and hold middle mouse wheel and drag vertically

Mouse

Mac:

  • Keyboard: Option + Command + Up/Down Arrow
  • Mouse/Keyboard: Command + Option + Left Click (drag)

PC:

  • Keyboard: Ctrl + Alt + Up/Down Arrow
  • Mouse/Keyboard: Ctrl + Alt + Left Click (drag)
Keyboard

2. Select sequential identical selected words

Mac: Command (hold) + D (repeated)

PC: Ctrl (hold) + D (repeated)

I use this one all day long. Effortlessly rename variables. Or select multiple variables that all start with ‘const’. Be aware this is case insensitive. Wrong quote marks? Highlight first pair, Command + D, correct press quote (single ‘ in javascript/typescript 😉)

3. Select all identical selected words

Mac: Command + Shift + L

PC: Ctrl + Shift + L

Works similarly to the multi-line / multi-cursor but selects all occurrences in the file. Be aware this is case in-sensitive.

warning: if you have the Mac desktop LastPass app install it hijacks this shortcut

4. Duplicate Line of Code

Mac: Option + Shift + Up/Down Arrow

PC: Ctrl + Shift + d

Quickly duplicates a line of code above or below, and moves cursor to new line

5. Move/Swap Line of Code

Mac: Option + Up/Down Arrow

PC: Shift + Alt + Up/Down Arrow

Moves a line of code up and down, swapping places if moved into an existing line.

6. Search Whole Project

Mac: Command + Shift + F

PC: CTRL + Shift + F

Easily search the entire project

6. Go To File

Mac: Command + P

PC: Ctrl + P

So so so useful for quickly jumping to the right file. Especially if you’re working in Angular with their 17 thousand generated files per component.

7. Open new Terminal

Mac: Control + ` (pronounced tick upper left on keyboard)

PC: Ctrl + ` (pronounced tick upper left on keyboard)

Easily and instantly open a handy dandy terminal

8. Quickly Create <div> with class Attribute, and Auto Complete Elements

BOTH (Mac/PC):

With class: . then type classname and then tab.

Just Element: type of element and then tab complete

Never type a full element ever again!

Thanks for reading this article. If you found it useful please tap the 👏, and share this article with others.

You can find me on Twitter or Medium for future articles.

--

--

Jared Potter

Software Engineer, Hiker, Personal Finance nerd, and Caffeine lover