← Tech Guides

VS Code

Complete Reference & Cheat Sheet for Visual Studio Code

Quick Reference

Essential keyboard shortcuts for maximum productivity. VS Code provides powerful commands to navigate, edit, search, and debug code efficiently.

Command Palette & Navigation

Action Windows/Linux macOS
Command Palette Ctrl+Shift+P or F1 ⇧⌘P
Quick Open (Go to File) Ctrl+P ⌘P
Go to Symbol in File Ctrl+Shift+O ⇧⌘O
Go to Symbol in Workspace Ctrl+T ⌘T
Go to Line Ctrl+G ⌃G
Go to Definition F12 F12
Peek Definition Alt+F12 ⌥F12
Quick Fix Ctrl+. ⌘.

Editing

Action Windows/Linux macOS
Multi-cursor (Alt+Click) Alt+Click +Click
Insert Cursor Above/Below Ctrl+Alt+↑/↓ ⌥⌘↑/↓
Select Next Occurrence Ctrl+D ⌘D
Select All Occurrences Ctrl+Shift+L ⇧⌘L
Column (Box) Selection Shift+Alt+Drag ⇧⌥+Drag
Move Line Up/Down Alt+↑/↓ ⌥↑/↓
Copy Line Up/Down Shift+Alt+↑/↓ ⇧⌥↑/↓
Delete Line Ctrl+Shift+K ⇧⌘K
Toggle Line Comment Ctrl+/ ⌘/
Toggle Block Comment Shift+Alt+A ⇧⌥A
Format Document Shift+Alt+F ⇧⌥F
Fold/Unfold Ctrl+Shift+[/] ⌥⌘[/]

Search & Replace

Action Windows/Linux macOS
Find Ctrl+F ⌘F
Replace Ctrl+H ⌥⌘F
Find in Files Ctrl+Shift+F ⇧⌘F
Replace in Files Ctrl+Shift+H ⇧⌘H
Toggle Regex Alt+R ⌥⌘R
Toggle Case Sensitive Alt+C ⌥⌘C
Toggle Whole Word Alt+W ⌥⌘W

View Management

Action Windows/Linux macOS
Toggle Sidebar Ctrl+B ⌘B
Toggle Panel Ctrl+J ⌘J
Toggle Terminal Ctrl+` ⌃`
Zen Mode Ctrl+K Z ⌘K Z
Split Editor Ctrl+\ ⌘\
Focus Editor Group Ctrl+1/2/3 ⌘1/2/3
Close Editor Ctrl+W ⌘W
Reopen Closed Editor Ctrl+Shift+T ⇧⌘T

Debug & Terminal

Action Windows/Linux macOS
Start/Continue Debug F5 F5
Step Over F10 F10
Step Into F11 F11
Step Out Shift+F11 ⇧F11
Toggle Breakpoint F9 F9
New Terminal Ctrl+Shift+` ⌃⇧`

Editing

Master multi-cursor editing, column selection, code folding, snippets, and Emmet for maximum editing efficiency.

Multi-Cursor Editing

VS Code's multi-cursor support enables simultaneous editing at multiple locations.

Adding Cursors

  • Alt+Click (Win/Linux) | +Click (Mac): Add cursor at click position
  • Ctrl+Alt+↑/↓ (Win/Linux) | ⌥⌘↑/↓ (Mac): Insert cursor above/below
  • Ctrl+D (Win/Linux) | ⌘D (Mac): Select next occurrence of current word
  • Ctrl+Shift+L (Win/Linux) | ⇧⌘L (Mac): Select ALL occurrences
  • Ctrl+F2 (Win/Linux) | ⌘F2 (Mac): Select all occurrences of current word

Column (Box) Selection

Select rectangular blocks of text.

Methods

  1. Mouse: Shift+Alt+Drag (Win/Linux) | ⇧⌥+Drag (Mac)
  2. Keyboard: Ctrl+Shift+Alt+Arrow Keys (Win/Linux) | ⇧⌥⌘+Arrow Keys (Mac)
  3. Middle Mouse Button: Drag with middle mouse button

