VS Code Cheat Sheet
Visual Studio Code Essential Cheat Sheet
This cheat sheet provides a comprehensive collection of essential shortcuts, commands, and tips for Visual Studio Code (VS Code) to enhance your development workflow. Master VS Code's powerful features to code faster and more efficiently.
Navigation and File Access
Go to File
Quickly open any file in your project.
Ctrl + P
This is a powerful replacement for traditional "Open File" dialogs, allowing fuzzy searching through your project files.
Go to Symbol in File
Navigate to specific symbols (functions, variables, classes) within the current file.
Ctrl + Shift + O
Go to Symbol in Workspace
Search for symbols across your entire project.
Ctrl + T
Explore more code navigation features: Code Navigation
Editing and Formatting
Vertical Editing and Multi-line String Manipulation
Efficiently edit multiple lines simultaneously or change repeating patterns.
Ctrl + F
Alt + Enter
Learn more about multi-line editing: Multiline editing in Visual Studio Code
Code Formatting
Automatically format your code to maintain consistent style.
- On Windows:
Shift + Alt + F
- On Mac:
Shift + Option + F
- On Ubuntu:
Ctrl + Shift + I
For advanced formatting, consider the Prettier - Code formatter extension.
See also: Code Formatting in VS Code
Delete Line
Remove the current line of code quickly.
Shift + Del
Reference: Delete a line in Visual Studio without copying it?
Toggle Comment
Comment or uncomment lines of code.
Ctrl + K + C
Ctrl + /
Column Select (Box Selection)
Select text in columns for precise editing.
Shift + Alt then drag mouse
Ctrl + Shift + Alt then arrow keys
Details on column selection: Selecting columns in Visual Studio Code
Integrated Terminal and Preview
Open Integrated Terminal
Access your command-line interface directly within VS Code.
Ctrl + `
Markdown Preview
View your Markdown files rendered in real-time.
Ctrl + Shift + V
: Toggle between editor and preview.
Ctrl + K V
: Open preview side-by-side.
Learn more about Markdown support: Markdown in Visual Studio Code
IDE Configuration and Settings
Edit Settings.json
Access and modify VS Code's user and workspace settings.
Ctrl + Shift + P
Then type "Open Settings (JSON)".
Language-Specific Tips
Java Development
JVM Arguments Configuration
Configure Java Virtual Machine arguments in your launch.json
file for debugging.
"vmArgs": [
"-Xms256m",
"-Xmx256m",
"-XX:+HeapDumpOnOutOfMemoryError",
"-XX:HeapDumpPath=${workspaceFolder}/gc.hprof"
]
Refer to: Launch Options for Java Debugging
Organize Imports
Clean up unused imports in your Java code.
Alt + Shift + O (Windows)
Option + Shift + O (Mac)
Related discussion: Remove unused imports and declarations
HTML and Emmet
Leverage VS Code's built-in HTML support and Emmet for rapid HTML development.
Learn more: HTML in Visual Studio Code
New HTML Template with Emmet
Generate a basic HTML5 document structure instantly.
! + Tab
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
</html>
Essential VS Code Extensions
GitLens
Supercharge your Git capabilities within VS Code.
Accept All Incoming Changes
Resolve merge conflicts efficiently.
Ctrl+Shift+P merge
Merge Conflict: Accept All Incoming
See also: How can I accept all current changes in VSCode at once?
Docker
Develop, manage, and debug containerized applications.
REST Client
Send HTTP requests and view responses directly in VS Code.
Prettier - Code formatter
Enforce consistent code style across your projects.
Configure to format on save: Settings >> Editor: Format On Save
Extension details: Prettier - Code formatter (On GitHub)
Alternative: js-beautify for VS Code.
CSS Peek
Jump to the CSS definition from HTML.
Extension: CSS Peek
Material Icon Theme
Add beautiful icons to your file explorer.
Extension: Material Icon Theme
Visual Studio IntelliCode
AI-assisted development features.
Remote - WSL
Develop directly in the Windows Subsystem for Linux.
Live Server
Launch a local development server with live reload feature for static and dynamic pages.
Python
Enhance your Python development experience.
Auto Rename Tag
Automatically rename the matching HTML/XML tag.
Extension: Auto Rename Tag
Shades of Purple
A popular color theme for VS Code.
Peacock
Personalize your VS Code workspace with color.
Advanced Features
Open with VS Code from Explorer
Add VS Code to your Windows context menu for easy opening.
This feature is typically configured during VS Code installation. If missed, you can manually add it via Windows Registry edits.
Reference: Open with VS Code from right click in Windows Explorer