Skip to content

Latest commit

 

History

History
234 lines (174 loc) · 8.4 KB

VS Code Cheat Sheet.md

File metadata and controls

234 lines (174 loc) · 8.4 KB
Raw

Visual Studio 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!

Getting Started

Download VS Code VS Code Insiders

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

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
  • 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.

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

Useful Extensions

Sweet Themes

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

Learning Markdown Resources

ReadMe Template Markdown Worksheet

Formatting Code

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}"
}

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"
}