VS Code Cheat Sheet

Visual Studio code is the most popular editor for Web Development, and
learning how to harness its power will increase your efficiency and proficiency
as a developer. In this cheat sheet, you’ll find quick links to documentation,
shortcuts, and more!

Learn everything you need to know about the most popular

editor for Web Development with the most popular VS Code
course on Udemy!

Download VS Code

Layouts and Shortcuts

Full Keybindings List Mac

Full Keybindings List Windows

Full Keybindings List Linux

ctrlCmd – Control on Windows, Command on Mac*

VS Code Layout
ctrlCmd + Shift + G - Toggle git
ctrlCmd + Shift + B - Toggle side
bar ctrlCmd + Shift + F - Toggle
search
ctrlCmd + Shift + D - Toggle
debug ctrlCmd + K Z - Toggle Zen Mode

ctrlCmd + Shift + E - Toggle file ctrlCmd + Shift + P - Command

editor Palette

VS Code Cheat Sheet 1

 ctrlCmd + Shift + X - Toggle
Extensions

Split Editor and Grid Tab System

ctrlCmd + number 1, 2, 3 - switch to Nth editor group

ctrlCmd + \ - move file to split editor

Opening and Working with Files

Ctrl + Tab – tab to next file

Ctrl + Shift + Tab - tab to previous file

ctrlCmd + P to quick open files

ctrlCmd + N to create new file

ctrlCmd + Shift + N – new window

cntrlCmd + W – close file

cntrlCmd + S – save file

Navigating and Manipulating Text

Option + Left/Right | Ctrl + Left/Right – Navigate word by word

Cmd + Left/Right | Home/End - Go to beginning/end of line

Cmd+ Up/Down | Ctrl + Home/End - Go to beginning/end of file

ctrlCmd + D – select current word

Cmd + Ctrl + Shift + Left/Right | Shift + Alt + Left/Right - expand/shrink

selection

Alt + Up/Down - move line

Shift + Alt + Up/Down – Duplicate line

ctrlCmd + C - copy selected text or line

ctrlCmd + X - cut selected text or line

ctrlCmd + V - paste

ctrlCmd + Shift + K – delete line

VS Code Cheat Sheet 2

 Cmd + Option + Shift + Up/Down | Ctrl + Shift + Alt + Up/Down - Multiple
Cursors

ctrlCmd + Shift + \\ - jump to matching bracket

Find and Replace

ctrlCmd + F – Search in current file (with and without selected text)

Alt + Cmd + F | Ctrl + H Search and replace in current file (with and
without selected text)

ctrlCmd + Shift + F – Search in workspace (with and without selected text)

ctrlCmd + Shift + 1 - replace next

ctrlCmd + Shift + H – Search and replace in workspace (with and without

selected text)

ctrlCmd + Alt + Enter – replace all

ctrlCmd + Shift + L – select all occurrences of current selection

ctrlCmd + F2 – select all occurrences of current selection

Emmet
Emmet provides shorthand snippets to generate HTML and CSS.

Emmet IO

Emmet Cheat Sheet

Emmet HTML Cheat Sheet

Customization
ctrlCmd + K ctrlCmd + S – keybindings editor

ctrlCmd + , - settings editor

Want a sweet looking FREE font with font ligatures for your
code? Check out Fira Code and/or Cascadia Code

VS Code Cheat Sheet 3

 Useful Extensions
Quokka.js Bookmarks

Bracket Pair Colorizer Prettier Extension

Live Server ESLint Extension

Debugger for Chrome Polacode

JavaScript ES6 Snippets Better Comments

Import Cost VS Code Icons

Settings Sync

Sweet Themes
Cobalt 2 One Dark Pro

Night Owl Dracula Official

Winter is Coming Material Theme

Shades of Purple Rainglow

Writing and Formatting Code

Working with Markdown
ctrlCmd+ Shift + V – open markdown preview
Cmd + Shift + K V | Ctrl + K + V – open markdown preview side by side

Useful Extensions
Markdown Lint

Markdown Shortcuts

Markdown TOC

Learning Markdown Resources

ReadMe Template
Markdown Worksheet

Formatting Code

VS Code Cheat Sheet 4

 Shift + Alt + F – format document

Editor Config Extension

Prettier Extension

ESLint Extension

Debugging
Debugger for Chrome Extension

Debugging frontend JavaScript

{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "<http://localhost:8080>",
"webRoot": "${workspaceFolder}"
}

Debug Configurations for Server Side JavaScript (Node.js)

Launch Node (replace program with your server file)

{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js"
}

Attach to Process (you will need to run your application first with node --inspect

server.js )

{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId": "${command:PickProcess}"
}

VS Code Cheat Sheet 5

 Attach to Port (you will need to run your application first with node --inspect

server.js )

{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229
}

Attach to Port using Nodemon (you will need to run your application first with
nodemon --inspect server.js )

{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"restart": true
}

Debugging Angular CLI Applications

{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost for Angular",
"url": "<http://localhost:4200>",
"webRoot": "${workspaceFolder}"
}

Debugging Create React App Applications

{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost for React",
"url": "<http://localhost:3000>",
"webRoot": "${workspaceFolder}/src"
}

VS Code Cheat Sheet 6