back to all posts

Top 10 VS Code Extensions in 2020

by Nabendu Biswas / July 5th, 2020

#html #react #vscode

I had recently formatted my Mac, as it was getting slow. After the format the mac became very fast, but i lost all of my VSCode extensions.

So, after installing VSCode the first thing to do is press Command Key + , to launch the settings. After that increase the Font Size as it is very small. I had set mine to 18. Also, don’t forget to save the file by Cmd+s key.

Font SizeFont Size

The first extension which we will install is the Material Theme. So, click on the Extension icon and then in the search bar give material. The second item will be Material Theme. Click on it and then Install. Since, i had already install it, i am getting Uninstall option.

Material ThemeMaterial Theme

After installing the theme, let’s change to some nice Material theme. Click on the Settings icon on the lower left corner and then click on Color Theme.

Color ThemeColor Theme

It will open a search bar, in which type material to get all the Material theme. Just select anyone and it will be chosen.


Now, while in the same Extension tab click on Material Icon Theme to change all the file icons to better looking Material icons. You need to click on Install.

Material IconsMaterial Icons

After that click on the Settings icon on the lower left corner and then click on Color Theme.

File Icon ThemeFile Icon Theme

Now, select the Material Icon Theme from the next screen.


It is now showing us beautiful File Icons in the File Explorer tab.

File ExplorerFile Explorer

The next extension which i will install is Prettier. So, go ahead and search the extension again in Extension tab and install it. It is a code formatter which formats your code with nice spaces and tabs, so that it looks organized.


It have a format on save option also, which will format the file on Saving it, but i don’t recommend it.

The better way is to come to any code and select it and press Cmd+Shift+P and then search Format Document and click on it.


The next extension which we will install is Bracket Pair Colorizer. So, search for bracket in Extension tab and install it.


Now, if you move to any code you can see that it gives the matching brackets same color and if some other pair of bracket inside it, it will give it different color. In my code it gives pink and yellow bracket colors.


The next extension which we will install is indent-rainbow.


Now, when we move to a code it will show nice rainbow like color for each pair of code with tab.


The next extension which we will install is ES7 React/Redux/React-Native/JS snippets.


This extension gives us access to nice shortcuts for React, redux and many more. It is very useful when we create a new file. In a new file type rcc and it will show all the options.


Now, once you press tab it will give the whole skeleton of a class based component.

Class based componentClass based component

The next extension which we will install is Git History, which is very useful if you are saving your code in github.

Git HistoryGit History

Now, go to any project file which you are committing to github and right-click. After that click on Git: View File History

File HistoryFile History

In the next screen it will show all our commits. We can click on an individual commit and get all the details of it.


The next extensions which we will install are very important in HTML based projects — the projects which only have HTML and CSS files.

So, the plugin which we will install is Auto Rename Tag. So, search for it and install it.

Auto Rename TagAuto Rename Tag

Now, in the html file change any tag name and it will change it’s closing tag automatically.

Tag changedTag changed

The next plugin which we will install is CSS Peek, which will help us to get a peek to the CSS in other file.

CSS PeekCSS Peek

Now, go to any html or jsx file and press Cmd and take mouse over a CSS class to see it’s definition.


The last extension which we will install is the popular Live Server. It is very useful in HTML-CSS projects which give it a react style hot reloading. So, go ahead and install it from Extenstion tab.

Live ServerLive Server

After that go to the index.html file of your site and click on Go Live in the bottom right corner.

Go LiveGo Live

It will open the project on in the default browser. Now anything you change in the code with automatically update in the browser and you don’t have to manually refresh it.

Live projectLive project

Nabendu Biswas