When it comes to text editing on either Windows or MAC, I use VS-Code. Microsoft did an amazing job with this editor, I can not recommend it enough. Over the years, I have tried and experimented with the most popular editors on the market. This list includes the likes of, VIM, Textpad++, Sublime. Hands down VS-Code works best for me. This is because of its marketplace and the huge array of extensions that you can use with it. Through these extensions, you can tweak your configuration just the way you want it.
As I create how-to videos for developers on youtube, one recurring question I keep getting asked about is the theme and extensions I use in VS-Code. In this 10 minute video, I will walk you through my set-up. By the end of the video, you will be able to create an exact replica of my VS-code set-up on your own machine. For those of you who are new to this channel, my name is Jon and I post weekly videos about web development and productivity. If you like this video and want to learn more about web development don't forget to hit subscribe now, here. Below lists and links to all the extensions and themes, that I list in my video.
Themes
The first thought I assume that runs through most developers head after first installing VS-Code is likely, how can I make this editor 'pop'. If you want to get more 'punch' from VS-Code. My favourite theme is called, SynthWave '84 by Robb Owen. SynthWave is a theme and colour scheme influenced by the music and the cover artwork of modern Synthwave bands. As a child of the 80s this theme is my go-to and I recommend that you check it out:
https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode
PowerMode
If you want flames to magically appear whenever you type, the Power mode extension is for you. I originally installed this plug-in as a joke, 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 does not display icons within the solution explorer view 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. It will also help you to find files quicker, it is a win-win!
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icon
Color Highlighter
The use of colours within websites makes things pretty 😍 When writing CSS it is handy to be able to see the actual colour you are working with, rather than the hex code alone. Colo-highlighter will display the corresponding colour for all CSS colours found within your CSS files. Color-highlighter has a few view modes, allowing you to pick the display that works for you.
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
Brace-Pair Colorizer
A well-known development fact is that we all spend more time reading code than writing it. One tedious part of reading code is trying to find the corresponding curly brace, square bracket, or trailing parenthesis from our loops and conditional checks. This is where the Bracket-Pair-Colour extension can improve things. As the name suggests, this extension adds differentiating colors to your brackets and parenthesis to make it easier to read source-code. It 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. The Better-comments extension will help you to differentiate between different types of comments quickly. Better-comments, provides the ability to add different styles and colours for different types of comments. For example, being able to differentiate between to-do comments and info comments will increase the odds that you do not forget to action these reminders that you set yourself!
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
Code Spell Checker
A code spell checker is just as important as a text-editing spell checker. No one likes code with misspelt words, especially if you work with pedantic developers. After installing this extension, press Control + . 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 a number of IDEs including VS-Code and Visual Studio. Waka-time will track how much time you spend actively working in the editor, it will monitor what projects that you were working on, and which languages you are using. Every week you will receive a weekly email that outlines where you have been spending your time.
https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime
To get your Waka API key go here:
