Complete Reference & Cheat Sheet for Visual Studio Code
Essential keyboard shortcuts for maximum productivity. VS Code provides powerful commands to navigate, edit, search, and debug code efficiently.
| 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+. | ⌘. |
| 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+[/] | ⌥⌘[/] |
| 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 |
| 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 |
| 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+` | ⌃⇧` |
Master multi-cursor editing, column selection, code folding, snippets, and Emmet for maximum editing efficiency.
VS Code's multi-cursor support enables simultaneous editing at multiple locations.
Select rectangular blocks of text.
// #region My Region
function myFunction() {
// code
}
// #endregion
Pre-defined code templates that expand with Tab key.
Built-in abbreviation expansion for HTML/CSS.
<!-- 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>
! - HTML boilerplateul>li*5 - Unordered list with 5 itemsdiv#header - <div id="header"></div>div.class - <div class="class"></div>a[href="#"] - <a href="#"></a>lorem - Lorem ipsum textlorem10 - 10 words of lorem ipsumm10 → margin: 10px;
p10-20 → padding: 10px 20px;
w100p → width: 100%;
df → display: flex;
Powerful find and replace capabilities across files with regex support and search editor for advanced workflows.
Keyboard Shortcut: Ctrl+F (Win/Linux) | ⌘F (Mac)
Keyboard Shortcut: Ctrl+H (Win/Linux) | ⌥⌘F (Mac)
Keyboard Shortcut: Ctrl+Shift+F (Win/Linux) | ⇧⌘F (Mac)
# Include files (glob patterns)
*.js,*.ts # JavaScript and TypeScript
src/**/*.jsx # All JSX in src directory
# Exclude files
**/node_modules # Exclude node_modules
**/*.min.js # Exclude minified files
Click regex icon (.*) or press Alt+R to enable.
\d+ # One or more digits
\w+ # Word characters
^start # Line starts with
end$ # Line ends with
. # Any character
\. # Literal dot (escaped)
[abc] # Any of a, b, c
[^abc] # Not a, b, or c
(group) # Capture group
foo|bar # foo OR bar
Search: function (\w+)\((.*?)\)
Replace: const $1 = ($2) =>
// Before:
function myFunc(a, b) {
// After:
const myFunc = (a, b) =>
$0 - Entire match$1, $2, etc. - Capture groups\u$1 - Uppercase first group\l$1 - Lowercase first group\U$1 - Uppercase entire group\L$1 - Lowercase entire groupOpen: Ctrl+Shift+P > "Search Editor: Open New Search Editor"
Provides persistent, editable search results. Edit search results directly, rerun search, apply changes back to files, and save search queries for reuse.
Access all VS Code commands and launch VS Code from command line with powerful options.
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.
Launch VS Code from command line with powerful options.
# 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
# Compare two files
code --diff file1.js file2.js
# 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
# 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"
Manage multiple terminal instances with profiles, splits, and shell integration.
Toggle Terminal: Ctrl+` (Win/Linux) | ⌃` (Mac)
New Terminal: Ctrl+Shift+` (Win/Linux) | ⌃⇧` (Mac)
Kill Terminal: Click trash icon or exit in shell
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".
{
"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 Terminal: Click split icon or Ctrl+Shift+5
Navigate Splits: Alt+Left/Right arrows
VS Code integrates with shells to provide enhanced features:
Powerful debugging capabilities with breakpoints, watch expressions, call stack inspection, and multi-target debugging.
Debug View: Ctrl+Shift+D (Win/Linux) | ⇧⌘D (Mac)
Start Debugging: F5
Start Without Debugging: Ctrl+F5
Create debug configurations in .vscode/launch.json
{
"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"
}
]
}
Toggle Breakpoint: F9 or click editor gutter
// 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')
> 10 # After more than 10 hits
= 5 # Exactly on 5th hit
< 3 # Before 3rd hit
% 2 == 0 # Every even hit
Add watch in Debug view > Watch section > + icon
user.name // Watch variable
arr.length // Watch property
x + y // Watch expression
typeof myVar // Watch type
JSON.stringify(obj) // Watch serialized object
Open: Debug view bottom panel or Ctrl+Shift+Y
Evaluate expressions in current context, execute code statements, and view console output with IntelliSense support.
// 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)
Built-in Git support with source control view, staging, diffing, timeline, and branch management.
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.
+ icon next to file+ icon in "Changes" header- icon next to staged fileCommit: Type message in input box, press Ctrl+Enter
Commit with Options: Click ✓ dropdown
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
File Diff: Click file in Source Control view
⮌ icon in diff gutter+ icon in diff gutter⋮ in diff toolbarCurrent Branch: Shown in status bar (bottom-left)
Switch Branch: Click branch in status bar
Create Branch: Command Palette > "Git: Create Branch"
When conflicts occur, files appear in "Merge Changes" section.
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"Customize VS Code with extensions, settings.json, keybindings, profiles, and workspace configurations.
Extensions View: Ctrl+Shift+X (Win/Linux) | ⇧⌘X (Mac)
Open Settings:
{
// 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
}
Open Keybindings:
[
{
"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"
}
]
.vscode/settings.json in workspace root overrides user settings.
.vscode/settings.json to version control so team uses same settings.
Purpose: Switch between different VS Code configurations for different workflows.
Sync settings, extensions, keybindings, and UI state across machines.
Use containers, remote machines, WSL, or GitHub Codespaces as full-featured development environments.
VS Code Remote Development allows you to use a container, remote machine, or WSL as a full-featured development environment.
Install: Search "Remote Development" in Extensions view
user@hostname or select configured hostHost 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
# In WSL terminal
code .
Purpose: Develop inside Docker container with isolated environment.
{
"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
}
}
}
}
Purpose: Secure connection to remote machine without SSH configuration.
# 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
Purpose: Cloud-hosted development environment on GitHub.
Forward ports from remote to local machine.
VS Code detects running servers and suggests forwarding automatically.
Advanced features and workflows to supercharge your VS Code productivity.
Work with multiple project folders simultaneously.
.code-workspace file)Automate build, test, and deployment workflows.
.vscode/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
}
}
]
}
Ctrl+K Z (Win/Linux) | ⌘K Z (Mac)
# 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
In Settings UI, use @modified to see only changed settings.
Security feature to protect against malicious code in untrusted workspaces.