Within this tutorial, you will hopefully learn about some new extensions and themes for VS-Code that will help you to become a more productive programmer. Every month there are around 50 to 100 new extensions and themes released for VS-Code. Trust me when I say this, trying to review all of them and find the wheat from the chaff!
This means that there are likely a number of handy tools that you can make use of in your day-to-day duties that will make your life easier and that you are also completely unaware of.
To be clear, this article isn't a best-of-tool edition for VS-Code (if you want one of those look here, instead contained within this list you will get a list of some new things you are hopefully not aware of. If this sounds good to you read, on 🔥🔥🔥
Extensions
Within 2022 there were some really useful new extensions released for VS-Code. The extensions mentioned within this list all have over one thousand downloads and they are all ones that I have installed on my machine:
JSON Crack: This is a great extension for when you need to work with complex JSON files. This extension will allow you to visualize the structure of a JSON document. Having a visual graph can make it a lot easier to quickly understand the contents of large documents, compared to trying to scroll through one gigantic file!
Pomodoro Clock: A simple Pomodoro clock that you can use to help motivate you. Sometimes getting the motivation to do a hard task is a struggle. I find this extension can help trick me into starting things quicker. At the bottom of VS-Cde, you will get access to a simple 25-minute timer. Next time you find yourself procrastinating, commit to working a minimum of 25 minutes and start the timer. After you have made some progress, it is much easier to keep the momentum going.
Codesnap Plus: A useful tool to create images based on your code. I used to use Command Pallat for code-related snapshots, however, I found it was a bit of a fan. You had to use the command palette and also re-size the screen to crop the image. Codesnap Plus creates images with your code incorrectly aligned which is good. The plus version has the ability to toggle line numbers and the OSX style controls. This extension is great to bust out whenever you need to quickly share snippets over Slack, email, or within a blog 😉
Fast Compare: This extension provides a quick in-memory file comparison of two-open tabs. This is handy to quickly spot the mistake you've introduced!
VSCode AutoSave: This plug-in will automatically save your work as you code. Instead of having to remember to press Cntrl + S all the time, this extension will save your work, as long as it doesn't contain any errors!
HTML Hint: This plug-in adds an HTML static anaylyics tool to your IDE. Instead of needing to run a linter, you can simply install this and then within your problems window, in real-tie you will get a warning whenever you violate an HTML rule!
Console Ninja: Console ninja will help yo to write code FASTER. Its does this by rendering the output of all console.log() statements at the end of the command within the IDE. Console Ninja also has a nice output viewer. Insteadof trying to pick your errors from a mountain of terminal output, you can use this window to find. your log messages much more quickly!
Chat GPT Extensions
It kind of feels like GPT-related extensions have taken over the VS landscape recently. With over about 100k combined downloads the GPT-related extensions have dominated in popularity over the last 6 months. I won't drill into the details of each of these plug-ins, instead for this category I am simply going to list the most popular ones released in 2022. If enough people comment on this video, I might do a separate video reviewing these tools.
There are about 10-15 popular ChatGPT extensions with the most popular ones being:
- ChatGPT中文版
- ChatGPT by Kiran Shah with over 19k downloads
- ChatGPT by Ali Gençay with over 16k downloads
- Code GPT by Daniel San with over 14k downloads
- ChatGPT VSCode Plugin with over 16K downloads
Themes and visual effects
We will start this section by focusing on two extensions that will improve the overall UI within your VS-Code:
Vibrancy Continued: Vibrancy is slightly different compared to the majority of VS-Code themes. The focus of most articles is to tweak the fonts and the colours of your VS instance. A much more select handful of these themes also ship with unique effects.
One of my favourites is the glow effect from SynthWave '84. Vibrancy also falls into this camp of extensions that come with an extra effect. Vibrancy will allow you to turn VS-Code into a glass-themed IDE. Vibrancy in itself is not your usual theme, it's an extension that adds this nice-looking glass effect, and via the vibrancy settings, you can then apply additional articles on top of it:
The original vibrancy extension has been made obsolete so make sure you use vibrancy continued!
Symbols: Symbols provide a nice minimalistic collection of icons that will be rendered within your VS-Code solution explorer panel:
Asides, from these two extensions there are always new themes being released. In this section, I will go over some of my favourite themes that were released in 2022:
Currently, I am using Solatrized Dark+ in my set-up with Symbols and I'm loving the aesthetic ❤️
Happy Coding 🤘
