loading...
Cover image for VS Code Extensions I use Daily

VS Code Extensions I use Daily

klamserdev profile image Jakob Klamser Originally published at klamser.dev ・4 min read

In this article, I want to go through my favorite Visual Studio Code Extensions that I use on a daily basis. Most of the time I use VS Code for writing JavaScript applications (Vanilla JavaScript, React, Angular, NodeJS… You name it).

Bracket Pair Colorizer 2

Alt Text
This is a great extension that helps me find my way around complicated nested promises in JavaScript. It colorizes, as the name suggests, bracket pairs which help me a lot at figuring out if I messed up somewhere (missing brackets for example). By default it matches the normal brackets like (), [] and {} but you can also define your custom brackets if needed.
It has a lot of other cool features such as defining your colors or showing a gutter for the active brackets. Go ahead and give it a try.

Source

Marketplace: Link

NPM Intellisense

Alt Text
As you can see in the GIF it auto-completes requires an import statement that targets NPM packages. This helps out quite a lot especially if your projects get quite big and packs a lot of dependencies in your package.json. I don't want to miss this plugin anymore, highly recommended!

Source

Marketplace: Link

Path Intellisense

Alt Text
This is a sibling of NPM Intellisense. It does the same auto-completion but now for your filesystem. The maintainer is the same and as with his sibling, I don't want to miss this anymore!

Source

Marketplace: Link

Quokka.js

Alt Text
This tool is a great addition if you just want to try something out without setting up a project first. It immediately spits out the output next to your JavaScript/TypeScript code, by checking it in real-time, as seen in the GIF. It is a great extension, especially for debugging purposes.

Source

Marketplace: Link

Docker

Alt Text
Since I am working with NodeJS a lot of the time I got used to set up my development environment entirely with Docker. Before I found this extension I worked with the CLI exclusively. 
This extension is a must-have for handling multiple Docker images and containers because it gives you a quick overview of which containers are running, which images are built, and which networks are created.
If you use Docker on a daily basis I can only emphasize using this extension.

Source

Marketplace: Link

Live Server

Alt Text

I am still using static web sites and vanilla JavaScript once in a while and because I do that I don't want to install something like a webpack-dev-server or something like that. This extension helps me solve this problem by providing a local development server with a hot reload feature meaning it refreshes the page as soon as you save any changes made to the files. It has a nice "Go Live"-button in the status bar that lets you start the server with just one click. Definitely check out this extension if you haven't already.

Source

Marketplace: Link

Auto Close Tag and Auto Rename Tag

Alt Text
These are two small plugins for your VS Code that helps you maintain your HTML files by auto renaming and closing your tags. This also works in React's very own JSX syntax. Give it a try if you want to save you some time.

Source Auto Close Tag

Source Auto Rename Tag

Marketplace: Auto Close Tag and Auto Rename Tag

Markdown Preview Enhanced

Alt Text
I use Markdown for a lot of things. For example, writing articles on hashnode.com or dev.to, writing documentation for my private projects, or organizing myself by writing notes down in markdown. Most of the time I do that using VS Code and I was lacking a good markdown preview tool until I found Markdown preview Enhanced. It does not only provide you with a preview, but it also features synchronized scrolling, PDF export, and PlantUML. I really like this tool and can highly recommend it to everyone that works regularly with Markdown.

Source

Marketplace: Link

Conclusion

These are my most used extensions for VS Code that I use on a daily basis. I hope you found something new and useful for your workflow. Let me know what extensions you use.

Photo by Blake Connally on Unsplash

Posted on by:

klamserdev profile

Jakob Klamser

@klamserdev

Nerd | Software Engineer | Frontend Dev

Discussion

pic
Editor guide
 

Hi Jakob,

There are settings for auto closing tags and auto renaming tags that you may be interested in. You can read more in my post.

 

What about HTMLHint?

 

I don't understand the question. What do you mean?

Does VSC has same functionality?

You need an extension for static analysis/linting HTML, there is a HTMLHint extension.

 

Great list, tho I still find Auto Close Tag and Auto Rename Tag quite buggy when working with deeply nested code structures... Also, be careful with Quokka as you can mess up your code quickly if you use it in multiple places simultaneously.

 

You don't need ACT or ART anymore. Both features are now available in VS Code, and that built in functionality may be fighting with the extensions.

 

Didn't know that about Quokka. I only use it for testing out stuff on the fly.
Never had problems with Auto Close Tag and Rename Tag... Strange

 

Hi, I'm the editor of InfoQ China which focuses on software development. We like your article and plan to translate it into Chinese and publish it on our website. So I want to ask for your permission first! This translation version is provided for informational purposes only, and will not be used for any commercial purpose.

In exchange, we will put the English title and link at the end of Chinese article. If our readers want to read more about this, he/she can click back to your article.

Thanks a lot, hope to get your help. Any more question, please let me know.

 

That’s fine. Go ahead

 

I have quite a few that I use and sometimes wind up slowing VS Code startup due to the number of them (LOL):

Bracket Pair Colorizer 2
Color Highlight
ESLint
indent-rainbow
Node.js Modules Intellisense
Rewrap
TODO Highlight
TODO Parser
Visual Studio Intellicode
VS Color Picker

Extensions that I have active but use infrequently:

Bookmarks
Lorem ipsum
Spell Right
vscode-random

I have found Lorem ipsum to be useful for generating long password strings for protecting PDF documents generated with PDFKit.

 

Really nice suggestions, specially Quokka.js and Markdown Preview that I will absolutely install. Thank you!

 

to be honest Gitlens deserves to be listed..

 

Great article. Thanks for sharing

 

I use quite a few of those Bracket Pair Colorizer 2 was a game changer when I discovered it not sure how I coped without it.

 

Quokka is awesome. I saw it used on a Fun Fun Function video a while back and was blown away.

 

Thanks! I’ll give live server a god for sure, that seems extremely convenient when working with static sites!

 

Thanks for sharing.. nice extensions.. will definitely try markdown enhanced..

 

Check out my darkmode theme that I created:
marketplace.visualstudio.com/items...

 

Thanks for sharing this information. I really like your blog post very much. You have really shared a informative and interesting blog post with people. Hotmail