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
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
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
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
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
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.
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
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
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
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
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!