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 primarily focus on highlighting crucial keyboard shortcuts for both Windows and macOS users, followed by a brief introduction to five essential extensions that can improve your development workflow.
VS Code Shortcuts for Windows and Mac
The list below aims to save you time and increase your productivity, and ultimately reduce the reliance on manual approaches.
General Shortcuts
Action | Windows Shortcut | Mac Shortcut |
---|---|---|
Open Command Palette | Ctrl + Shift + P | Shift + Command + P |
Open File | Ctrl + O | Command + O |
Open Folder | Ctrl + K, Ctrl + O | Command + K, Command + O |
Open New File | Ctrl + N | Command + N |
Open New Window | Ctrl + Shift + N | Shift + Command + N |
Go to File | Ctrl + P | Command + P |
Open Recent File/Folder | Ctrl + R | Command + R |
Save | Ctrl + S | Command + S |
Save As... | Ctrl + Shift + S | Shift + Command + S |
Save All | Ctrl + K, S | Option + Command + S |
Close Editor | Ctrl + W/Ctrl + F4 | Command + W |
Open Settings | Ctrl + , | Command + , |
Open Keyboard Shortcuts | Ctrl + K, Ctrl + S | Command + K, Command + S |
Go to Symbol | Ctrl + Shift + O | Shift + Command + O |
Go to Definition | F12 | F12 |
Peek Definition | Alt + F12 | Option + F12 |
Show References | Shift + F12 | Shift + F12 |
Go to Line | Ctrl + G | Command + G |
Go to Bracket | Ctrl + Shift + \ | Shift + Command + \ |
Go to Next/Previous Error or Warning | F8/Shift + F8 | F8/Shift + F8 |
Select Line | Ctrl + L | Command + L |
Select Current Line | Ctrl + L | Command + L |
Select All Occurrences of Current Word | Ctrl + F2 | Command + F2 |
Edit Line in Place | Ctrl + Shift + L | Shift + Command + L |
Cut Line | Ctrl + X | Command + X |
Copy Line | Ctrl + C | Command + C |
Paste Line | Ctrl + V | Command + V |
Delete Line | Ctrl + Shift + K | Shift + Command + K |
Insert Line Above/Below | Ctrl + Enter/Shift + Enter | Command + Enter/Shift + Enter |
Move Line Up/Down | Alt + Up/Down | Option + Up/Down |
Comment/Uncomment Line | Ctrl + / | Command + / |
Toggle Line Comment | Ctrl + / | Command + / |
Add Cursor Above/Below | Ctrl + Alt + Up/Down | Option + Up/Down |
Add Selection to Next Find Match | Ctrl + D | Command + D |
Select All Find Matches | Ctrl + Shift + L | Shift + Command + L |
Multiple Cursor Editing | Alt + Click | Option + Click |
Rename Symbol | F2 | F2 |
Format Document | Shift + Alt + F | Shift + Option + F |
Expand/Collapse Region | Ctrl + Shift+ ], Ctrl + Shift + [ | Option + Command + ], Option + Command + [ |
Undo/Redo | Ctrl + Z/Ctrl + Y | Command + Z/Command + Shift + Z |
Zoom In/Out | Ctrl + =/- | Command + =/- |
Reset Zoom | Ctrl + NumPad0 | Command + NumPad0 |
Toggle Zen Mode | Ctrl + K, Z | Command + K, Z |
Toggle Full Screen | F11 | Control + Command + F |
Toggle Word Wrap | Alt + Z | Option + Z |
Toggle Sidebar | Ctrl + B | Command + B |
Toggle Panel | Ctrl + J | Command + J |
Toggle Problems View | Ctrl + Shift + M | Shift + Command + M |
Toggle Search Details | Ctrl + Shift + J | Shift + Command + J |
Show Integrated Terminal | Ctrl + ` | Control + ` |
Create New Terminal | Ctrl + Shift + ` | Control + Shift + ` |
Jump to Matching Bracket | Ctrl + Shift + \ | Shift + Command + \ |
Navigate editor group history | Ctrl + Shift + Tab | Control + Shift + Tab |
Focus into 1st, 2nd or 3rd editor group | Ctrl + 1/2/3 | Command + 1/Command + 2/Command + 3 |
Open Editors View | Ctrl + K, E | Command + K, E |
Show Debug | Ctrl + Shift + D | Shift + Command + D |
Toggle breakpoint | F9 | F9 |
Start/Continue Debugging | F5 | F5 |
Step into/out of Function | F11 / Shift + F11 | F11 / Shift + F11 |
Step over Function | F10 | F10 |
Stop Debugging | Shift + F5 | Shift + F5 |
Show hover | Ctrl + K, Ctrl + I | Command + 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 Additional Resources section.
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.
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.