My 10 Best VS Code Extensions {2020}

#javascript #beginners #codenewbie #vscode

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!)

Subscribe to my YouTube channel here
Donate to my PayPal here

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:

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:

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.

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.

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:

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.

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.

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.

Auto Rename Tag

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

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.

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

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.