Top Ten VS Code extensions
Tags: webdev, vscode, extensions, programming
Published: 2023-10-29 11:50:03

## Here are the top ten Visual Studio Code extensions that will help you improve your coding experience:

1. Gitlens

![gitlens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8evzuh967hr5l6apwlax.png)
GitLens is an open-source extension for vs code. IT simply helps you understand your code better. Quickly see who modified a line or a code block, why they changed it, and when.

[ Download Link] (https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

2. CodeSnap


![codesnap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o9mwteufms93oz0ngul.png)
Take screenshots of your code in a more excellent way.

[ Download Link] (https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)


3. Live Server


![live server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uduehm7plcomuofkft0w.png)
The Live Server extension for  VS Code has been installed more than 27M times. It's a beneficial extension. It Launches a local development server with a live reload feature for static &       dynamic pages.

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

4. Better Comments


![better comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj56zhor3mh3rl4haz1h.png)
The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categorize your annotations.

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


5. Tabnine


![tabnine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f1pmld37qxc0lclkl2s.png)
With the help of Tabnine's AI code completions, you can code more effectively! Tabnine is a free, powerful AI assistant designed to help you code faster, reduce mistakes, and discover best coding practices.

[ Download Link] (https://www.tabnine.com/install/vscode)


6. Git history

![git history](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb2ed93o8httllkz04e0.png)
View the git log and file history, and compare branches or commits.

[ Download Link]  (https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)

7. Prettier

![prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr25wyerr47b37tdl176.png)
Prettier is an opinionated code formatter. It enforces a  consistent style by parsing your code and re-printing it with its own rules that consider the maximum line length, wrapping code when necessary.

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


8. Live Share

![live share](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xpx0j21pjo0em5pfo37.png)
Live Share allows you to co-edit, co-debug, chat with your peers, share terminals and servers, look at comments, and so much more.

[ Download Link] (https://visualstudio.microsoft.com/services/live-share/)

9. Auto Rename Tag


![Auto rename tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89ujd2yixiqykp73uwfr.png)
Automatically rename paired HTML/XML tags, the same as Visual Studio IDE does.

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


10. import cost

![import cost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djem641464fqn3iw1g0p.png)
This extension will display inline in the editor the size of the imported package. The extension utilizes a webpack to detect the imported size.

[ Download Link] (https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)


### Youtube link
[Unleash Your Coding Potential: 10 Must-Try VS Code Extensions](https://www.youtube.com/shorts/QLCRWPs2gmU)

{% youtube QLCRWPs2gmU %}