VS Code Cheat Sheet

A complete reference for Visual Studio Code — settings, debugging, tasks, snippets, extensions, Git, and keyboard shortcuts. Click any section to expand or collapse.

Looking for keyboard shortcuts only? VS Code Shortcuts Cheat Sheet →

Command Palette

The Command Palette (Ctrl+Shift+P) is the fastest way to access any VS Code feature — prefix with > for commands, @ for symbols, : for line numbers

# Open Command Palette
Ctrl+Shift+P  (Windows/Linux)
Cmd+Shift+P   (Mac)

# Open file by name
Ctrl+P  /  Cmd+P

# Go to line number
Ctrl+G  /  Cmd+G

# Go to symbol in file
Ctrl+Shift+O  /  Cmd+Shift+O

# Go to symbol in workspace
Ctrl+T  /  Cmd+T

Panel & Sidebar Shortcuts

Learn these panel shortcuts to navigate VS Code without touching the mouse — Explorer, Search, Git, Extensions are the most-used panels

# Toggle Sidebar visibility
Ctrl+B  /  Cmd+B

# Toggle Explorer
Ctrl+Shift+E  /  Cmd+Shift+E

# Toggle Search panel
Ctrl+Shift+F  /  Cmd+Shift+F

# Toggle Source Control
Ctrl+Shift+G  /  Cmd+Shift+G

# Toggle Extensions
Ctrl+Shift+X  /  Cmd+Shift+X

# Toggle Terminal
Ctrl+`  /  Cmd+`

# Toggle Problems panel
Ctrl+Shift+M  /  Cmd+Shift+M

# Focus breadcrumbs
Ctrl+Shift+;  /  Cmd+Shift+;

Editor Groups & Splits

Split editors let you view multiple files side-by-side — use Ctrl+1/2/3 to jump between groups without lifting your hands from the keyboard

# Split editor right
Ctrl+\  /  Cmd+\

# Split editor down
Ctrl+K Ctrl+\  /  Cmd+K Cmd+\

# Focus left/right editor group
Ctrl+1 / Ctrl+2 / Ctrl+3

# Move file to new group
Ctrl+K Ctrl+Shift+Right

# Close editor
Ctrl+W  /  Cmd+W

# Reopen closed editor
Ctrl+Shift+T  /  Cmd+Shift+T

# Navigate editor tabs
Ctrl+Tab  (cycle forward)
Ctrl+Shift+Tab  (cycle backward)

Zen Mode & Display

Zen Mode (Ctrl+K Z) hides all chrome and centers the editor — ideal for focused writing or code review sessions

# Toggle Zen Mode (distraction-free)
Ctrl+K Z  /  Cmd+K Z

# Toggle full screen
F11

# Increase / decrease font size
Ctrl+=  /  Ctrl+-
Cmd+=   /  Cmd+-

# Reset font size
Ctrl+Numpad0  /  Cmd+Numpad0

# Toggle word wrap
Alt+Z  /  Option+Z

# Toggle minimap
View > Minimap  (Command Palette: "Toggle Minimap")

Multi-Cursor Editing

Multi-cursor is one of VS Code's killer features — Ctrl+D to add the next occurrence one at a time lets you refine selections before editing all of them

# Add cursor above / below
Ctrl+Alt+Up / Ctrl+Alt+Down
Cmd+Option+Up / Cmd+Option+Down  (Mac)

# Add cursor at mouse click
Alt+Click  /  Option+Click

# Select all occurrences of current word
Ctrl+Shift+L  /  Cmd+Shift+L

# Add next occurrence to selection
Ctrl+D  /  Cmd+D

# Skip current occurrence, go to next
Ctrl+K Ctrl+D  /  Cmd+K Cmd+D

# Select all occurrences (case-sensitive)
Ctrl+F2  /  Cmd+F2

# Column/box selection
Shift+Alt+drag  /  Shift+Option+drag

Code Folding

