Top 8 VSCode Extensions Every Developer Should Have Installed For Productivity

Andrew Ly
3 min readApr 18, 2021


I have selected my personal Top 8 VSCode Extensions that I believe every developer should have installed for productivity!

Why use Visual Studio Code (VSCode)? Well essentially, it is one of the most popular code editors out there. It’s free, it has a simple interface, and it has countless extensions which adds productivity and fun to your overall coding experience.

Remember, these are strictly my own preference, though I do believe these suggestions will also help newbie developers and perhaps some more seasoned veterans. Let’s get started!

1. One Dark Pro Theme

Themes are useful depending on each individual person. The provide a sense of customizability and are beneficial for readability and those long hours spent behind a monitor so it’s important to select something eye pleasing to yourself! I like this theme in particular, but thankfully the Visual Studio Marketplace has hundreds to choose from, so go nuts! Just promise me you won’t choose a light theme…because that’s just wrong.

Extension Here

2. GitLens

GitLens simply helps you better understand code. That is it. It can:

  • Show who, why, and when a line or code block was changed
  • Jump back through history to gain further insights as to how and why the code evolved
  • Effortlessly explore the history and evolution of a codebase
  • And much, much more!

GitLens is powerful, feature rich, and highly customizable to meet your needs. Do you find code lens intrusive or the current line blame annotation distracting — no problem, quickly turn them off or change how they behave via the interactive GitLens Settings editor.

Extension Here

3. Prettier

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.

This is especially useful when coding for periods of time and not having to worry about continuous formatting.

Extension Here

4. VSCode Icons

Adds icons to your directories and files, making it easy to sift through and find what is what at a glance.

Extension Here

5. Bracket Colorizer 2

This extension allows matching brackets to be identified with colors. The user can easily decipher which tokens to match, and which colors to use. This eliminates the guess work when it comes to coding, which then allows to better find pesky problems and fix them.

Extension Here

6. JavaScript ES6 Snippets

This is handy for JS developers and adds simple keywords that when combined with a hit of tab, will type out. It supports the following:

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)

Extension Here

7. Auto Complete Tag

Another time saver, this extension does exactly what it says: it automatically completes your tag. So for all semantic elements, you’ll just need to type it once and it’ll finish for you. The best part? When you go back and decide to change the first element, it’ll also automatically fix the closing tag too!

Extension Here

8. Live Server

Normally when coding, you have to refresh the page you’re working on to see changes. This can waste valuable time and become tedious after awhile. Well, not anymore! With Live Sever you can hot reload and test changes in your project in real-time when you save. No refreshing required! Just right-click after installation and try it yourself!

Extension Here

Originally published at on April 18, 2021.



Andrew Ly

Founder of Neo Typewriter. He is a published author, podcast host, digital marketer, and full-stack web developer. Read more at: