Chaoo CharlesOne 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!)
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.