Folding (Ctrl+Shift+[) collapses blocks of code to improve readability — fold to level N with Ctrl+K Ctrl+N to see only top-level structure

# Fold current region
Ctrl+Shift+[  /  Cmd+Option+[

# Unfold current region
Ctrl+Shift+]  /  Cmd+Option+]

# Fold all regions
Ctrl+K Ctrl+0  /  Cmd+K Cmd+0

# Unfold all regions
Ctrl+K Ctrl+J  /  Cmd+K Cmd+J

# Fold all block comments
Ctrl+K Ctrl+/  /  Cmd+K Cmd+/

# Fold level 1-7
Ctrl+K Ctrl+1  ...  Ctrl+K Ctrl+7

Line Operations

Alt+Up/Down moves lines without cut/paste — the fastest way to reorganize code without breaking your flow

# Move line up / down
Alt+Up / Alt+Down  /  Option+Up / Option+Down

# Copy line up / down
Shift+Alt+Up / Down  /  Shift+Option+Up / Down

# Delete line
Ctrl+Shift+K  /  Cmd+Shift+K

# Insert line below
Ctrl+Enter  /  Cmd+Enter

# Insert line above
Ctrl+Shift+Enter  /  Cmd+Shift+Enter

# Join line below to end of current
Ctrl+J  /  Cmd+J

# Indent / outdent line
Ctrl+]  /  Ctrl+[
Cmd+]   /  Cmd+[

Refactoring & Code Actions

F2 renames a symbol across the entire workspace — safer than find/replace because it understands scope and won't touch string literals

# Trigger code action / quick fix
Ctrl+.  /  Cmd+.

# Rename symbol (across files)
F2

# Format document
Shift+Alt+F  /  Shift+Option+F

# Format selection
Ctrl+K Ctrl+F  /  Cmd+K Cmd+F

# Organize imports
Shift+Alt+O  /  Shift+Option+O

# Go to definition
F12

# Peek definition
Alt+F12  /  Option+F12

# Find all references
Shift+F12

# Go to implementation
Ctrl+F12  /  Cmd+F12

settings.json — Common Options

Workspace .vscode/settings.json overrides user settings for that project — commit it to share consistent settings with your team

// .vscode/settings.json (workspace) or
// ~/Library/Application Support/Code/User/settings.json (user)
{
  // Editor
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.lineNumbers": "relative",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.rulers": [80, 120],
  "editor.bracketPairColorization.enabled": true,
  "editor.stickyScroll.enabled": true,

  // Files
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "node_modules": true,
    ".git": true
  },

  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.osx": "zsh",

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

Language-Specific Settings

Language-scoped settings override globals only for that file type — use [languageId] brackets and the language ID shown in the status bar bottom-right

// Override settings per language
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.tabSize": 4,
    "editor.formatOnSave": true
  },
  "[go]": {
    "editor.defaultFormatter": "golang.go",
    "editor.tabSize": 4,
    "editor.insertSpaces": false
  },
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
      "comments": "off",
      "strings": "off",
      "other": "off"
    }
  }
}

Keybindings (keybindings.json)

Use "when" clauses to make keybindings context-sensitive — add a "-" prefix to the command name to remove an existing binding without replacing it

// Open: Ctrl+K Ctrl+S  →  "Open Keyboard Shortcuts (JSON)"
[
  // Remap format document
  {
    "key": "ctrl+shift+i",
    "command": "editor.action.formatDocument",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
  },
  // Open terminal with custom key
  {
    "key": "ctrl+alt+t",
    "command": "workbench.action.terminal.new"
  },
  // Run test file
  {
    "key": "ctrl+shift+t",
    "command": "workbench.action.tasks.runTask",
    "args": "test"
  },
  // Remove binding
  {
    "key": "ctrl+k ctrl+k",
    "command": "-editor.action.deleteLines"
  }
]

launch.json — Node.js

The launch.json file configures debugger sessions — "launch" starts a new process, "attach" connects to an already-running process on a debug port

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.js",
      "envFile": "${workspaceFolder}/.env",
      "restart": true,
      "runtimeExecutable": "node",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Attach to Process",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true,
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["--runInBand", "--watchAll=false"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

launch.json — Browser / Chrome

Chrome debugging requires the "Debugger for Chrome" or built-in JS debugger — set breakpoints in VS Code and they hit in the browser via source maps

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "name": "Launch Firefox",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Debug Keyboard Shortcuts

Conditional breakpoints (right-click gutter) only pause when an expression is truthy — essential for debugging loops or functions called hundreds of times

# Start / continue debugging
F5

# Stop debugging
Shift+F5

# Restart debugger
Ctrl+Shift+F5  /  Cmd+Shift+F5

# Step over (next line)
F10

# Step into (enter function)
F11

# Step out (exit function)
Shift+F11

# Toggle breakpoint on current line
F9

# Open Debug Console
Ctrl+Shift+Y  /  Cmd+Shift+Y

# Add to Watch
Right-click selection → "Add to Watch"

# Conditional breakpoint
Right-click gutter → "Add Conditional Breakpoint"

tasks.json — Basic Setup

Tasks automate build, test, and dev server commands inside VS Code — the default build task runs with Ctrl+Shift+B without opening the task picker

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "type": "shell",
      "command": "npm run build",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": ["$tsc"]
    },
    {
      "label": "test",
      "type": "shell",
      "command": "npm test",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "dev server",
      "type": "shell",
      "command": "npm run dev",
      "isBackground": true,
      "problemMatcher": {
        "pattern": { "regexp": "." },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "starting",
          "endsPattern": "ready"
        }
      }
    }
  ]
}

