VScode plugins that helped me be more productive!

March 4, 2023

Ivaylo Tsochev

Top VScode plugins I used every day as a Front-End developer

Development

VSCode

In this article, I want to share with you the top VScode plugins that I use every day, and I’m not talking about well know plugins like EsLint, JsLint, Prettier, etc.

There are tons of plugins for VScode, some are useful but some are really crap.

The plugins I’m mentioning here don’t go in any particular order but let's start with the first one from my list

1. “Auto Rename Tag” by Jun Han.

When you start editing the opening or closing tag, the opposite is changed too. If you’re like me, forgetting to change both tags, this plugin is the one for you!

2. “Colonize” by vmsynkov

God bless “vmsynkov” for creating this plugin!!! How many times, you’re typing something and then you need to end the line with a semicolon?

Then you need to either “cmd + right arrow” (or End for Windows) to put the cursor at the end of the line, then type the semicolon and then Еnter to go to the next line, but sometimes, you don’t want to go next line… Or eventually, click with the mouse or trackpad at the end.

But please, please… try to use more keyboard shortcuts as you can and not make extra movements with your hands. This way you’ll be more productive and type faster!

With just two key combinations, you’re setting the semicolon and can go to the next line, or just set the semicolon and stay on the same line.

3. “Color Highlight” by Sergii Naumov

This plugin is not a game-changer but styling an element is a big part of the Front-End developer life and by default, you see colors in your styling document like this ⇒

but this plugin can help highlight it and be more visible like this ⇒

4. “ES7 React/Redux/GraphQL/React-Native snippets” by dsznajder

Probably, if you are already React Developer, you may know this plugin, but if you’re just starting with React, this plugin is really a time saver.
With simple “rafce” you can generate the boilerplate for the component and save the tedious work.

5. “htmltagwrap” by Brad Gashler

You type some content but you forgot to put the HTML tag for it, no worries…mark the content and by “Option + w” (“Alt + w” for Windows) you wrap the content in a tag element.

By default, it’s a <p> tag but once the tag is set, the cursor is on the tag and you can directly type different HTML tags.

You can change the default <p> tag with something else by putting the following code snippet in your settings.json file for your VScode.

"htmltagwrap.tag": "div",

6. “Spaces Inside Braces” by Julian Tu

As I mentioned above, I hate making extra moves with my hands or reach out for my mouse and this is a very cool plugin that I’ve recently found.

Depends on your coding style but when I type something between { curlyBrackets }, I like the content to have one space from each side ⇒ {notLikeThis}.
With this plugin, when your cursor is inside of the curly brackets and hits the space, the cursor is still in the middle of the curly brackets but with space from each side.

7. “Todo Tree” by Gruntfuggly

You are in the middle of something, you are coding some logic but then you remembered that you need clarification on the task from your Team Lead or you need quickly to jump on a call, or urgently check another file for some bug fix ⇒ Todo Tree plugin is the one for you!

Every “TODO” text you enter within the project files can be found in the sidebar under the Tree icon.

-------------------

One plugin in particular that I’m interested in, is the Vim plugin.

It’s “Vim” by vscodevim and in my opinion, if you can master this, you’ll be a hell of a beast in terms of fast and productive typing.

Currently, I’m testing it and it’s not very convenient if you just start with Vim while working. There are tons of shortcuts and I would say that the learning curve is not minor.

So maybe using the plugin in casual coding in your spare time is a great idea at the beginning.

## Test