1. cheat-sheets
  2. /vscode

Visual Studio Code Shortcut Cheat Sheet

VS Code Shortcuts and Essential Extensions

Visual Studio Code, or VS Code, is revered due to its powerful features, simplicity, and extensibility. It's not just an ordinary text editor but an all-in-one tool that makes your coding experience smoother and more efficient.

We'll focus on highlighting crucial keyboard shortcuts for both Windows and macOS users, followed by an introduction of both essential and nuanced extensions that can improve your development workflow.

VS Code Shortcuts for Windows and Mac

The list below aims to save you time, increase your productivity, and reduce reliance on manual approaches.

General Shortcuts

ActionWindows ShortcutMac Shortcut
Open Command PaletteCtrl + Shift + PShift + Command + P
Open FileCtrl + OCommand + O
Open FolderCtrl + K, Ctrl + OCommand + K, Command + O
Open New FileCtrl + NCommand + N
Open New WindowCtrl + Shift + NShift + Command + N
Go to FileCtrl + PCommand + P
Open Recent File/FolderCtrl + RCommand + R
SaveCtrl + SCommand + S
Save As...Ctrl + Shift + SShift + Command + S
Save AllCtrl + K, SOption + Command + S
Close EditorCtrl + W/Ctrl + F4Command + W
Open SettingsCtrl + ,Command + ,
Open Keyboard ShortcutsCtrl + K, Ctrl + SCommand + K, Command + S
Go to SymbolCtrl + Shift + OShift + Command + O
Go to DefinitionF12F12
Peek DefinitionAlt + F12Option + F12
Show ReferencesShift + F12Shift + F12
Go to LineCtrl + GCommand + G
Go to BracketCtrl + Shift + \Shift + Command + \
Go to Next/Previous Error or WarningF8/Shift + F8F8/Shift + F8
Select LineCtrl + LCommand + L
Select Current LineCtrl + LCommand + L
Select All Occurrences of Current WordCtrl + F2Command + F2
Edit Line in PlaceCtrl + Shift + LShift + Command + L
Cut LineCtrl + XCommand + X
Copy LineCtrl + CCommand + C
Paste LineCtrl + VCommand + V
Delete LineCtrl + Shift + KShift + Command + K
Insert Line Above/BelowCtrl + Enter/Shift + EnterCommand + Enter/Shift + Enter
Move Line Up/DownAlt + Up/DownOption + Up/Down
Comment/Uncomment LineCtrl + /Command + /
Toggle Line CommentCtrl + /Command + /
Add Cursor Above/BelowCtrl + Alt + Up/DownOption + Up/Down
Add Selection to Next Find MatchCtrl + DCommand + D
Select All Find MatchesCtrl + Shift + LShift + Command + L
Multiple Cursor EditingAlt + ClickOption + Click
Rename SymbolF2F2
Format DocumentShift + Alt + FShift + Option + F
Expand/Collapse RegionCtrl + Shift+ ], Ctrl + Shift + [Option + Command + ], Option + Command + [
Undo/RedoCtrl + Z/Ctrl + YCommand + Z/Command + Shift + Z
Zoom In/OutCtrl + =/-Command + =/-
Reset ZoomCtrl + NumPad0Command + NumPad0
Toggle Zen ModeCtrl + K, ZCommand + K, Z
Toggle Full ScreenF11Control + Command + F
Toggle Word WrapAlt + ZOption + Z
Toggle SidebarCtrl + BCommand + B
Toggle PanelCtrl + JCommand + J
Toggle Problems ViewCtrl + Shift + MShift + Command + M
Toggle Search DetailsCtrl + Shift + JShift + Command + J
Show Integrated TerminalCtrl + ` Control + `
Create New TerminalCtrl + Shift + ` Control + Shift + `
Jump to Matching BracketCtrl + Shift + \Shift + Command + \
Navigate editor group historyCtrl + Shift + TabControl + Shift + Tab
Focus into 1st, 2nd or 3rd editor groupCtrl + 1/2/3Command + 1/Command + 2/Command + 3
Open Editors ViewCtrl + K, ECommand + K, E
Show DebugCtrl + Shift + DShift + Command + D
Toggle breakpointF9F9
Start/Continue DebuggingF5F5
Step into/out of FunctionF11 / Shift + F11F11 / Shift + F11
Step over FunctionF10F10
Stop DebuggingShift + F5Shift + F5
Show hoverCtrl + K, Ctrl + ICommand + K, Command + I

The table above includes key actions and shortcuts for both Windows and Mac. Keep in mind that the actual keys used might differ depending on the specific keyboard layout and language. You can customize or search for specific shortcuts using the Keyboard Shortcuts editor, accessible with Command + K, Command + S on macOS or Ctrl + K, Ctrl + S on Windows. Further details can be found in the Useful Resources section.

FAQs and Useful Insights on Visual Studio Code

1. What differentiates Visual Studio Code from Visual Studio?

Visual Studio Code (VS Code) and Visual Studio are both powerful development tools by Microsoft, but they cater to different needs. VS Code is a lightweight, open-source code editor focused on speed, ease of use, and extensibility, making it a favorite for web development. It supports a wide range of programming languages and frameworks out of the box or through extensions.

On the other hand, Visual Studio is a full-fledged Integrated Development Environment (IDE) that provides a comprehensive suite of tools for building, debugging, and testing software across various platforms, making it more suited for large-scale enterprise and application development.

Here's a simplified comparison:

  • Performance and Size: VS Code is faster and requires less disk space as compared to Visual Studio.

  • Extensibility: Both offer a wide range of extensions, but VS Code's lean core allows for a more straightforward extension experience.

  • Language Support: Visual Studio has robust support for .NET languages, while VS Code provides broader language support through extensions.

  • Platform: VS Code is cross-platform, available on Windows, macOS, and Linux, while Visual Studio is mainly for Windows, with a separate version for macOS.

  • Built-in Tools: Visual Studio comes with more built-in tools such as a robust debugger, form designer, and profiling tools, which are often essential for enterprise-level application development.

2. Why is Visual Studio Code a go-to choice for web developers compared to other text editors and IDEs?

Visual Studio Code (VS Code) carves a niche between the minimalism of text editors like Sublime Text and others, and the comprehensive feature set of Integrated Development Environments (IDEs) like Visual Studio or WebStorm, making it appealing for web developers.

  • Lightweight and Fast: Initially, VS Code operates with less resource consumption compared to full-fledged IDEs, facilitating a quicker switch between files and projects. However, the resource usage may increase with the addition of extensions.

  • Extensible: VS Code starts as a basic editor, but its extension ecosystem allows developers to incorporate specific functionalities as needed. This extensibility is particularly beneficial in the dynamic field of web development.

  • Integrated Tools: Offering built-in Git support, a terminal, and basic debugging tools, VS Code extends a level of integration that can streamline web development workflows, although may not be as comprehensive as some IDEs.

  • Language and Framework Support: While VS Code provides decent support for web technologies, the level of support can be significantly enhanced with extensions, catering to a versatile range of web development projects.

  • Community and Ecosystem: The active community and ecosystem around VS Code offer resources, tutorials, and extensions, aiding web developers across different experience levels.

3. What is the role of Emmet in Visual Studio Code, and how does it improve coding efficiency?

As a feature, Emmet is integrated into Visual Studio Code and designed to speed up web development workflows. It allows developers to write HTML, CSS, and other code using concise abbreviations, which then expands into complete code structures. In addition, it supports a variety of file types beyond just HTML and CSS, including XML, XSL, and files that use syntax inherited from these, like PHP, HAML, Pug, and more. Some examples include:

  • HTML Abbreviations: You can create complex HTML structures using simple expressions. For example, typing ul>li*5 and then pressing Tab will generate an unordered list with five list items.

  • CSS Abbreviations: You can also use Emmet for writing CSS. For example, typing p10 and pressing Tab will generate padding: 10px;.

  • Numbering: Emmet supports automatic numbering for elements. For example, ul>li.item$*5 will generate five list items with a class of item1, item2, etc.

  • Custom Snippets: You can create custom snippets in Emmet to further speed up your workflow.

For configuring Emmet within VS Code and understanding its deeper integration, you can visit the Emmet in Visual Studio Code documentation.

4. How can I extend the capabilities of Visual Studio Code for my development needs?

Extending the capabilities of Visual Studio Code is primarily done through extensions available in the Visual Studio Code Marketplace. Here are steps to extend its functionality:

  • Explore Extensions: Browse and search for extensions in the VS Code Marketplace or directly within VS Code by going to View -> Extensions.

  • Install Extensions: Click on the install button next to the extension you want to add.

  • Configure Extensions: Some extensions may require additional configuration, which can usually be done within the settings of VS Code.

  • Create Your Extensions: If you have unique requirements, you can create and share your own extensions using the VS Code Extensions API.

You can also customize the appearance and behavior of VS Code through settings and themes to create a personalized development environment.

Essential Extensions

Extensions can improve the functionality of VS Code. They are relatively easy to install and set up, and you can find one for almost any purpose. In curating this list, we've considered factors such as longevity, community feedback, popularity within the developer community, and their ability to improve productivity or solve common issues.

Prettier - Code Formatter

The Prettier - Code Formatter extension is a great addition to enhance your code's readability. It is an opinionated code formatter that supports multiple languages and integrates well with most editors, including VS Code. Prettier helps enforce a consistent code style across your project by parsing your code and reprinting it following a set of rules for how your code should look.

This reduces the cognitive load of reading code and leaves no room for debates around code style in code reviews. Be aware that Prettier's opinions may not always align with the preferred code style for specific projects, and while it does offer some configuration options, they are limited compared to ESLint.


If you're working with JavaScript, ESLint is a highly recommended extension. It integrates the popular JavaScript linting utility, ESLint, directly into VS Code, providing real-time feedback and highlighting potential issues as you code. Its primary function is to enforce code quality and maintain coding standards across your projects.

It's highly configurable, allowing you to set your own linting rules or adopt preset configurations. However, the flexibility and power of ESLint also come with a bit of a learning curve. Configuring it to match your project's needs can be somewhat complex for beginners, but its utility in improving code quality is often worth the effort.

Path IntelliSense

Path IntelliSense is a useful extension for developers dealing with larger projects or navigating through deeply nested file structures. It improves productivity by autocompleting filenames in your code, saving time and reducing the chance of errors caused by manual typing.

With this extension, you only need to remember the initial parts of your directory or file names, and it will suggest the rest. While it generally works well out of the box, remember that the efficiency of the autocomplete feature might vary based on the structure and complexity of your project.

Live Server

Live Server provides a local development server for your static and dynamic pages. It greatly simplifies the testing process by instantly reloading your web page in the browser whenever changes are made to the source code. This feature is particularly beneficial for smaller projects, and when working with HTML, CSS, and JavaScript files, allowing for immediate visual feedback and quicker iterations during development.

Do note that Live Server is best suited for simple and smaller-scale web projects. For larger, more complex projects that require a full-fledged backend setup, you might need a more advanced development server setup.

Git Graph

Git Graph is an extension that visualizes the commit history and branching structure of your Git repositories right within VS Code. This extension can be a significant boon for developers seeking to understand the progression and narrative of a project, especially in a collaborative setting. It provides a quick, visual, and interactive way to understand when, how, and by whom changes were introduced.

Git Graph supports a myriad of Git functionalities such as comparing commits, code diff viewing, merging, cherry-picking, rebasing, and much more, all from a visually intuitive interface. Note that while Git Graph is highly useful for visualizing Git repositories, it doesn't replace a thorough understanding of Git commands and processes.

Additional Curated Extensions

Beyond the essential extensions, we've curated a few more that our developers find helpful. These extensions, selected from daily workflows, cater to more specific or niche aspects, potentially uncovering new ways to address strenuous tasks.


TabOut is a simple yet effective extension that streamlines cursor movement within your code. When the cursor is next to a bracket or quote, pressing the Tab key moves the cursor outside, saving you a few keystrokes usually spent on reaching for the arrow keys. This is especially handy in situations with nested code or complex expressions, helping to expedite the coding process.

The extension is active by default but can be disabled in your settings with the "tabout.disableByDefault": true command. You can also toggle the extension on and off with the 'Toggle TabOut' command. The characters to TabOut from are configurable in your settings, allowing for personalized customization to match your coding style.

Error Lens

Error Lens underlines faulty code and brings diagnostic messages to the forefront by placing them right next to the code snippets they refer to. It highlights lines of code with issues and displays messages inline, making it simpler to see what's amiss at a glance.

The extension offers various customization settings like changing the highlight colors, adjusting message display, and providing commands to toggle its features. For instance, with commands like errorLens.toggleError, you can easily switch on/off the error highlighting as per your needs.

Template String Converter

The Template String Converter is another lean and convenient tool for devs who frequently work with JavaScript template strings.

The extension intelligently identifies when you're looking to leverage template literals and automatically converts standard quotes "" or '' to backticks upon typing ${. With this, you can speed up the process of embedding expressions within strings, without the need for manual conversion.

Some noteworthy features and settings include:

  • Auto-correction: If you decide to delete the $ sign or {, the extension smartly replaces the backticks with the original quotes.

  • Nested Quotes: In situations with nested quotes, you have the option to convert the outermost ones to backticks.

  • Nested Template Literals: Even within an existing template string, it's possible to further convert strings to template literals upon recognizing ${.

  • JSX Support: For JSX properties, there's a setting that allows the addition of brackets around the property when converting to a template string.

To refresh your memory, you can read about Template Literals in our Template Literals in ES6 JavaScript guide. Also, feel free to check out the useful resources found below.

Useful Resources

Advanced Customization for Keyboard Shortcuts in VS Code

JavaScript Snippets for Quick Reference

NPM Command Cheat Sheet

Command Line Essentials

Git Cheat Sheet - A Detailed Reference

10 Must-Follow GitHub Repositories for Developers of All Levels