Task Variables & Input

Input variables prompt for values at runtime — use "pickString" for a dropdown or "promptString" for free text, referenced as ${input:id} in commands

// Predefined variables available in tasks.json
// ${workspaceFolder}  — /home/user/my-project
// ${file}            — currently open file
// ${fileBasename}    — filename.ext
// ${fileExtname}     — .ext
// ${fileDirname}     — directory of open file
// ${relativeFile}    — src/index.ts
// ${selectedText}    — current editor selection
// ${env:MY_VAR}      — environment variable

// User input prompts
{
  "version": "2.0.0",
  "inputs": [
    {
      "id": "environment",
      "type": "pickString",
      "description": "Select deployment environment",
      "options": ["staging", "production"],
      "default": "staging"
    }
  ],
  "tasks": [
    {
      "label": "deploy",
      "type": "shell",
      "command": "npm run deploy:${input:environment}"
    }
  ]
}

Snippet File Format

Snippet placeholders use ${N:default} syntax — Tab cycles through them, ${0} marks the final cursor position. Use $TM_FILENAME, $CURRENT_YEAR, etc. for dynamic values

// File: .vscode/<name>.code-snippets  (workspace)
// or:  ~/.config/Code/User/snippets/<lang>.json  (user)
{
  "Console log": {
    "scope": "javascript,typescript",
    "prefix": "cl",
    "body": [
      "console.log('${1:label}:', ${2:value});"
    ],
    "description": "Quick console.log with label"
  },
  "React Function Component": {
    "scope": "javascriptreact,typescriptreact",
    "prefix": "rfc",
    "body": [
      "export default function ${1:ComponentName}() {",
      "  return (",
      "    <div>",
      "      ${2}",
      "    </div>",
      "  );",
      "}"
    ],
    "description": "React function component"
  },
  "TODO comment": {
    "prefix": "todo",
    "body": ["// TODO: ${1:description}"],
    "description": "Add a TODO comment"
  }
}

Built-in Snippet Variables

Snippet variables like $CLIPBOARD and $TM_FILENAME_BASE make snippets context-aware — great for file headers, license blocks, or test boilerplate

// Dynamic variables usable in snippet body:
$TM_FILENAME        // current filename  (index.ts)
$TM_FILENAME_BASE   // filename without extension  (index)
$TM_DIRECTORY       // directory of current file
$TM_FILEPATH        // full file path
$RELATIVE_FILEPATH  // relative to workspace root
$CLIPBOARD          // current clipboard content
$WORKSPACE_NAME     // workspace folder name

// Date/time
$CURRENT_YEAR           // 2025
$CURRENT_MONTH          // 04
$CURRENT_DATE           // 18
$CURRENT_HOUR           // 14
$CURRENT_MINUTE         // 32
$CURRENT_SECONDS_UNIX   // unix timestamp

// Random
$RANDOM         // 6-digit random decimal
$RANDOM_HEX     // 6-digit random hex

Source Control Panel

The inline diff view (click any changed file) is one of VS Code's best features — it shows exactly what changed with full syntax highlighting and edit support

# Open Source Control panel
Ctrl+Shift+G  /  Cmd+Shift+G

# Stage file
Click "+" next to file in Source Control panel

# Unstage file
Click "-" next to staged file

# Discard changes (single file)
Click "↩" next to file (Discard Changes)

# Stage all changes
Click "+" next to "Changes" header

# Commit staged changes
Ctrl+Enter  /  Cmd+Enter  (in message box)

# Commit with message (command line style)
git.commitAll via Command Palette

# Open diff view
Click any changed file in Source Control

.gitignore Patterns

