Visual Studio Code Extensions To Enhance Productivity in 2021

#productivity #career

Visual Studio Code is a simple yet highly extensible code editor. As developers, we spend a lot of time here—which is why it's so important to get the most out of our editors and streamline and automate where possible.

As we enter 2021, I've compiled a list of extensions that I personally use daily in the hopes that it will help you save time and enhance productivity this year. Do note that while the extensions highlighted below are suitable for all languages, there are language-specific plugins that are also worth exploring.

How To Install a VS Code Extension

Open your Visual Studio Code.
Click the marked button on the panel located left.
In the "Search Extensions" box, type in the name of the extension you would like to download.
Choose the correct search result and click "Install."

Selected VS Code Extensions

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 allows matching brackets to be identified with colors. The user can define which tokens to match and which colors to use.

Remote Containers

Remote Containers lets you use a Docker container as a full-featured development environment. Whether you deploy to containers or not, containers make a great development environment because you can:

Develop with a consistent, easily reproducible toolchain on the same operating system you deploy to.
Quickly swap between different, isolated development environments and safely make updates without worrying about impacting your local machine.
Make it easy for new team members/contributors to get up and running in a consistent development environment.
Try out new technologies or clone a copy of a codebase without impacting your local setup.

Import Cost

Import Cost will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin to detect the imported size.

Path Intellisense

Path Intellisense helps to autocomplete filenames. This extension supports developers to define file paths with accuracy.

Live Share

Live Share provides you with the ability to co-edit, co-debug, have an audio call, chat with your peers, share terminals, servers, look at comments, and more.

Peacock

Peacock subtly changes the color of your Visual Studio Code workspace. It's udeal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to identify your editor quickly.

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Quokka

Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code as you type.

Better Comments

Better Comments will help you create more human-friendly comments in your code. With this extension, you will be able to categorize your annotations into:

Alerts
Queries
TODOs
Highlights
Commented out code can also be styled to make it clear the code shouldn't be there
Any other comment styles you'd like can be specified in the settings

Settings Sync

Settings Sync synchronizes settings, snippets, themes, file icons, launch, keybindings, workspaces, and extensions across multiple machines using GitHub Gist.

Remote - SSH

Remote - SSH lets you use any remote machine with an SSH server as your development environment. This can significantly simplify development and troubleshooting in a wide variety of situations. You can:

Develop on the same operating system you deploy to or use larger, faster or more specialized hardware than your local machine.
Quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.
Access an existing development environment from multiple machines or locations.
Debug an application running somewhere else, such as a customer site or in the cloud.

No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine. You can open any folder on the remote machine and work with it just as you would if the folder were on your machine.

Polacode

This last extension is a fun one—create a Polaroid for your code! If you were planning on taking a screenshot of your code to share on Twitter or a blog post, I highly recommend using this tool for a more aesthetically appealing result.

What Are Your Favorite Extensions?

That concludes my list of most-used extensions! I hope you came across one that will improve your developer productivity this year. What are your favorite VS Code extensions? Please share them in the comments or let me know on Twitter!