VSCode is a highly extensible code editor, created by Microsoft with our favorite set of tools: HTML, CSS and JavaScript. Developers spend most of their time here to write code, debug code, investigate, and write more code again. These daily tasks add up and can take a large amount of time from their daily lives. This is why it’s essential to bring the most out of code editors.
Our web developer team have gathered together 10 extensions that they use on a daily basis. We hope these extensions can help you improve your productivity and produce more changes, in less time.
In this list, we only list extensions that are applicable for all kinds of projects. We avoid plugins that are targeting specific setups. Such as extensions for GraphQL or Svelte. Now let’s jump into the first one.
-
Material Icon Theme
We believe by improving the efficiency of navigation, you can save a lot of time. So, I would like to start the list with theming extension. Material Icon Theme helps you visually distinguish different file extensions and easily spot the relevant ones you are looking for. As a result, you won’t spend hours searching through files.
-
CSS Peak
CSS Peak is your best extension when it comes to navigating in CSS. CSS Peak allows you to navigate the rules that associated with your HTML classes because it puts a link on your classes in your HTML files.
-
Color Highlight
Color Highlight is another great extension that we’ve found to be really helpful when dealing with CSS. It color highlights hex code so you are able to spot relevant information faster.
-
Better Comments
Let’s move our focus to comments. They are everywhere, despite you’ve been told not to overuse them. Ideally, you only want to get the most important information from them. Better Comments will help you do that. It highlights relevant and strikes through irrelevant information.
-
JSONPath StatusBar
Another great extension that has the same purpose is JSONPath StatusBar. This extension is a great aid, if looking at JSON data is part of your daily work. Debugging APIs and trying to find the match for each node can be tiring. Especially if you’re working with a JSON response of thousands of lines. This extension will help you by giving the full path of the JSON node you are looking at. And if you are referencing arrays, it will give you the indexes. It’s a super simple extension, but saved me a lot of time down the road.
-
Auto Rename Tag
While working on fixing misspells, you want to finish it as fast as possible. We are a hundred percent sure that you will mistype a bunch tag names, especially when you’re coding under deadline’s pressure. Auto Rename Tag will help sure you fix those mistypes quickly, you only have to rename the opening tag. It will handle the closing tag automatically for you.
-
Code Spell Checker
Another mistypes extension, is Code Spell Checker. It will let you know instantly if you make any mistype. Code Spell Checker checks your code for spelling errors and underline mistyped words. It gives you recommendations while you are typing and it allow you to add custom words to your dictionary, so it won’t flag it as a mistake.
-
Quokka
After everything has been fixed, you can turn your attention to debugging. Quokka — called by their creator — is a live scratchpad for JavaScript.
It evaluates your expressions on the fly, so you can quickly debug pieces of your code.