15 Best VSCode Extensions For Better Programming 2021

15 Best VSCode Extensions For Better Programming 2021
Photo by Robert Bock on Unsplash

It’s time to declutter your VSCode toolbox, and just keep the important ones, here’s your reference.

“Give ordinary people the right tools and they will design and build the most extraordinary things.” — Neil Gershenfeld

I heard someone said, ‘let’s just install every vscode extensions that we find interesting.’ and I was like — ‘I’ll pray for your machines.”

A year ago when I was still working as a Mobile Developer, trying to save resources from memory to performance, I was really conscious of decluttering every tool I have, not just in VSCode of course.

VScode is a powerful tool, but it can also be a pain in the as* if not handled properly.

Imagine having to use Android Studio, XCode, Chrome, and VSCode, something’s gonna explode in a few minutes, I mean unless you’ve had one of the best laptops or machines in the world, but for most of us, we don’t.

So it’s probably time to clean up some stuff in our VSCode toolbox, but use this list as your reference for the tools that you need to keep.

After over 4 years of working as a professional developer, I am sharing with you these 15 Best VSCode extensions that I have been using for years now.

These extensions that are listed are not just for productivity, but it also helps a lot of developers become better programmers.

Programming is already so hard to learn, and leaving the small repetitive tasks from these helpers is quite convenient.

These extensions are my favorite, and I couldn’t thank enough the authors of these tools.

Auto-Close Tag

Using this tool is non-negotiable, every developer needs to use this in their vscode toolbox, it will not only catch possible ‘stupid’ errors but it is very handy, you really don’t have to spend your precious energy thinking about the small stuff like making sure you don’t forget to close your tag.

It has over 4 million downloads for a reason.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Auto Close Tag

Edit description

marketplace.visualstudio.com

Terminal

Terminal with over 853,296 downloads.

