Today there are dozens of code editors and IDEs available out there. But, there is absolutely no doubt that VsCode is the leading editor of choice by most developers. It is what most modern devs today recommend to a beginner to start with.
It is a free to use, open source, and highly customizable code editor with IDE like features, and is backed by Microsoft.
Also, it can be made even more powerful with the help of extensions(available from the VsCode marketplace) to improve our workflow as beginners.
Here are the top 10 extensions which everyone should install with VsCode.
1) Prettier
This is an awesome code formatter which automatically rearranges your code according to the best practices when you run it in a source file. You can also configure it to run when you save the file you are working on.
Check out Prettier on VsCode marketplace.
2) Code Runner
This is a must have if you are using languages like C, C++, Java, NodeJs, Python, etc. It appears as a play button on the top right corner in your VsCode instance. You can run any file by clicking this button and it will run in the integrated terminal. Believe me, it will be super handy and you will regret not using it before. You can also run any file using the shortcut Ctrl+Alt+N on windows/linux and Ctrl+Option+N on mac devices.
Check out Code Runner on VsCode marketplace.
3) Live Server
This extension, as the name suggests, create a temporary server right on your machine(at port 5500 by default), and you can run your HTML, CSS, etc directly without having the refresh again and again.
Check out Liver Server on VsCode marketplace.
4) Bracket Pair Colorizer
Whatever the Programming language you are working on, this extension will make the matching brackets of the same color so you no longer have to focus on which bracket belongs to which function, etc and can focus more on coding better. It is a real life saver many times.
Check out Bracket Pair Colorizer on VsCode marketplace.
5) Color Highlighter
This is a simple yet cool one, it just colors the entire hex code or the color name whenever it sees one. It is better than the VsCode's default color preview square and just feels way better.
Check out Color Highlighter on VsCode marketplace.
6) Auto Rename Tag
Have you ever been in a state where you wrote like about 100 lines or more of html, and then have to change a lot of tags you have there. If so, this one is for you. With this extension installed, you just have to change the starting tag name and the closing tag will be automatically changed correctly. It is a big time saver and makes you more efficient at writing markup.
Check out Auto Rename Tag on VsCode marketplace.
7) CSS Peak
Another productivity based extension in the house. This will be helpful when you want to know what styles are being applied to a html element(or a tag), instead of going all the way to the css files, you can just use this and see the styles. Moreover, you can edit those styles as per your liking and it will be changed in the CSS as well, right from you HTML.
Check out CSS Peak on VsCode marketplace.
8) Peacock
This will allow you to change the color of your VsCode sidebar as well as menubar to whatever color you want. You can set it to any hex code you like, this is just a great way to change the look and feel of your editor as make it more personalized according to your needs and the workflows.
Check out Peacock on VsCode marketplace.
9) Code Spell Checker
This extension will save your life when you mistakingly write wrong spelling for a function or just make a type in some file. It works like a normal linter and underlines the wrong spelled code part which you can correct and save yourself countless hours of debugging.
Check out Code Spell Checker on VsCode marketplace.
10) Git Lens
This is a super duper powerful extension. If you are a git or Github user, you absolutely need this!!
It shows the last changed in the file along with timestamp as well as author's name, it can also be used in several other ways to make yourself more productive.
Check out GitLens on VsCode marketplace.
So, Finally we did it. These are the top 10 extensions every beginner should install and try out.
Apart from these, there are thousands of VsCode extensions available freely on the marketplace and new ones are always being added.
What are some of the extensions you guys recommend other than these? Comment down below and let everyone know...
ThankYou.
Top comments (2)
Thanks for the article.
# 3 Live Server's image is missing. It's actually show #4 Bracket Pair Colorizer image instead.
Thanks for pointing out, i will change it right away.