Move & Copy Lines

  • Move Line Up/Down: Alt+↑/↓ (Win/Linux) | ⌥↑/↓ (Mac)
  • Copy Line Up/Down: Shift+Alt+↑/↓ (Win/Linux) | ⇧⌥↑/↓ (Mac)
  • Delete Line: Ctrl+Shift+K (Win/Linux) | ⇧⌘K (Mac)
  • Insert Line Below: Ctrl+Enter (Win/Linux) | ⌘Enter (Mac)
  • Insert Line Above: Ctrl+Shift+Enter (Win/Linux) | ⇧⌘Enter (Mac)

Code Folding

  • Fold: Ctrl+Shift+[ (Win/Linux) | ⌥⌘[ (Mac)
  • Unfold: Ctrl+Shift+] (Win/Linux) | ⌥⌘] (Mac)
  • Fold All: Ctrl+K Ctrl+0 (Win/Linux) | ⌘K ⌘0 (Mac)
  • Unfold All: Ctrl+K Ctrl+J (Win/Linux) | ⌘K ⌘J (Mac)
  • Fold Level X: Ctrl+K Ctrl+1/2/3... (fold to level 1, 2, 3...)

Custom Folding Regions

// #region My Region
function myFunction() {
  // code
}
// #endregion

Snippets

Pre-defined code templates that expand with Tab key.

Using Snippets

  1. Type snippet prefix
  2. Press Tab to expand
  3. Navigate placeholders with Tab
  4. Exit with Esc or final Tab
Create Custom Snippets: Go to File > Preferences > Configure Snippets. Select language or "New Global Snippets" to define custom snippets in JSON format.

Emmet

Built-in abbreviation expansion for HTML/CSS.

HTML Expansion Example

<!-- Type: div.container>ul>li*3>a -->
<!-- Press Tab to expand to: -->
<div class="container">
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

Common Abbreviations

  • ! - HTML boilerplate
  • ul>li*5 - Unordered list with 5 items
  • div#header - <div id="header"></div>
  • div.class - <div class="class"></div>
  • a[href="#"] - <a href="#"></a>
  • lorem - Lorem ipsum text
  • lorem10 - 10 words of lorem ipsum

CSS Abbreviations

m10      →  margin: 10px;
p10-20   →  padding: 10px 20px;
w100p    →  width: 100%;
df       →  display: flex;

Command Palette & CLI

Access all VS Code commands and launch VS Code from command line with powerful options.

Command Palette

Keyboard Shortcut: Ctrl+Shift+P or F1 (Win/Linux) | ⇧⌘P (Mac)

Central hub for all VS Code commands and actions. Type to filter commands, view keyboard shortcuts, and access recent commands.

Common Commands

  • Preferences: Open Settings (JSON)
  • Preferences: Open Keyboard Shortcuts
  • File: Save All
  • View: Toggle Terminal
  • Git: Clone
  • Extensions: Install Extensions
  • Developer: Reload Window
  • Preferences: Color Theme
  • Format Document
  • Transform to Uppercase/Lowercase

Code CLI

Launch VS Code from command line with powerful options.

Basic Usage

# Open current directory
code .

# Open specific file
code file.js

# Open specific folder
code /path/to/project

# Open file at specific line and column
code file.js:10:5

# Create new window
code -n

# Add folder to current window
code -a /path/to/folder

Diff Mode

# Compare two files
code --diff file1.js file2.js

Extension Management

# List installed extensions
code --list-extensions

# Install extension
code --install-extension ms-python.python

# Uninstall extension
code --uninstall-extension ms-python.python

# Show extension version
code --list-extensions --show-versions

Working with Git

# Use as Git editor
git config --global core.editor "code --wait"

# Use for git diff
git config --global diff.tool vscode
git config --global difftool.vscode.cmd "code --wait --diff \$LOCAL \$REMOTE"

