VS Code Cheat Sheet - Essential Shortcuts & Tips for Developers

Master VS Code with our comprehensive cheat sheet. Discover essential shortcuts, tips, and tricks for efficient coding, from navigation and editing to debugging and extensions.

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