10 VS Code Extensions for Improving Productivity
Tags: vscode, tutorial, productivity, programming
Published: 2023-07-09 03:30:00


## 10 VS Code Extensions for Improving Productivity

VS code extensions help everyone write code faster and increase productivity. So today I am going to share some extensions that will help makes your coding easy.




![[**Created By Author ( Rutik Patel )](https://rutikkpatel.medium.com/)**](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgers6gkir4l974fppkk.png)



&nbsp;
## Extensions
>  *Extensions made our task easy by providing some snippets, showing live changes, collaborating with others, and much more.*

&nbsp;
## List of extensions

 1. Tabnine

 2. GitLens

 3. Regex Previewer

 4. Live Server

 5. Better comments

 6. Polacode

 7. Colorize

 8. Auto Rename Tag

 9. Indent Rainbow

 10. Peacock

&nbsp;

**Let's start….**

## 1. Tabnine

It helps to Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more.

**Download Link :** [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)

![[Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)](https://cdn-images-1.medium.com/max/2000/1*_AYAvpGOKdXD47eNfHGZoA.png)


&nbsp;
### **Demo :**

![](https://cdn-images-1.medium.com/max/2000/0*0EZejfvC2vNsmRIs.gif)

![](https://cdn-images-1.medium.com/max/2000/0*2GWUrW3jJq_7LHmX.gif)


&nbsp;
## 2. GitLens — Git supercharged

Using this, we can quickly see who wrote a piece of code, easily navigate and explore Git repositories, obtain insightful knowledge through rich visualizations and robust comparison tools, and much more.

**Download Link :** [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

![[GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)](https://cdn-images-1.medium.com/max/2000/1*UL89Zoi8vEgQQ9p_rEFqBg.png)


&nbsp;
## 3. Regex Previewer

It visualizes the regular expression code into normal preview.

**Download Link :** [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)

![[Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)](https://cdn-images-1.medium.com/max/2000/1*LJI2-ac47v-Gbo1ryEZg1g.png)


&nbsp;
### **Demo :**

![Provided by [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)](https://cdn-images-1.medium.com/max/2000/0*btPNwIyvK1xO3ndR.gif)

---

**My VS Code Setup : [https://rutikkpatel.medium.com/my-vs-code-setup-a319478117a7](https://rutikkpatel.medium.com/my-vs-code-setup-a319478117a7)**

---


&nbsp;
## 4. Live Server

It provides live reload functionality in the local server

**Download Link :** [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

![[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)](https://cdn-images-1.medium.com/max/2000/0*q48M9DEnHTZrhkfl.png)


&nbsp;
## 5. Better Comments

Provides a way to write better easily understandable comments.

**Download Link :** [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

![[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)](https://cdn-images-1.medium.com/max/2000/1*NDSj5QPUWCwdu6mUUU1oZA.png)


&nbsp;
## 6. Polacode

One of the handy tools that are used in daily life to capture your code in an amazing way

**Download Link :** [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)

![[Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)](https://cdn-images-1.medium.com/max/2000/0*EWBZ2TYddK-WRLP5.png)


&nbsp;
### **Demo :**

![Captured Code using Polacode](https://cdn-images-1.medium.com/max/2000/0*Lw4_AXj83K1WsPgY.png)


&nbsp;
## 7. colorize

With the help of this extension, it is easy to visualize CSS colors in your styling files.

This extension adds a background color for each of the written colors.

**Download Link :** [colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)

![[colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)](https://cdn-images-1.medium.com/max/2000/0*TbpQPGbEOg4mzeDS.png)


&nbsp;
### **Demo :**

![Provided by [colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)](https://cdn-images-1.medium.com/max/2248/0*_gF2r64HwYplgvKz.gif)


&nbsp;
## 8. Auto Rename Tag

It renames the paired HTML/XML tag automatically. It is provided by Jun Han.

Download Link : [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

![[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)](https://cdn-images-1.medium.com/max/2000/0*b8G8YZI1GnnznfgM.png)


&nbsp;
## 9. indent-rainbow

Showing indentation in a colored way.

**Download Link :** [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

![[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)](https://cdn-images-1.medium.com/max/2000/0*2Bx4KFrAsQ_SsRtQ.png)


&nbsp;
### **Demo :**

![Provided by [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)](https://cdn-images-1.medium.com/max/2000/0*Fm6E3_P9-C6h-NgG.png)


&nbsp;
## 10. peacock

Provide colorful interface to vs code workspace.

**Download Link :** [peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)

![[peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)](https://cdn-images-1.medium.com/max/2252/1*ugdk2m6mU5lfNdNpQMN0tg.png)


&nbsp;
### **Demo :**

![Provided By [peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)](https://cdn-images-1.medium.com/max/2000/0*9vEDuV5qxqOW-Y_h.png)