Terminal by Jun Han, the same writer for auto-close tag and auto-rename tag. VSCode already has its built-in terminal where you can just open using ctrl+` for mac users.

But it includes some shortcuts to speed up things, check out these features:

  • Run all the commands in Text Editor
  • Run the selected commands in Text Editor
  • Stop the running commands
  • View output in Output Window
  • Open Integrated Terminal at the current file’s directory
  • A quick way to toggle Integrated Terminal

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Bracket Pair Colorizer

With over a 4.5Million downloads.

Bracket Pair Colorizer is also a must-have tool in your VSCode toolbox.

For beginners, this may not make sense right away but if you are working on bigger projects where functions and components become very complicated, a bracket pair colorizer is here to help you.

Its primary function is to make sure every bracket you created will automatically pair its closing bracket so you won’t need to have a hard time finding which closing bracket is which.

And yes, you’re welcome!

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors. The user can define which characters to match…

marketplace.visualstudio.com

Prettier

With over a 10.8Million downloads, and one of the most popular vscode extensions in there.

Another tool for your VSCode toolbox, non-negotiable, INSTALL IT NOW.

It will format your scripts automatically for you to read them easily. Adding proper white space will improve your life, to be honest.

This is super easy to set up, it will automatically format on its own the moment you hit save.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

prettier/prettier-vscode

Visual Studio Code extension for Prettier. Contribute to prettier/prettier-vscode development by creating an account on…

github.com

Path Intellisense

With over a 4.2Million downloads.

Path Intellisense can help with auto-completion for the imports or path after calling a component, for example, and trust me, it helped me big time.

Why do we have to memorize the file’s entire path, it just a waste of resources, when this tool can just do it for you?

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Path Intellisense

Edit description

marketplace.visualstudio.com

Javascript ES6 Code Snippets / Snippets

With over a 4.88Million downloads.

An extension every Javascript developer must-have.

It comes with pre-built support not just for Javascript ES6 but also for Typescript, Reactjs, Vue, and HTML.

Snippets are pretty awesome actually, wherein you don’t have to write the same starting template over and over when you can just type like 3 letters and boom the entire for example HTML structure shows up.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

JavaScript (ES6) code snippets

Edit description

marketplace.visualstudio.com

GitLens

With over 8Million downloads.

Gitlens supercharges the Git functionalities, this is very useful if you are working with your team, it can be really crowded working with extensive projects and so this helps us see the authors of every line in your code.

This tool simply helps developers to understand their codes better, be able to see the history for changes and be able to follow through on how the code grows after being handled by several developers.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

GitLens — Git supercharged

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a…

marketplace.visualstudio.com

VSCode Themes

Material Theme with over a 3.2Million downloads.

This team is one of the extensions every developer looks forward to. Designing our vscode based on our liking is the fun part, there’s no denying it.

The material theme is just one of the hundreds of more themes available in the market, you can always choose yours.

I’m fascinated with dark themes, so my current theme is Community Material Theme Palenight Contrast, just in case you are curious.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Material Theme - Visual Studio Marketplace

The most epic theme meets Visual Studio Code. You can help by reporting issues here. You can install this awesome theme…

marketplace.visualstudio.com

NPM Intellisense

With over a 2.8Million downloads.

It has almost the same functionality as path Intellisense, but they create this one for npm packages.

NPM without a doubt can be a pain not just on how it eats up our memory, but there are just so many in there that’s a bit difficult to track.

If you have been working or planning on taking Nodejs, then you’d see how helpful this tool is, importing several packages or modules, and there are like thousands of them, you really can’t just memorize their paths, right?

Let NPM Intellisense do it for you by simply autocompleting the path.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

npm Intellisense - Visual Studio Marketplace

Visual Studio Code plugin that autocompletes npm modules in import statements. Eliminate context switching and costly…

marketplace.visualstudio.com

Auto Rename Tag

With over a 4.6Million downloads, the Auto-rename tag has become very popular because of how it helps tons of developers.

Its primary purpose itself, auto rename tag, so if you have mistakenly created an opening tag and wanted to change it, the closing tag will also change in real-time.

Some people may find it annoying, but just experience it yourself, for me, the benefit overweighs that annoying part. So I am still using it over the years.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

marketplace.visualstudio.com

Better Comments

With over a 1.4Million downloads.

This is very helpful, especially for beginners, taking notes as much as you can as well as adding comments or notes on some scripts or codes, with having different colors for different purposes is quite handy.

The Better Comments VSCode extension will help you create more human-friendly notes, which is very crucial for starters.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Better Comments - Visual Studio Marketplace

The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you…

marketplace.visualstudio.com

Code Spell Checker

With over a 2.2Million downloads.

“A basic spell checker that works well with camelCase code”

The primary function of this extension is to help catch common spelling errors. Trust me, it's the last thing we would want to deal with when programming.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Code Spell Checker - Visual Studio Marketplace

Extension for Visual Studio Code - Spelling checker for source code

marketplace.visualstudio.com

VSCode Icons

With over a 7.1Million downloads.

This extension is the same with choosing themes, one of which every developer looks forward to, designing it to our liking is exciting and fun.

Know that there are also other icon themes in there that you can check on and find what’s best for you.

I find this extension helpful because with using Icons it's easier to see the kind of file they are, whether it's Javascript, CSS, SASS, PHP, Images, Docker, Python, and many many more.

It makes it easy to distinguish, and it adds colors to our dark world, kidding.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

vscode-icons - Visual Studio Marketplace

Bring icons to your Visual Studio Code ( minimum supported version: 1.40.2 ) To install the extension just execute the…

marketplace.visualstudio.com

Settings Sync

With over a 2.2Million downloads.

Setting sync’s primary function is to help sync your current VSCode setup into all of your machines, so you don’t have to set them up over and over, it simply syncs from themes, icons, and settings.

It has been very useful for me since I am using VSCode on my 3 machines

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Settings Sync

While being free and open-source, if you find it useful, please consider supporting it by donating via PayPal or Open…

marketplace.visualstudio.com

Import Cost

964, 005 downloads.

I’ve recently just bumped into this extension, it simply calculates the size of your imports and I just find it useful to be able to decide whether to just import the entire package or simply just import the specific modules.

It helps, and you’ll appreciate it when you start working on extensive projects.

You can install it directly through your VSCode.

Here’s the documentation if you want to know more about this tool:

Import Cost - Visual Studio Marketplace

Extension for Visual Studio Code - Display import/require package size in the editor

marketplace.visualstudio.com

Most Popular Articles:

How to think like a Senior Developer

7 Habits of Highly Effective Self-taught Developers

5 Practices to Help You Become The Best Developer That You Can Be

Things I’ve Learned After I Left My First Developer Job

Don’t forget to leave 👏🏻. you can send me as many as 50 👏🏻. as you can, it would really help me continue writing and sharing as much good content, free resources, advice, and wisdom for all the developers and aspiring developers out there.

So we could share these articles with everyone who needs this the most. One article at a time, one developer at a time, one dream at a time.

I would really appreciate it and thank you very much for reading!

Follow me for more Self-taught developer writings and inspiration, you can also find me on Instagram. See you there!