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:
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.
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:
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.
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.
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.
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.
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.
Top comments (8)
Can't work without Better Comments! These are good recommendations. I can also suggest Bracket Pair Colorizer another great help visually.
Thank you André, I will look into it.
Git History is exactly what I needed -- thanks for the great article!
happy to help :))
Oh really nice suggestions.
Personally I would also recommend Prettier, it's been very helpful to me.
Thank you Elijah, i will look into it :))
Nice suggestions! But I also recommend ESLint.
yes, thank you