Integrated Terminal

Manage multiple terminal instances with profiles, splits, and shell integration.

Terminal Basics

Toggle Terminal: Ctrl+` (Win/Linux) | ⌃` (Mac)

New Terminal: Ctrl+Shift+` (Win/Linux) | ⌃⇧` (Mac)

Kill Terminal: Click trash icon or exit in shell

Terminal Profiles

Profiles define different shell configurations (PowerShell, Bash, WSL, etc.)

Access profiles by clicking the + dropdown in terminal panel, or use Command Palette > "Terminal: Select Default Profile".

Create Custom Profile (settings.json)

{
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Git Bash": {
      "path": "C:\\Program Files\\Git\\bin\\bash.exe",
      "icon": "terminal-bash"
    }
  },
  "terminal.integrated.defaultProfile.windows": "PowerShell"
}

Split Terminals

Split Terminal: Click split icon or Ctrl+Shift+5

Navigate Splits: Alt+Left/Right arrows

Shell Integration

VS Code integrates with shells to provide enhanced features:

  • Command decorations (success/error indicators)
  • Command navigation (Ctrl+Up/Down)
  • Run recent command from Command Palette
  • Smart detection of errors

Supported Shells

  • PowerShell
  • Bash
  • Zsh
  • Fish
  • Cmd (Windows)

Debugging

Powerful debugging capabilities with breakpoints, watch expressions, call stack inspection, and multi-target debugging.

Debug Setup

Debug View: Ctrl+Shift+D (Win/Linux) | ⇧⌘D (Mac)

Start Debugging: F5

Start Without Debugging: Ctrl+F5

Launch Configuration (launch.json)

Create debug configurations in .vscode/launch.json

Example - Node.js

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/app.js",
      "args": ["--port", "3000"],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal"
    }
  ]
}

Breakpoints

Toggle Breakpoint: F9 or click editor gutter

Breakpoint Types

  • Regular Breakpoint: Pause execution at line
  • Conditional Breakpoint: Pause when expression is true
  • Hit Count Breakpoint: Pause after N hits
  • Logpoint: Log message without pausing

Conditional Breakpoint Examples

// Pause when user.age > 18
user.age > 18

// Pause when array contains specific value
array.includes('target')

// Pause when object has property
obj.hasOwnProperty('key')

Hit Count Examples

> 10        # After more than 10 hits
= 5         # Exactly on 5th hit
< 3         # Before 3rd hit
% 2 == 0    # Every even hit

Debug Actions

  • Continue: F5 - Resume execution
  • Step Over: F10 - Execute current line, step over function calls
  • Step Into: F11 - Step into function calls
  • Step Out: Shift+F11 - Step out of current function
  • Restart: Ctrl+Shift+F5
  • Stop: Shift+F5

Watch Expressions

Add watch in Debug view > Watch section > + icon

Examples

user.name           // Watch variable
arr.length          // Watch property
x + y               // Watch expression
typeof myVar        // Watch type
JSON.stringify(obj) // Watch serialized object

Debug Console

Open: Debug view bottom panel or Ctrl+Shift+Y

Evaluate expressions in current context, execute code statements, and view console output with IntelliSense support.

Usage Examples

// Evaluate variables
> user.name

// Call functions
> processData(input)

// Modify state
> x = 10

// Complex expressions
> users.filter(u => u.age > 18).map(u => u.name)

// Use console methods
> console.table(users)

Git Integration

Built-in Git support with source control view, staging, diffing, timeline, and branch management.

Source Control View

Keyboard Shortcut: Ctrl+Shift+G (Win/Linux) | ⌃⇧G (Mac)

Shows Git changes, staging area, and commit interface with sections for Changes, Staged Changes, and Merge Changes.

Initialize Repository

New Repository

  1. Source Control view > "Initialize Repository"
  2. Or Command Palette > "Git: Initialize Repository"

