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.
|Action||Windows Shortcut||Mac Shortcut|
|Open Command Palette|
|Open New File|
|Open New Window|
|Go to File|
|Open Recent File/Folder|
|Open Keyboard Shortcuts|
|Go to Symbol|
|Go to Definition|
|Go to Line|
|Go to Bracket|
|Go to Next/Previous Error or Warning|
|Select Current Line|
|Select All Occurrences of Current Word|
|Edit Line in Place|
|Insert Line Above/Below|
|Move Line Up/Down|
|Toggle Line Comment|
|Add Cursor Above/Below|
|Add Selection to Next Find Match|
|Select All Find Matches|
|Multiple Cursor Editing|
|Toggle Zen Mode|
|Toggle Full Screen|
|Toggle Word Wrap|
|Toggle Problems View|
|Toggle Search Details|
|Show Integrated Terminal|
|Create New Terminal|
|Jump to Matching Bracket|
|Navigate editor group history|
|Focus into 1st, 2nd or 3rd editor group|
|Open Editors View|
|Step into/out of Function|
|Step over Function|
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.
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.
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.
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 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.
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 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.