Interesting VSCode Extensions For February 2019

Here is the February roundup of eye-catching, interesting and note-worthy VS Code extensions. I plan to run this article every month, this is the very first, enjoy!

Niketa Theme

It’s actually hard to find decent IDE themes nowadays, well it certainly is for me anyway, nothing usually compares to Darcula. But the Niketa Theme package offers some pretty easy-on-the-eye pre-set themes that are actually really good. It spans fifteen themes from light to dark, enough to cater to all contrast-preferences.

angry cat niketa theme


Browser Preview

Do you ever get annoyed with having to switch back and forth from editor to browser? This is especially annoying if you’re only working with one screen too. Well, look no further, Browser Preview remedies this issue instantly, allowing you to render web-pages right inside VSCode. It even gives you a quick-launch button on the left-hand navigation bar for ease-of-access.

browser preview


Code Time

Now, this extension is right up my street, it’s an excellent idea and provides great analysis. Code Time provides personal statistics on your coding habits. These statistics include metrics like Hours Coded, Total KeyStrokes, Lines Of Code Added, Top Projects Worked On and even heat maps, mapping out your most active times of the day.

Code Time can even be configured to email you these stats on a specific interval basis. In addition, you can use their app to see proper visualizations in the flesh with your data. Below is an example of the statistic output that it generates on demand.

code time screenshot


Web Accessibility

Accessibility on the web is often ignored or overlooked, and believe me, it is important. Not only just for users but for browsers and even SEO. This linting-like tool will pick out areas of improvement as you code, offering advice on how to make it more accessible.

For example, you’ve just added an image to your page, but forgot to add an alt="" tag, this extension will make sure you know that you missed it out!

web accessibility extension


Nest Comments

I can almost guarantee you’ve run into this issue before, having comments in a block of code and you comment the full block of code. Then, when you un-comment it, that originally commented code becomes un-commented! This slick extension gets rid of this annoying issue and it is prepped for a vast range of languages too. See the below GIF to see its magic in action with some CSS.

nest css extension
Credit: Phil Sinatra

Insert Unicode

Say goodbye to searching Google for emojis and Unicode symbols alike. Insert Unicode allows you to search for symbols and emojis directly in VS Code, it’s pretty epic. It’s so simple to use, hit the F1 key and find the Insert Unicode sub-menu, hit enter and then start your search. By typing fire and enter, you will be presented with a range of Unicode and emojis to choose from.

It is even possible to map emojis or codes to a specific keyboard-shortcut-combination so that you can utilize them quickly rather than searching every single time.

insert unicode extension


TODO List

Be honest, how many times have you added ‘TODO:’ to your comments and forgot about it? Well, this healthy-workflow extension keeps them at the forefront of your coding environment. Every time you add ‘TODO:’ within a comment in your code, the extension picks it up and places it in a new Action Comments pane on the left explorer window.

This is an exceptionally simple addition to your VSCode build and reaps so many benefits. An added bonus if you’re already using Trello too, this extension is already ready to integrate directly with the Trello app! An absolutely flawless idea, I love it!

todo comments extension


JSON Editor

Working with JSON can be challenging at times, especially if it’s heavily nested and you have no way of visualizing it easily. One of the ways I used to visualize it was to paste my JSON into Chrome console, this, of course, is a bit of a nightmare. The JSON Editor allows you to visualize JSON directly in Visual Studio Code and its kinda epic.

Not only can this extension render a beautiful view of your JSON, but it allows you to real-time update your JSON file by using the editor itself. Simply add a new object to the tree-view and your raw JSON will be updated.

JSON Editor extension

 

And that is all for this months roundup, definitely some interesting and exciting extensions to use. Let me know in the comments of any interesting extensions you’ve come across lately!

Want the next VS Code Extension round up directly in your inbox?
Subscribe to our Newsletter below!

The next round up of interesting extensions will be out around this time next month, keep an eye out!

SHARE ON

The Author: Dan Englishby

Interesting VSCode Extensions For February 2019

You May Also Like

Leave a Reply

Your email address will not be published.