Clone Repository

  1. Command Palette > "Git: Clone"
  2. Enter repository URL
  3. Select local folder

Staging Changes

  • Stage File: Click + icon next to file
  • Stage All: Click + icon in "Changes" header
  • Unstage File: Click - icon next to staged file
  • Stage Lines/Hunks: Open file diff, right-click > "Stage Selected Ranges"

Committing

Commit: Type message in input box, press Ctrl+Enter

Commit with Options: Click dropdown

Commit Message Convention

feat: Add new feature
fix: Fix bug in component
docs: Update README
style: Format code
refactor: Restructure module
test: Add unit tests
chore: Update dependencies

Viewing Diffs

File Diff: Click file in Source Control view

Diff Actions

  • Navigate changes: F7 (next), Shift+F7 (previous)
  • Revert change: Click icon in diff gutter
  • Stage change: Click + icon in diff gutter
  • Toggle inline/side-by-side: Click in diff toolbar

Branch Management

Current Branch: Shown in status bar (bottom-left)

Switch Branch: Click branch in status bar

Create Branch: Command Palette > "Git: Create Branch"

Common Branch Operations

  • Git: Create Branch
  • Git: Create Branch From...
  • Git: Rename Branch
  • Git: Delete Branch
  • Git: Merge Branch
  • Git: Rebase Branch
  • Git: Checkout to...

Merge Conflicts

When conflicts occur, files appear in "Merge Changes" section.

Conflict Resolution

  1. Click conflicted file to open diff editor
  2. Choose option:
    • "Accept Current Change" (HEAD)
    • "Accept Incoming Change" (merging branch)
    • "Accept Both Changes"
    • "Compare Changes" (manual resolution)
  3. Edit manually if needed
  4. Save file
  5. Stage resolved file
  6. Complete merge commit

Timeline View

Location: Explorer sidebar > "Timeline" section

Shows file history with commits that modified current file. Click commit to view changes, compare with current version, restore file from commit, filter by timeframe, and search commits.

Stash Changes

  • Stash: More Actions (...) > "Stash"
  • Stash with Message: More Actions > "Stash..." > Enter message
  • Apply Stash: More Actions > "Stash" submenu > "Apply Stash..."
  • Pop Stash: Apply and remove from stash list

Extensions & Settings

Customize VS Code with extensions, settings.json, keybindings, profiles, and workspace configurations.

Extensions Management

Extensions View: Ctrl+Shift+X (Win/Linux) | ⇧⌘X (Mac)

Install Extension

  1. Search in Extensions view
  2. Click "Install"
  3. Or Command Palette > "Extensions: Install Extensions"

Popular Extensions

  • Languages: Python, ESLint, C/C++, Go, Rust Analyzer
  • Formatters: Prettier, Beautify
  • Git: GitLens, Git Graph
  • Productivity: Path Intellisense, Auto Rename Tag, Better Comments
  • Remote Development: Remote - SSH, Remote - WSL, Dev Containers
  • Themes: One Dark Pro, Dracula Official, Material Theme

Settings (settings.json)

Open Settings:

  • UI: Ctrl+, (Win/Linux) | ⌘, (Mac)
  • JSON: Ctrl+Shift+P > "Preferences: Open Settings (JSON)"

Settings Scope

  1. User Settings: Apply globally to all VS Code instances
  2. Workspace Settings: Override user settings for specific workspace
  3. Folder Settings: Multi-root workspace folder-specific

Example settings.json

{
  // Editor
  "editor.fontSize": 14,
  "editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.formatOnSave": true,
  "editor.bracketPairColorization.enabled": true,

  // Workbench
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",

  // Files
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,

  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "Cascadia Code",

  // Git
  "git.autofetch": true,
  "git.confirmSync": false
}

Keybindings (keybindings.json)

Open Keybindings:

  • UI: Ctrl+K Ctrl+S (Win/Linux) | ⌘K ⌘S (Mac)
  • JSON: Command Palette > "Preferences: Open Keyboard Shortcuts (JSON)"

