When it comes to everything, not C# I see VS-Code. I like it a lot. Over the years I have tried and experimented with most editors, VIM, Textpad++, Sublime, and hands down VS-Code work best for me. One question I've been asked a few times is what theme and plug-ins I use. In this 10 minute video, I will walk you through my set-up

For those of you new to this channel my name is Jon and I post a weekly video about web development and productively. If you want like this video and want to learn more about web development don't forget to hit subscribe now.

Make It Pretty

The first thing any dev thinks when installing VS-Code for the first time is how can I make this editor 'pop'. If you want to get more 'punch' from VS-Code then this first stack of theme-related plug-ins will help you

Theme Stack Of Plug-ins

SynthWave '84 BY Robb Owen is a VS-Code color scheme is influenced by the music and the cover artwork of modern Synthwave bands. Out of all the themes, this one is my favorite VS-Code look:

https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode


PowerMode

If you want flames to magically appear whenever you type then you should install Power mode. I installed this plug-in as a joke originally, however, I have found it to be really handy to quickly find my cursor on the screen and it is now an essential tool I use in VS-Code.

https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode


VS-Icons

VS-Code explorer does not ship with any icons by default. To make it easier to differentiate between different files and folders you can install VS-Icons. This plug-in will install some sweet icons that will make your VS-Code look much nicer

VSCode Icon

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icon

The default icons in VS-Code are boring. Let us take things to the next level by installing some custom fonts. We can do this by installing VS-ICONS


Color Highlighter

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

This one is for the UI devs in da house. Colors are pretty. When we are writing CSS it's handy to see which colors are working with. Colour high-lighter is a plug-in that will help you to configure how VS-Code displays CSS hex-code colors as you are writing things.


Brace-Pair Colorizer

As a developer, we all know that we spend more time reading code than writing code. One tedious part of reading code is trying to find the corresponding curly or square bracket or a trailing parenthesis. This is where Bracket-Par-Colour comes in. As the name suggests this plug-in adds differentiating colors to your brackets and parenthesis to make it easier to read source-code. It also makes your code pretty:

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2


Better Comments

It is very easy to gloss over comments when you are reading code. Better comments will help differentiate between different types of comments. By providing different styles for different types of comments its another tool to help you more easily read and understand a codebase:

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments


Code Spell Checker

A VS-Code spell checker. Press Control + a full-stop on a misspelt word and it will open the spelling suggestions menu to allow you to quickly fix your typo.

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker by Street Side Software


Waka Time

Waka time is a productivity monitoring tool. Waka-time is compatible with Vs-Code, Visual Studio, and a range of other IDEs. It will track how much time you spend actively working in the editor, it will monitor what repos you were working on, which languages you use. Every week you will then receive a weekly email detailing who productive your week has been.

https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

To get your Waka API key go here:

https://wakatime.com/vs-code