Commit .vscode/settings.json, tasks.json, launch.json, and extensions.json to share team config — but gitignore .vscode/*.vsdb and personal preference files

# Standard patterns
node_modules/
dist/
build/
.env
.env.local
.env.*.local
*.log
npm-debug.log*

# OS files
.DS_Store
Thumbs.db

# IDE files (or don't — team preference)
.vscode/
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

# Language-specific
__pycache__/
*.py[cod]
*.class
*.jar
target/
.gradle/

Recommended extensions.json

Commit .vscode/extensions.json so teammates get prompted to install the same extensions — keeps the team aligned without forcing installations

// .vscode/extensions.json
// Teammates see "Install Recommended Extensions" prompt
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens",
    "ms-vsliveshare.vsliveshare",
    "streetsidesoftware.code-spell-checker",
    "christian-kohler.path-intellisense",
    "ms-azuretools.vscode-docker",
    "bradlc.vscode-tailwindcss",
    "svelte.svelte-vscode",
    "ms-python.python"
  ],
  "unwantedRecommendations": []
}

Terminal Shortcuts

Split terminals (Ctrl+Shift+5) let you run dev server and git commands side-by-side — toggle the whole panel with Ctrl+J without losing your place in the editor

# Open new terminal
Ctrl+`  /  Cmd+`

# Create new terminal instance
Ctrl+Shift+`  /  Cmd+Shift+`

# Kill terminal
Ctrl+Shift+delete (or trash icon)

# Toggle terminal panel
Ctrl+J  /  Cmd+J

# Split terminal
Ctrl+Shift+5  /  Cmd+\

# Switch between terminals
Ctrl+PageUp / PageDown
Cmd+Option+Left / Right  (Mac)

# Scroll terminal
Ctrl+Shift+Up / Down
Shift+PageUp / PageDown

# Clear terminal
Ctrl+K  /  Cmd+K

Terminal Profile Configuration

Set up multiple terminal profiles (bash, zsh, PowerShell, WSL) so you can quickly open the right shell for the task — use the "+" dropdown to choose a profile

// settings.json — configure terminal shells
{
  // Default shell per OS
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.defaultProfile.osx": "zsh",

  // Custom profiles
  "terminal.integrated.profiles.windows": {
    "Git Bash": {
      "source": "Git Bash"
    },
    "WSL Ubuntu": {
      "path": "wsl.exe",
      "args": ["-d", "Ubuntu"]
    }
  },

  // Environment variables
  "terminal.integrated.env.osx": {
    "NODE_ENV": "development"
  },

  // Font and appearance
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.gpuAcceleration": "on"
}

Developer Productivity

GitLens (eamodio.gitlens) and Error Lens (usernamehw.errorlens) are the highest-impact productivity extensions — inline blame and inline errors eliminate context-switching

# Must-have extensions (install via Extensions panel or CLI)
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens
code --install-extension ms-vsliveshare.vsliveshare
code --install-extension christian-kohler.path-intellisense
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension usernamehw.errorlens
code --install-extension wix.vscode-import-cost

# Theme and appearance
code --install-extension zhuangtongfa.material-theme
code --install-extension pkief.material-icon-theme

# AI coding
code --install-extension GitHub.copilot
code --install-extension GitHub.copilot-chat

Language & Framework Extensions

Install language extensions from the official publisher (e.g., ms-python.python, golang.go, rust-lang.rust-analyzer) for the best IntelliSense and debugging support

# JavaScript / TypeScript
code --install-extension ms-vscode.vscode-typescript-next
code --install-extension bradlc.vscode-tailwindcss
code --install-extension dsznajder.es7-react-js-snippets

# Python
code --install-extension ms-python.python
code --install-extension ms-python.black-formatter
code --install-extension ms-python.pylance

# Go
code --install-extension golang.go

# Rust
code --install-extension rust-lang.rust-analyzer

# Docker / Cloud
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vscode-remote.remote-containers
code --install-extension hashicorp.terraform

# Database
code --install-extension ckolkman.vscode-postgres
code --install-extension mtxr.sqltools

Remote Development

Remote-SSH lets you edit files, run terminals, and debug on a remote server as if it were local — all extensions run on the remote, so IntelliSense is fully accurate

# Remote development extension pack
code --install-extension ms-vscode-remote.vscode-remote-extensionpack
# Includes:
# - Remote - SSH (ms-vscode-remote.remote-ssh)
# - Remote - Containers (ms-vscode-remote.remote-containers)
# - Remote - WSL (ms-vscode-remote.remote-wsl)

# Connect via SSH
# 1. Open Command Palette → "Remote-SSH: Connect to Host..."
# 2. Enter: user@hostname
# 3. VS Code reconnects entirely on the remote machine

# SSH config example (~/.ssh/config)
# Host myserver
#   HostName 192.168.1.100
#   User ubuntu
#   IdentityFile ~/.ssh/id_rsa
#   ForwardAgent yes

Multi-Root Workspace (.code-workspace)

Multi-root workspaces let you open multiple unrelated folders in one VS Code window — use ${workspaceFolder:Name} to reference a specific root in tasks and launch configs

// my-project.code-workspace
{
  "folders": [
    {
      "name": "Frontend",
      "path": "./frontend"
    },
    {
      "name": "Backend",
      "path": "./backend"
    },
    {
      "name": "Shared Libs",
      "path": "../shared"
    }
  ],
  "settings": {
    "editor.fontSize": 14,
    "files.exclude": {
      "node_modules": true
    }
  },
  "extensions": {
    "recommendations": [
      "esbenp.prettier-vscode"
    ]
  },
  "launch": {
    "configurations": [
      {
        "name": "Full Stack",
        "type": "node",
        "request": "launch",
        "program": "${workspaceFolder:Backend}/src/index.js"
      }
    ]
  }
}

Workspace Trust & Security

Workspace Trust protects against malicious settings.json or tasks.json in cloned repos — leave it enabled and only trust repos you own or have reviewed

# Workspace Trust — VS Code asks on first open
# "Trusted" mode: all features enabled
# "Restricted" mode: extensions disabled, no task auto-run

# Disable trust prompt for local folders (settings.json)
{
  "security.workspace.trust.enabled": false
}

# View trusted workspaces
# Command Palette → "Manage Workspace Trust"

# Trust current workspace from terminal
# Command Palette → "Workspaces: Trust Workspace"

# Per-folder trust in multi-root
# Each folder can have its own trust level

IntelliSense Triggers

Ctrl+Shift+Space shows parameter hints mid-call — use it when you've already typed the function name and need a reminder of argument types and order

# Trigger suggestions manually
Ctrl+Space  /  Cmd+Space

# Trigger parameter hints (function signature)
Ctrl+Shift+Space  /  Cmd+Shift+Space

# Show hover documentation
Hover over symbol  (or press Ctrl+K Ctrl+I)

# Peek at definition inline
Alt+F12  /  Option+F12

# Open definition in new tab
F12

# Go to type definition
Command Palette → "Go to Type Definition"

# Find all references
Shift+F12

# Call hierarchy (who calls this?)
Shift+Alt+H  /  Shift+Option+H

jsconfig.json / tsconfig.json

A jsconfig.json at the project root enables path alias IntelliSense, type checking for JS files, and accurate auto-imports — essential for large JS projects

// jsconfig.json — enables full JS IntelliSense
{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ESNext",
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    },
    "checkJs": true,
    "strict": false
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

// tsconfig.json — TypeScript projects
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "paths": { "@/*": ["./src/*"] }
  }
}

🔧 What is VS Code?

Visual Studio Code is a free, open-source code editor built by Microsoft, released in 2015. It has rapidly become the world's most popular editor — used by over 73% of developers according to the Stack Overflow Developer Survey. Built on Electron with the Monaco editor at its core, VS Code offers the speed of a text editor with features approaching a full IDE.

Unlike Visual Studio (the full IDE), VS Code is lightweight and cross-platform (Windows, macOS, Linux). Its killer feature is a rich extension ecosystem with over 50,000 extensions covering every language, framework, and workflow.

🚀 Key Features

  • ✓IntelliSense: Smart completions, parameter hints, and type info
  • ✓Built-in Git: Stage, commit, diff, and branch without leaving the editor
  • ✓Integrated debugger: Set breakpoints and inspect variables visually
  • ✓Extensions: 50,000+ extensions for languages, themes, and tools
  • ✓Remote development: Edit files on SSH servers, containers, or WSL
  • ✓Live Share: Real-time collaborative editing and debugging

💡 Why Developers Love It

  • •Fast startup: Opens in under a second even on large projects
  • •Highly customizable: Every keybinding, theme, and behavior is configurable
  • •Free and open source: MIT-licensed codebase on GitHub
  • •Multi-language: First-class support for JS, TS, Python, Go, Rust, Java, C++
  • •Web version: Run at vscode.dev without installing anything
  • •Active development: Monthly releases with new features

VS Code Best Practices

🔧 Commit .vscode/ to Git

Share settings.json, tasks.json, launch.json, and extensions.json with your team. Exclude personal preference files like *.vsdb

⌨️ Learn 5 Shortcuts

Master Ctrl+P, Ctrl+Shift+P, Ctrl+D, Alt+Up/Down, and F2. These alone will 2x your editing speed

📦 Keep Extensions Lean

Too many extensions slow startup. Disable (not uninstall) extensions per workspace rather than globally installing everything

🎨 Use Workspace Themes

Set different color themes per project type in workspace settings — helps visually distinguish between frontend, backend, and config workspaces

🔍 Use Error Lens

Install "Error Lens" extension to see errors/warnings inline next to the code — eliminates the need to hover or check the Problems panel

💾 Enable Format on Save

Set "editor.formatOnSave": true with a consistent formatter (Prettier) across the team — eliminates all formatting debates in code review