Example keybindings.json

[
  {
    "key": "ctrl+shift+s",
    "command": "workbench.action.files.saveAll"
  },
  {
    "key": "ctrl+d",
    "command": "editor.action.deleteLines",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+d",
    "command": "-editor.action.addSelectionToNextFindMatch"
  }
]

Workspace Settings

.vscode/settings.json in workspace root overrides user settings.

Use Cases

  • Team conventions (tab size, formatting)
  • Project-specific linter rules
  • Language-specific settings
  • Build/debug configurations
Share Workspace Settings: Commit .vscode/settings.json to version control so team uses same settings.

Profiles

Purpose: Switch between different VS Code configurations for different workflows.

Create Profile

  1. Command Palette > "Profiles: Create Profile"
  2. Choose what to include: Settings, Keyboard Shortcuts, Extensions, UI State
  3. Name profile (e.g., "Python Dev", "Web Frontend", "Writing")

Switch Profiles

  • Status bar (bottom-left) > Click profile name
  • Command Palette > "Profiles: Switch Profile"

Example Profiles

  • Python Development: Python extension, linting, testing tools
  • Web Frontend: React, ESLint, Prettier, Chrome debugging
  • Writing: Markdown extensions, spell checker, minimal UI
  • Data Science: Jupyter, Python, visualization tools

Settings Sync

Sync settings, extensions, keybindings, and UI state across machines.

Enable Settings Sync

  1. Click gear icon (bottom-left) > "Turn on Settings Sync"
  2. Sign in with Microsoft or GitHub account
  3. Select what to sync: Settings, Keyboard Shortcuts, Extensions, UI State, Snippets

Remote Development

Use containers, remote machines, WSL, or GitHub Codespaces as full-featured development environments.

Remote Development Overview

VS Code Remote Development allows you to use a container, remote machine, or WSL as a full-featured development environment.

Remote Extensions (Extension Pack)

  • Remote - SSH
  • Remote - WSL
  • Dev Containers
  • Remote - Tunnels

Install: Search "Remote Development" in Extensions view

Remote - SSH

Connect to Remote Machine

  1. Command Palette > "Remote-SSH: Connect to Host"
  2. Enter user@hostname or select configured host
  3. Choose platform (Windows/Linux/macOS)
  4. VS Code connects and opens remote window

SSH Config (~/.ssh/config)

Host myserver
    HostName 192.168.1.100
    User username
    Port 22
    IdentityFile ~/.ssh/id_rsa

Host aws-server
    HostName ec2-xx-xx-xx-xx.compute.amazonaws.com
    User ubuntu
    IdentityFile ~/.ssh/aws-key.pem
    ForwardAgent yes

Features

  • Full VS Code features on remote machine
  • Extensions run on remote
  • Terminal opens on remote
  • Port forwarding
  • File system access

Remote - WSL (Windows Subsystem for Linux)

Open Folder in WSL

  1. Command Palette > "WSL: Open Folder in WSL"
  2. Select WSL distribution (if multiple)
  3. Choose folder

From Terminal

# In WSL terminal
code .

Features

  • Develop in Linux environment on Windows
  • Access Linux file system
  • Use Linux tools and compilers
  • Run Linux-based servers

Dev Containers (Remote - Containers)

Purpose: Develop inside Docker container with isolated environment.

Open Folder in Container

  1. Command Palette > "Dev Containers: Open Folder in Container"
  2. Select folder
  3. Choose container configuration (or create new)

Devcontainer Configuration (.devcontainer/devcontainer.json)

{
  "name": "Node.js Development",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",

  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {},
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },

  "forwardPorts": [3000, 8080],
  "postCreateCommand": "npm install",

  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ],
      "settings": {
        "editor.formatOnSave": true
      }
    }
  }
}

Container Features

  • Isolated environment
  • Reproducible development setup
  • Same environment across team
  • Multiple services (database, cache, etc.)
  • No local installation pollution

