My 10 Best VS Code Extensions {2020}
Tags: javascript, beginners, codenewbie, vscode
Published: 2020-06-21 12:00:31

One of the best way to make *coding interesting*, is to improve the look and feel of your coding environment. Another way is to improve the functionality for fast coding.

Visual studio code is one of the most loved code editor and I prefer to use it over all the others. Its extensions marketplace have numerous products which you can try out, but today we will look at just 10. 

*Disclaimer: This list is my personal preference.*

If you like the video format of my top extensions, I got you covered and I will pin it below (7 mins). 

**Please support my content** (*Stay Awesome!*)
1. Subscribe to my YouTube channel [here] (https://www.youtube.com/channel/UCe8uN9zoKksCb1hfw61myRw?sub_confirmation=10)
2. Donate to my PayPal [here](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NZCBMP9V54G9J&source=url)

{% youtube MHtA1B10Cwo%}

#Visual Extensions

##Tokyo Night Theme

I use the Tokyo Night theme. It is easy on eyes and have awesome font colors as you can see in the image below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nvbddz2dlz8t3v0qcutg.PNG)

Tokyo Night theme also have the light mode. But the light mode doesn't look so good to me. So, I always keep it at night mode:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/baem4ek8tbxzqq5lo2jj.PNG)

##JetBrains Mono Font

This is not an extension, but it makes sense to mention it here because the font is a key to enhancing the visuals. My preferred font is JetBrains Mono which is totally free and works well together with the Tokyo Night Theme.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8p5t3gqff9b0nl8io1hn.PNG)

##Material Icon Theme

This is my preferred icons theme. It provides cool icons for each file on the explorer bars. See the cool icons next to each file name in the image below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nvzyjf94ftbaeqc6ah8f.PNG)

##Rainbow Brackets

This is a very cool extension especially when you have nested functions. You can easily identify the beginning and the end of brackets as it provide different brackets' color. Pay attention to the brackets' color in this image:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uomqm2pwh7m4tm2sr3ox.PNG)

##Prettier

Prettier is a code formatter which I think every developer should have. It organizes the code nicely by cutting out unnecessary white spaces and indents. Take a look at the code below, its pretty and easy to read. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/98gpk6g5lq57vc8qwtg4.PNG)

#Functional Extensions

##Git lens

This extension makes working with git more interesting. It have many cool features e.g it provide the ability to see the previous commit messages plus their authors without getting out of vs code. It also  make it easy to track the various file versions.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qoa2qdhzkmuie0b2xxxv.PNG)

##Live Server

This is a cool extension for front-end developers. It auto refreshes the browser allowing you to see changes as they happen. It also saves on time. Watch the video above for illustration.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/swnjofg2jqi0tzdt9afz.PNG)

##Auto Rename Tag

This extension makes it easy to edit HTML/XML tags. Watch the video above for illustration.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7ifn44hb38t24ktxyhb6.PNG)

##CSS Peek

This extension allows you to see the CSS styling of an element without getting out of the html file. Watch the video above for illustration.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r46r4uxmiy2uji59hqw0.PNG) 

##Simple React Snippets

This is a very simple but powerful extension for React Developers. It provides simple shortcuts to perform things faster e.g importing files, creating components etc

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/53p5fmywregy918xn9yv.PNG)

*So, that was my top 10 list of vs code extensions. If you have awesome extra extension that I can add to the list above, let me know at the discussion section below. Also tell me which extension you find awesome from the above list.*