My 7 Favorite VS Code Extensions (That Everyone Hasn't Mentioned Yet)

#javascript #vscode #productivity

I — like many others — love customizing my VS Code setup. I am constantly looking for new plugins, settings, themes, fonts and productivity tips to enhance my experience. Sometimes I probably spend more time working on my workspace than actually getting any job done.

I see new articles about VS Code all the time, and I probably read all of them — but most articles always contain the same great plugins. You know, Bracket Pair Colorizer 2, Prettier, Git Lens, Auto Rename Tag, Live Server, Bookmarks… I guess most people already know of them and use them because they are so damn useable. Therefore, I decided to create a list with some of my favorite VS Code extensions, that aren’t as popular and well known as the ones mentioned before. So without further ado — let's begin!

Gitignore

This little plugin is quite simple. It just adds an Add to .gitignore menu option when you right-click a file. Handy if you quickly want to add it without any hassle.

Highlight Matching Tag

Well, it does exactly what the name suggests. Highlights the matching closing tag, whether it is on the same line or far down the editor. This is especially useful when you are nested a few tabs in and have several lines of code to work with. Even though it might come to good use within a situation like the one on the picture, it doesn’t really give the plugin justice…

Image Preview

A small plugin that justs show a preview on the left-hand side of your editor. It doesn't matter if it is the import statement or in the actual code. As long as the picture is referenced, it is shown like this.

Indented Block Highlighting

This is my latest find — and I really love it. I cannot believe this isn’t more popular. It, also, does exactly as the name suggests. It highlights the indented block you are currently working with. In my case, it highlights the whole StartPage component. Say for example, that I would step inside the HandleSubmit component, only that part would be highlighted. Like this:

Quokka

Quokka is like a live scratchpad for JavaScript (or TypeScript). It gives you a live preview of your code results, whether be it an error or a value. This is great if you are trying out some new concept, or just like to play around.

Reload

I like the very simple ones. This just adds a Reload button to your bottom bar. Not life-changing, but I use it more than I thought I would.

TabOut

Developers seem to be great at naming their applications. This plugin essentially allows you to use tab to escape out of quotes or brackets. I got so used to it with IntelliJ that now, I can’t live without it.

So these are 7 of my favorite VS Code extensions that I use on a daily basis. They might not be the most popular — and some of them are just stupidly simple — but they get the job done.