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 + B - Toggle git
ctrlCmd + Shift + B - Toggle side bar
ctrlCmd + Shift + B - Toggle search
ctrlCmd + Shift + B - Toggle debug
ctrlCmd + K Z - Toggle Zen Mode
ctrlCmd + Shift + B - Toggle file editor
ctrlCmd + Shift + P - Command Palette
ctrlCmd + Shift + B - 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

VS Code Cheat Sheet 1

 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

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

Useful Extensions
Bookmarks
Quokka.js
Prettier Extension
Bracket Pair Colorizer
ESLint Extension
Live Server
Polacode
Debugger for Chrome
Better Comments
JavaScript ES6 Snippets
VS Code Icons
Import Cost

Settings Sync

Sweet Themes
Cobalt 2 One Dark Pro

Night Owl Dracula Official

VS Code Cheat Sheet 2

 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
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 3

 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 4