Top 10 Visual Studio Code extensions you need to install

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Chris Bongers, Nice collection. I have been using some of them already like live server, prettier.. Shall install rest of them and try..Thanks for sharing!
P.S. On theme, night owl is the first and last love, so far! :)
Have you tried wakatime? That is a good one to get stat on how much time we are spending on code with tech vs time info.
Hey Tapas,
Awesome, glad you found some you weren't using yet. Night owl was my previous theme! Kinda dig the more fluor colors in Dracula now.
I haven't tried Wakatime yet, but looks cool! Will give it a try. Would be very useful since I have to log hours vs projects.
For Tailwind you mean? It's their official header on the page, but looks like Visual Studio yes.
Some of those are very useful Daily Dev Tips. I've been using 'Live server' for as long as I've been using VScode.
I also use one by the name of Discord Presence. It shows what you are editing in VSCode as your discord status. Like this :
What I don't like is it calls it a game. 😡
Hey Prateek, thanks! The live server is a big one, also TabNine, was mentioned to me by Waylon Walker and it's amazing! 🔥
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

I'm making a big guess here, but you are using Visual Studio Code right? It's an amazing Microsoft product (ahem: only one...) and we all love it. What makes it even better is the number of extensions for it.
In this article, we will be walking through ten unique extensions you need to install to make your life easier.

IntelliSense extensions are excellent in general. They enhance development by auto-completing things for you. This one is specifically built for Tailwind, and if you are using Tailwind, you cannot live without this one!
Install Tailwind CSS IntelliSense

This extension is amazing, I've only got to know it very recently, but it's like steroids for Visual Studio Code. It can auto-complete almost anything!
It understands whatever you are typing, code, normal sentences, or whatever and auto-suggests for you.

Auto import scripts are a live saver. This one works for Typescript and TSX. It will auto-import whatever you start typing, and if you ever worked on Typescript you know why you need this!

This is such a cool extension! It gives you a real browser inside Visual Studio that you can debug. The amount of times I've used this plugin is insane. It's based on a headless Chrome and has good security.

This plugin will compile your SASS/SCSS files in realtime and even comes with a browser reload. It's super easy to setup, and you only have to click the watch sass button to run it. Live couldn't be easier to start developing SCSS!

This is a super cool code formatter. Prettier will make your code look beautiful and uniform. It works for many languages, which is amazing. The cool part about this one is that you can even make your own rules to fit your needs.

The title says all, who doesn't want better comments? This extension will help you create more human-friendly comments. It supports annotations, which is very helpful to showcase the perfect comment. Get your new habit started with Better Comments!

Live server is an amazing feature. I have a lot of demo HTML files for instance and sometimes just want to preview them. A simple spool up from live server and we are ready to go.

Sometimes extensions are not about being helpful in a literal sense, but help us by being visually appealing. Dracula is the best theme ever, if you haven't given it a try, do it now. You won't regret it.

This plugin is amazing. It will colorize matching brackets. If you write large systems, this can become very tedious to see which bracket closes which function. This extension saves you by showcasing special colors for each pair.
Install Bracket Pair Colorizer
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter