7 must-have extensions of VS Code

Git history, GitLens, Waka time, Better Comments, Error Lens, Material Icon Theme, Remote SSH

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.

VS Code extensions for beginners

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:

Git history extension in

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.

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.

GitLens extension

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:

wakatime email sample

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.

wakatime

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.

better comments for better comments

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.

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.

Material Icon Theme

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.

Remote SSH extension for VS code

Bonus extensions

My colleague Dhondup suggested this extension and this looks really promising. It basically helps you to help catch common spelling errors and this is a much-needed extension. Additionally, it displays the list of suggestions after positioning the cursors in the wrongly spelled word.

code spell checker

writes code, mostly backend

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store