My Top 10 Best Visual Studio Code Extensions
Tags: articles, productivity, vscode
Published: 2020-03-07 15:04:29

---
title: My Top 10 Best Visual Studio Code Extensions
published: true
date: 2020-01-19 20:08:53 UTC
tags: Articles,Productivity,VSCode
canonical_url: https://tolustar.com/my-top-10-best-visual-studio-code-extensions/
---

Having the right extension installed on your Visual Studio Code can speed up your productivity, make your codes readable and attractive and also foster collaboration. Here is a list of my top 10 Visual Studio Extensions that have made my life easier while developing web and mobile apps, and also made my codes attractive. These extensions are not platform-specific and can be used by any developer that uses Visual Studio Code. Let’s get started.  ![😀](https://s.w.org/images/core/emoji/11/72x72/1f600.png)

1. [Gitlens](#gitlens)
2. [Prettier](#prettier)
3. [Project Manager](#project-manager)
4. [All Autocomplete](#all-autocomplete)
5. [Auto close tag](#auto-close-tag)
6. [Auto rename tag](#auto-rename-tag)
7. [Settings Sync](#settings-sync)
8. [Visual Studio Intellicode](#visual-studio-intellicode)
9. [Live share](#live-share)
10. [Save as snippet](#save-as-snippet)

 

### 1. GitLens

![](https://i0.wp.com/tolustar.com/wp-content/uploads/2020/01/gitlens-preview.gif?resize=727%2C600&ssl=1)  
[https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

GitLens is a powerful git extension that helps me glimpse into whom, why, and when a line or code block was changed. It even goes further to compare uncommitted code changes with my last commit on a particular file.

### 2. Prettier

[![](https://i1.wp.com/tolustar.com/wp-content/uploads/2020/01/prettier.png?resize=1024%2C427&ssl=1)](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

[https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Prettier is a code formatter that format codes appropriately with a consistent style. If you want to make your code attractive have prettier in your toolset.

 

### 3. Project Manager

[![](https://i2.wp.com/tolustar.com/wp-content/uploads/2020/01/vscode-project-manager-logo-readme-2.png?resize=700%2C161&ssl=1)](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

[https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

Project manager houses all my projects in one section of my Visual Studio Code and makes me switch between my projects easily, it eliminates the stress of going through my file explorer searching for my project. If you work on multiple projects, then this extension will come in handy for you.

### 4. All Autocomplete

![](https://i2.wp.com/tolustar.com/wp-content/uploads/2020/01/All-Autocomplete-1.gif?resize=620%2C480&ssl=1)

[https://marketplace.visualstudio.com/items?itemName=Atishay-Jain.All-Autocomplete](https://marketplace.visualstudio.com/items?itemName=Atishay-Jain.All-Autocomplete)

Instead of retyping variables or function names that I have typed earlier, All Autocomplete provides auto completion for Visual Studio Code items, so that I don’t waste any more time

### 5. Auto Close Tag

[![](https://i0.wp.com/tolustar.com/wp-content/uploads/2020/01/auto-close.gif?resize=1024%2C667&ssl=1)](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

[https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

Auto close tag automatically adds an HTML/XML close tag, imagine how this speeds up my time coding because my favourite code editor is assists me in writing my codes.

### 6. Auto Rename Tag

 

[![](https://i2.wp.com/tolustar.com/wp-content/uploads/2020/01/auto-rename.gif?resize=1024%2C667&ssl=1)](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

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

Just like the _Auto Close Tag_, the Auto Rename Tag helps me to rename the closing tag by just renaming the opening tag and vice-versa, can you see how sweet that can be especially for tags that have large content in it, I don’t need to stress myself to scroll down or up just to rename the other tag.

### 7. Settings Sync

[![](https://i1.wp.com/tolustar.com/wp-content/uploads/2020/01/settings-sync-2.png?resize=1024%2C759&ssl=1)](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

[https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

Settings sync comes in really handy when working with multiple computers, it can be a lot of stress trying to transfer/update my extensions, settings, snippets from one computer to another. Settings sync helps me to synchronise all my settings and extensions through the use of Github account without stress.

### 8. Visual Studio Intellicode

[![](https://i1.wp.com/tolustar.com/wp-content/uploads/2020/01/visual-studio-intellicode.gif?resize=1024%2C455&ssl=1)](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

[https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

This is another time-saver extension for me, it helps with smart code completion suggestion especially  when I want to access member functions – this saves me another great deal of extra typing, another icing on the cake is that it defines what the member function does if there is a definition, Javascript developers will enjoy this extension a lot.

### 9. Live share

[![](https://i0.wp.com/tolustar.com/wp-content/uploads/2020/01/live-share.jpg?resize=1024%2C391&ssl=1)](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

[https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

This extension is very useful for collaborating, it comes in handy when I am working in a remote team and I need the help of a team member with a bug. Live share enables me to edit and debug with other team members in real-time. Live share is like a virtual conference room for developers to work together. If you work in a remote team consisting of two or three developers working on the same project, I will advice you all have this extension installed.

### 10. Save as snippet

 

![](https://i2.wp.com/tolustar.com/wp-content/uploads/2020/01/save-as-snippet.gif?resize=720%2C538&ssl=1)

Save as snippet enables me to save code blocks I repeatedly type, with a snippet, so that I don’t have to type long blocks of code over and over again.

 

## Bonus

### 11. Material Theme

[![](https://i1.wp.com/tolustar.com/wp-content/uploads/2020/01/material-theme.jpg?resize=1024%2C605&ssl=1)](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)

[https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)

Material theme makes my Visual Studio Code look beautiful and pleasing to the eye  ![😀](https://s.w.org/images/core/emoji/11/72x72/1f600.png)

### 12. Material Icon Theme

[![](https://i0.wp.com/tolustar.com/wp-content/uploads/2020/01/material-icon.png?resize=1125%2C1408&ssl=1)](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

[https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

The Material Icon Theme provides lots of beautiful icons based on Material Design for Visual Studio Code.

 

Thank you for reading my top 10 best visual studio code extension. I would love to read your thoughts and comments. Cheers!!!