Remote - Tunnels

Purpose: Secure connection to remote machine without SSH configuration.

Create Tunnel on Remote Machine

# Install VS Code CLI on remote
curl -Lk 'https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64' --output vscode_cli.tar.gz
tar -xf vscode_cli.tar.gz

# Create tunnel
./code tunnel
# Follow authentication prompts

Connect via Tunnel

  1. Command Palette > "Remote-Tunnels: Connect to Tunnel"
  2. Sign in with GitHub/Microsoft
  3. Select tunnel from list

Features

  • No SSH setup required
  • Works through firewalls/NAT
  • Browser-based option (vscode.dev)
  • Secure authentication via GitHub/Microsoft

GitHub Codespaces

Purpose: Cloud-hosted development environment on GitHub.

Create Codespace

  1. On GitHub repo page, click "Code" > "Codespaces"
  2. Click "Create codespace on main"
  3. Codespace opens in browser or VS Code

Features

  • Pre-configured environment
  • Automatic GitHub integration
  • Runs in cloud (2, 4, 8, 16, or 32 cores)
  • Persistent across sessions
  • Free tier available

Port Forwarding

Forward ports from remote to local machine.

Forward Port

  1. Ports view (in Panel, next to Terminal)
  2. Click "Forward a Port"
  3. Enter port number

VS Code detects running servers and suggests forwarding automatically.

Pro Tips

Advanced features and workflows to supercharge your VS Code productivity.

Multi-Root Workspaces

Work with multiple project folders simultaneously.

Create Multi-Root Workspace

  1. File > Add Folder to Workspace
  2. Add multiple folders
  3. File > Save Workspace As... (save as .code-workspace file)

Benefits

  • Related projects in one window
  • Shared settings across folders
  • Search across all folders
  • Unified source control
  • Monorepo development

Tasks (tasks.json)

Automate build, test, and deployment workflows.

Create Tasks

  1. Command Palette > "Tasks: Configure Task"
  2. Select task type or template
  3. Edit .vscode/tasks.json

Example tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build",
      "type": "shell",
      "command": "npm run build",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      },
      "problemMatcher": ["$tsc"]
    },
    {
      "label": "Test",
      "type": "shell",
      "command": "npm test",
      "group": {
        "kind": "test",
        "isDefault": true
      }
    }
  ]
}

Run Tasks

  • Ctrl+Shift+B: Run default build task
  • Ctrl+Shift+P > "Tasks: Run Task"
  • Ctrl+Shift+P > "Tasks: Run Test Task"

Zen Mode

Ctrl+K Z (Win/Linux) | ⌘K Z (Mac)

  • Distraction-free coding
  • Hides all UI except editor
  • Full screen mode
  • Exit with Esc twice

Command Line Tricks

# Compare files
code --diff file1.js file2.js

# Open at specific line
code --goto file.js:42

# Wait for file to close
code --wait

# Export extensions list
code --list-extensions > extensions.txt

# Install extensions from list
cat extensions.txt | xargs -L1 code --install-extension

Refactoring Shortcuts

  • F2: Rename symbol across files
  • Ctrl+Shift+R (Win/Linux) | ⌃⇧R (Mac): Refactor menu
  • Extract method, variable, constant
  • Move to new file

Peek Features

  • Peek Definition: Alt+F12
  • Peek References: Shift+F12
  • Peek Implementation: Ctrl+Shift+F12

File Comparison

  • Right-click file in Explorer > "Select for Compare"
  • Right-click another file > "Compare with Selected"

Settings Search

In Settings UI, use @modified to see only changed settings.

Workspace Trust

Security feature to protect against malicious code in untrusted workspaces.

Trust Levels

  • Trusted: Full functionality enabled
  • Restricted Mode: Limited functionality (no task execution, debugging, etc.)
Manage Trust: Command Palette > "Workspaces: Manage Workspace Trust" or Settings > "Security: Workspace Trust"