5 VSCode Extensions every Web Developer should use
Tags: vscode, tools, plugins, productivity
Published: 2021-04-06 13:14:06

<span style="color: grey" >Cover Image Credits- [Freepik](https://www.freepik.com/vectors/digital).</span>

For those who are new to programming, Visual Studio Code is a **free**, **feature rich** and **open source** text editor, maintained by Microsoft. It is one of the most popular text editors used by developers across the globe.

VSCode offers a wide range of **extensions**. In this article, I&#39;m going to list down some of my favourite extensions, which I would recommend every web developer to try out.

Starting with the list,

### 1. Prettier - My all time favourite

![https://scottsauber.files.wordpress.com/2017/06/prettier1.gif?w=806](https://scottsauber.files.wordpress.com/2017/06/prettier1.gif?w=806)

Formatting code consistently throughout is a pain, especially when working in a team.

This problem is solved by Prettier, which formats the HTML, CSS, JavaScript, TypeScript and JSON code on save, once configured.
It is a life saver when it comes to indenting and formatting the code.

This extension can be found [here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).

### 2. Live Server

![Live Server GIF](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif)

Live Server sets up a quick development live server on the go, with live browser reloading automatically on save.

Using this extension, we don&#39;t have to manually refresh the browser everytime after making changes in the code. This comes in very handy and saves a lot of time.

We can start or stop the server by a single click from the status bar.
![https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-statusbar-3.jpg](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-statusbar-3.jpg)

This extension can be found [here](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).

### 3. GitLens - Git Supercharged

![GitLens Demonstration GIF](https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/revision-navigation.gif)

We use Git on almost every programming day of our life.
GitLens supercharges the Git capabilities built into Visual Studio Code.

It allows us to have a quick glimpse into **who wrote that code** and **when a line or code block was changed**. We can also jump back through the history to gain further insights as to **how** and **why** the code evolved.

![GitLens Image](https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/code-lens.png)

You must surely try this out if you use Git for version control.

This extension can be found [here](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens).

### 4. Live Share

Live Share has come in very handy during this pandemic, when we were physically distant from each other.

![https://miro.medium.com/max/2066/1*73SgvYrtOG9UupYb2ODejA.gif](https://miro.medium.com/max/2066/1*73SgvYrtOG9UupYb2ODejA.gif)

Developed by Microsoft, Live Share allows us to collaboratively edit and debug with others in real time, regardless what programming languages we&#39;re using or app types we&#39;re building. It allows us to instantly (and securely) share our current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!

It allows developers to work together, while retaining their personal editor preferences (e.g. theme, keybindings), as well as having their own cursor.

This extension can be found [here](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare).

### 5. Material Theme and Material Theme Icons

![Material Theme](https://i.ibb.co/LzRwxp4/Frame.jpg)

As stated in the documentation,

> &quot; With Material Theme your dev experience will get a boost and your eyes will be always grateful to you. &quot;

Material themed icons allow us to replace the existing VSCode icons with beautiful Material Design icons.

![Material Icon Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p84cv75cv0hvr1yc5oj.png)

The Material Theme extension can be found [here](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme),

Material Icon Theme can be found [here](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme).

# Bonus For React Developers


### 6. Simple React Snippets

![Simple React Snippets](https://github.com/burkeholland/simple-react-snippets/raw/master/images/snippets-in-action.gif)

This extension is essentially a collection of simple React Snippets and commands used in day-to-day React.

As stated in the documentation,

> &quot; This is a hand selected set of snippets that work the way that you would expect, not just a copy of the documentation. &quot;

It is just amazing! This extension can be found [here](https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets)

### 7. ES7 React/ Redux/GraphQL/ React-Native snippets

![ES7 React/ Redux/GraphQL/ React-Native snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjdnaph6we7ssudeqq3a.png)

This extension provides us JavaScript and React/Redux snippets in ES7 with Babel plugin features for VSCode

Do check out this extension. This extension can be found [here](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets).

# Conclusion

The usage of extensions gives a boost to our coding speed and drastically increases the productivity of the development. These are my personal favourite extensions. Do share your favourite extensions in the comments below.

Thanks for the read!