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

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

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 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

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