loading...
Cover image for My 10 Best VS Code Extensions {2020}

My 10 Best VS Code Extensions {2020}

chaoocharles profile image Chaoo Charles Updated on ・3 min read

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
  2. 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:

Alt Text

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

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

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

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

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

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

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

Auto Rename Tag

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

Alt Text

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

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

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.

Posted on by:

chaoocharles profile

Chaoo Charles

@chaoocharles

React Enthusiast ⚛️ | Coffee Lover ☕ | I Create Coding Content on YouTube 💙

Discussion

pic
Editor guide
 

Tokyo Night theme seems to be too saturated and hard for eyes.. Try smth like One Dark Pro!
Agree with everything else, tho :)

 

Okay, thank you. I will try it out

 

Try font: cascadia code
And theme: hackpot

 

Thank you, I'll try them out.

 
 

Wow! Thank you. I will check it out.

 
 

I also use tabnine from codota for Code completion. They say it's powered by AI. Anyway it gets better and better as you type😄

 

Try kite if you use python, JS or Go

 

Thank you. I will check it out

 

Thanks for the tip 😂 I have seen that it fasten typing. I will try it out

 

I hit 5/10 of these!

 

Amazing, you can try out the others. You might like them.

 

Some of my other favourites:

Active File In Status Bar
marketplace.visualstudio.com/items...

Code Spell Checker
marketplace.visualstudio.com/items...

Coding in the Sun! (My Theme)
marketplace.visualstudio.com/items...

Formatting Toggle
marketplace.visualstudio.com/items...

Markdown Preview Github Styling
marketplace.visualstudio.com/items...

Sort lines
marketplace.visualstudio.com/items...

Thank you for this. I'll definitely try them out