DEV Community

Cover image for My 10 Best VS Code Extensions {2020}
Chaoo Charles
Chaoo Charles

Posted on • Updated on

My 10 Best VS Code Extensions {2020}

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.

Top comments (16)

Collapse
 
muhimen123 profile image
Muhimen • Edited

Try font: cascadia code
And theme: hackpot

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you, I'll try them out.

Collapse
 
fasani profile image
Michael Fasani

I hit 5/10 of these!

Collapse
 
chaoocharles profile image
Chaoo Charles

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

Collapse
 
fasani profile image
Michael Fasani

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

Thread Thread
 
chaoocharles profile image
Chaoo Charles

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

Collapse
 
shinesanthosh profile image
Shine Santhosh • Edited

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πŸ˜„

Collapse
 
muhimen123 profile image
Muhimen

Try kite if you use python, JS or Go

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you. I will check it out

Collapse
 
chaoocharles profile image
Chaoo Charles

Thanks for the tip πŸ˜‚ I have seen that it fasten typing. I will try it out

Collapse
 
madza profile image
Madza • Edited

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

Collapse
 
chaoocharles profile image
Chaoo Charles

Okay, thank you. I will try it out

Collapse
 
munaibh profile image
Munaib Hussain

I'm a big fan of Git Graph! marketplace.visualstudio.com/items...

Collapse
 
chaoocharles profile image
Chaoo Charles

Wow! Thank you. I will check it out.

Collapse
 
gmgower profile image
Mada Gower

Nice

Collapse
 
deepakpahwa19 profile image
Deepak Pahawa • Edited

Try Multi Color Bookmark plugin as well. Helps to mark the code and jump later.

marketplace.visualstudio.com/items...