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

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.

Additional Resources

Visual Studio Code Marketplace for Extensions

Advanced Customization for Keyboard Shortcuts in VS Code