10 Best Extensions for VS Code

While coding, Having a good code editor is very important it will make you a lot more productive.

Why VS Code?

VS Code (Visual studio code) is undoubtedly one of the best and most popular product of Microsoft. The reason why it is so popular is that is very customizable (via extensions). So each individual can customize it based on their need (it may be themes, fonts or extensions, etc)
Below I am going to mention 10 most popular extensions you can use to make your VS code more productive (especially as a frontend developer)

1. Setting Sync

 

if you work on multiple machines like I do, then this extension will be very useful. With the help of this extension, you can set up your VS Code in one system and save all your settings in GitHub, and then using just a simple command you can have the exact same setup on any other machine as well, no need to do all the setup again.

2. Project Manager

If you work on multiple projects then this extension will make your life a lot easier. With this extension, you get an extra menu in your side menu for your projects which will help in switching between projects very fast. And on the bonus side this extension auto-detect Git, Mercurial, or SVN repositories.

3. Bracket Pair Colorizer

Most of the time code gets so nested that it is hard to identify which closing bracket belongs with which opening bracket, in just case you will find this extension very helpful. Bracket Pair Colorizer colors matching brackets to make your code much more readable.

4. Auto Rename Tag

A simple yet effective extension, it automatically renames the matching HTML tag when you change the opening or closing tag.

5. Better Comments

Comments are used to make your code easily understandable, so isn't it better to have different colors to identify different types of comments (like todos, alerts, descriptions, etc) This extension will help you do just that. It provides different colors for different categories and if that's not enough you can define your own category, isn't that useful.

6. Polacode

Have you seen a fancy screenshot of a code snippet on any article? if yes, then it's mostly taken using this extension. This extension allows you to take a screenshot of your code or some part of it.

7. Git Lens

If you use git for version control then this is a must-have extension. There are lots of git related extensions available but this is the most powerful one. It allows you to go anything related to git like blame, see commit history, compare files, etc.

8. Live Server

This vscode extension will help you open a live web server of your current project without the overhead of having bundlers like webpack etc. It also gives you live-reloading so you don't have to even refresh the browser to see your changes, isn't that handy.

9. Live Sass Compiler

if you want to work with SCSS/SASS without setting the build process with a bundler like Webpack, this extension will be useful. It compiles your SASS/SCSS files into CSS files in real-time and automatically reloads the browser.

10. Better Align

If you prefer proper alignment in your code then this is the extension for you, it will allow you to align multiple variable declarations, trailing comments, sections of code, etc, so give it a try and you will love it.

Thank you all for reading!