Ctrl
,
Alt
, and
Shift
are modifier keys — hold them down while pressing other keys to modify the effects.

VS Code

Reference sheets: WindowsMacLinux

New to JavaScript?
Functional Programming in JavaScriptJavaScript30JavaScript in 1 Hour2019 Frontend Dev Crash Course

Effect

Shortcut

Demo
Show Command Palette — perform any action
Ctrl
+
Shift
+
P
The one shortcut to rule them all. 💍

Type what you want to do, and the command palette will show you your options, and any shortcut keys associated with them.

Comment out lines of code
Ctrl
+
/

Handy for:

  • Making notes to your future self or other developers.
  • "Turning off" code that you don't want to delete (remember to clean up after yourself!)

Select anywhere in one or more lines; this will comment out the entire line.

Comment out sections (not entire lines) of code
Ctrl
+
Shift
+
/
Toggle text wrap
Alt
+
Z
Trigger suggestion/autocomplete
Ctrl
+
Space
Keyboard Shortcuts
Ctrl
+
K
Ctrl
+
S

Effect

Shortcut

Demo
Go to any file
Ctrl
+
P

Performs a "fuzzy match" — type any part(s) of the file name to find it.

Much faster than using the file explorer!

Go to line number
Ctrl
+
G
Scroll faster
Alt
+ scroll (mousewheel or trackpad)
Toggle sidebar
Ctrl
+
B
Toggle integrated terminal
Ctrl
+
`
Create new terminal
Ctrl
+
Shift
+
`
Toggle Problems panel
Ctrl
+
Shift
+
`
Fold All (get a bird's-eye-view of a file)
Ctrl
+
K
,
Ctrl
+
0
Go to nearest/matching bracket
Ctrl
+
M
Settings
Ctrl
+
,

Effect

Shortcut

Demo
File explorer
Ctrl
+
Shift
+
E
Extensions
Ctrl
+
Shift
+
X
Search all files
select some text then
Ctrl
+
Shift
+
F
Git (source control)
Ctrl
+
Shift
+
G

Effect

Shortcut

Demo
Add cursor above or below
Shift
+
Alt
+
↑
or
↓
Add cursor by clicking
Ctrl
+ click or
Alt
+ click

Search your settings for 'Editor: Multi Cursor Modifier' to change between Ctrl and Alt.

Add cursors to line ends
Ctrl
+
Shift
+
L
Column (box) selection
Shift
+
Alt
+ drag mouse or Middle-mouse-drag

Effect

Shortcut

Demo
Add cursor at next instance of current selection
Ctrl
+
D

Select any repeating pattern or word, then use this shortcut repeatedly to select multiple occurrences.

While adding cursors using Ctrl + D, skip the current selected instance
Ctrl
+
K

For example: to select all the 'selectme' in 'selectme selectme dontselectme selectme':

Select the first 'selectme', then hold
Ctrl
, then
D
,
D
,
K
,
D
.
Select all occurrences of current selection
Alt
+
F3

Effect

Shortcut

Demo
Find next/previous
F3
/
Shift
+
F3
Find
Ctrl
+
F
Replace
Ctrl
+
H
Global find
Ctrl
+
Shift
+
F
Global replace
Ctrl
+
Shift
+
H

Replace a selection in all files:

  1. Select a word
  2. Ctrl
    +
    Shift
    +
    H
  3. Type the replacement word
  4. Ctrl
    +
    Alt
    +
    Enter
    ,
    Enter

Effect

Shortcut

Demo
Write HTML with maximum efficiency using Emmet shortcuts -- head on over to the Emmet Cheat Sheet for a full specification.
<div class="foo"></div>
div.foo
or simply
.foo
<p id="bar"></p>
p#bar
<h1 id="weirdo" class="salty sweet sour"></h1>
h1#weirdo.salty.sweet.sour
<section class="list-container">
    <li>
      <ul>item 1</ul>
      <ul>item 2</ul>
      <ul>item 3</ul>
    </li>
  </section>
section.list-container>li>ul*3{item $}

Effect

Shortcut

Demo
Copy line (with empty selection)
with no selection,
Ctrl
+
C
Cut (copy+delete) line (with empty selection)
with no selection,
Ctrl
+
X
Multi-copy-paste
multi-select + copy, multi-select + paste

Note: this will only work as expected if the number of selections when copying equals the number of cursors or selections when pasting.

Duplicate line(s)
Shift
+
Alt
+
↓
Delete line(s)
Ctrl
+
Shift
+
K

Effect

Shortcut

Demo
Bubble selected lines up or down
Alt
+
↑
or
↓
Insert line below/above
Ctrl
+
Enter
/
Ctrl
+
Shift
+
Enter
Join lines (and trim whitespace)
Ctrl
+
J
Select current line(s)
Ctrl
+
L
Quick-select entire lines
Drag mouse along the line numbers
Indent or outdent (de-indent) lines
Ctrl
+
]
or
[

Effect

Shortcut

Demo
Move some code to a new file
Select some code, then
Ctrl
+
.
or right-click ➡ Refactor...

Effect

Shortcut

Demo
Extensions sidebar
Ctrl
+
Shift
+
X
Prettier - Code formatter — auto-format code on save
Go to Settings with
Ctrl
+
,
, search for "format on save" and tick the checkbox
Turbo Console Log — never type console.log again!
Select something, then
Ctrl
+
Alt
+
L
— customize the log prefix in Settings
ESLint - JavaScript linter (checks for programmatic and stylistic errors)
TSLint - TypeScript linter (like ESLint if you're using TypeScript)
Live Server — local development server that reloads on save
In an
index.html
file, hit "Go Live" button at the bottom of your editor
Better Comments
// TODO: learn all the shortcuts!
// * watch out for this thing
// ? is this really necessary?
Bracket Pair Colorizer 2
{
bracketsArray.forEach(
bracket => { colorize(bracket) })
}
Color Highlight
hsl(60,90%,40%)
rgba(100,200,255,0.5)
#7f10e8
GitLens - Git supercharged
Powerful extension: find out who wrote each line and when, track / revert your current changes, or get a full file or line history in the sidebar. Check out the docs!
vscode-icons — sweet, sweet file icons
Since this adds folder icons, you can turn off folder arrows with
Ctrl
+
Shift
+
P
, then "Toggle Explorer Folder Arrows Visibility"
htmltagwrap
Select some HTML, then
Alt
+
W
to wrap
VSCode React Refactor — like right-click ➡ Refactor, but for moving selected JSX elements into a new component file
Select some JSX, then click the 💡 icon ➡ refactor
change-case — command palette utility to switch between cases
camelCase
CONSTANT_CASE
snake_case
kebab-case
Sentence case
Title Case
Live Share Extension Pack — code with your pals! Includes audio call 🔊
Ctrl
+
Shift
+
P
, then "Live Share: Start Collaboration Session"
Toggle Quotes — cycle between " ➡ ' ➡ `
Ctrl
+
'
Auto Rename Tag — auto-rename the matching HTML tag
Sublime Text Keymap and Settings Importer
Better keymappings than the defaults — fight me 🥊
vscode-styled-components
syntax highlighting and autocompletion for the styled-components css-in-js library