Top 20 VS Code Extension That Every Developer Should Have

VS Code is one of the top choices these days for developers as a text editor. And it is so popular because of the extensions it can have that can drastically enhance and help developers to write better code. Thus, In this article, I will be discussing 20 VS Code extensions that a developer should have!

1) Live Server

You might be daily doing this! Make changes in the code editor, switch to the browser, and refresh to see the changes. That's the endless cycle of a developer, But what if your browser would automatically refresh every time you make changes? That’s where the live server comes in! It also runs your application on the localhost server.
Install now: Live Server

2) Prettier

Code editors sometimes look dull and messy! That’s here prettier will help you. It is one of the best VS Code extensions for a modern-day web developer who needs to follow a well-laid set of rules when designing their pages. It allows the developers to format their code in a structured way thus enhancing the code readability.
Install now: Prettier - Code formatter

3) Quokka

Quokka.Js is a robust, modern-day scratchpad for JS developers who work on the VS code. It checks your code in real-time and provides instant feedback on which blocks have been already executed and which aren't.
Install now: Quokka.js

4) Live Share

It is an innovative extension aimed at increasing your workflow to the highest level. It allows developers to share their code snippets with fellow collaborators in real-time directly from the comfort of your favorite code editor.
Install now: VS Live Share

5) Docker

The docker extension for VS Code is a must-have for both professionals and open source enthusiasts. It offers a wide range of features including syntax highlighting, commands, linting, docker file, and many more.
Install now: Docker

6) Settings Sync

It is here to manage your developer configs conveniently and hassle-free across all of your workstations. It allows developers to utilize their Github account token and gist for managing their development preferences quickly.
Install now: Settings Sync

7) Gitlens

Gitlens is an awe-inspiring open-source extension for VS Code which will make contributing to third party projects easier than ever. It allows users to take full control of the git capabilities built into code and aims to increase productivity to its peak.
Install now: Gittens — Git supercharged

8) Auto rename tag

This one is a quick time saver for the front end developers. Many times we face issues when we rename a tag and forget to rename the closing tag. Here this extension comes in, it automatically renames the closing tag when you rename the opening tag.
Install now: Auto Rename Tag

9) Babel JS

It provides JS syntax highlighting for ES201x, React JSX, Flow, and GraphQL. It is only ported with the syntax highlighting. The transpiring and configuration is not included.
Install now: Babel JavaScript

10) Community Material Theme

As a developer, we love customized things! What if you get this customization is your VS Code editor theme? It provides many themes that can help you make the look and feel of your code editor better.
Install now: Community Material Theme

11) Live Sass Compiler

Sass is CSS with superpowers! Live Sass compiler easily allows you to work with Sass in VS Code. It automatically watches the sass file and as and when changes are made, it renders and generates the corresponding CSS file. It is one of the must-have tools for front end developers.
Install now: Live Sass Compiler

12) Material Icon Theme

I am one of the developers that love to work in an environment with a good look and feel. The material Icon theme provides various themes for icons of the files that are seen in the VS Code. Make your icons fancy right now!
Install now: Material Icon Theme

13) Polacode

Palacode is one of the useful extensions these days. Pola Code allows you to capture the code snippets and save them as png, jpg images. The benefit of this is that you can share your code on social media or in various communities.
Install now: Polacode

14) Language-Specific

As a code editor, you might be using it for various programming technologies. Thus you will need language-specific extensions such as the extension of Python if you want to code in Python, an extension for Java to code in Java, and so on. Thus, you might have various extensions for various technologies that you want to use.
Install now: Language Support

15) Import Cost

This extension allows you to see the size of the imported module. It’s a huge help with blunders such as Webpack. You can see whether you are importing the entire library or just a particular utility.
Install now: Import Cost

16) REST Client

As a web developer, we often need to work with REST APIs. For examining the URLs and checking the responses, tools like Postman are used But why have a different app when your editor can easily do the same task Welcome rest client. It allows you to send HTTP requests and view the response and view the response in the VS Code directly.
Install now: REST Client

17) Todo Highlighter

Many times you leave a comment //TODO; Needs refactoring or something to that effect. But then you forget about the note and push your code to production. With Todo highlighter that won’t happen. It highlights your TODOs into bright colors so it is always clearly visible.
Install now: TODO Highlight

18) Snippets

These are the shorthands in an editor. Come on, who doesn’t like shorthands. For example, instead of writing console.log, hit clg and it's done. There are various snippets extensions for different technologies like JS, React, and more.
Install now: Snippets in Visual Studio Code

19) Bracket Pair Colorizer and Indent rainbow

These 2 extensions work hand in hand and will fill your editor with a flurry of colors and will make the code blocks easily discernible and pleasing to the eyes.
Install now: Bracket Pair Colorizer indent-rainbow

20) Code Spell Checker

A basic spell checker that works well with camelCase codes. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
Install now: Code Spell Checker

Thus this is my list of VS code extensions that you should have as a developer. Comment below with one is your favorite and let me know!