DEV Community

Cover image for 7 must-have extensions of VS Code
Sonika Baniya for YoungInnovations

Posted on

7 must-have extensions of VS Code

In this blog, going to share the must-have extensions for beginners. A little background, I am a Software developer and mostly a backend developer but here, I have tried to list some frontend friendly extensions also.

1. Git history

Git is the most widely used Version Control System out of all. Git History is the first extension you must install if you use git as VCS in your project. This extension is majorly used for:
i. view and search git log with details and graph
ii. see history of file and line of code and also compare files across commits.
iii. compare branch and commits.
This will look something like this in below image in VS code extensions:

Alt Text

2. GitLens

I personally use GitLens just to know the author of line of code. This extension shows moreover shows total no of authors that have previously contributed and commit message in which loc is written. This ease the understanding of code written by other author. Check out other cool features of this extension here.

Alt Text

In this loc, we can see that gitlens is showing Sonika Baniya as the author and also 3 other authors. And Sonika Baniya wrote this line of code 2 months ago in the commit message “Data Import Validation”. If you hover here, we can also see the commit hash and the full commit message.

Alt Text

3. Waka time

Waka time plugins will help you track your programming in real-time. This plugin will give you a dashboard on metrics like branch, file, project that you spend your time on. Also, I love that Waka time sends you these metrics on email daily/weekly/monthly as you like. A sample email looks like this:

Alt Text

I have turned on my weekly email and wakatime gives you core time you spend on VS code, not the time you left VS Code open, and it's always a warm reflection to see how much you spend on your project and helps you on weekly planning to estimate task time. To learn more about wakatime click here.

Alt Text

4. Better Comments

This extension is for human-readable comments. This helps to create multiple categories in your comments. The comments can be categorized into alerts, queries, TODOS, important info. For me, its always like I am writing dirty code first just to ensure the logic is correct and then refactoring in multiple levels, so this is very important extension for me. To know more about this extension, checkout here.

Alt Text

5. Error lens

Additionally, Error Lens helps to stand out errors more visibly. Like some of the examples would be as shown in the picture below. If you are the one that takes longer to find out missing semicolons and indentation errors then this extension is definitely for you.

Alt TextAlt TextAlt Text

6. Material Icon Theme

Material Icon Theme helps to distinguish your files and their types with colorful icons. Additionally, if you are not a color person then you can customize your own color saturation and opacity. Also, your own custom icon. Honestly, the default material icon theme is so much better than native VS code icons. There are full guidelines on how to customize and more details here.

Alt Text

7. Remote SSH

If you are a non-devops developer but sometimes need to access your ssh server for deployment or other purposes then this extension is perfect for you. This extension allows you to open a remote folder on any remote machine, virtual machine, or container with a running SSH server and take full advantage of VS Code’s feature set. The tedious process just to update a small fix in the file is now 1000x easier with this extension. Also, no additional code needed to set this up. Check this cool extension here and save yourself.

Alt Text

Top comments (2)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
wassimchegham profile image
Wassim Chegham

Great list! Thank you 😃