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.
1. Tailwind CSS IntelliSense
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
2. TabNine
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.
3. Auto Import
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!
4. Browser Preview
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.
5. Live Sass Compiler
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!
6. Prettier - Code formatter
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.
7. Better Comments
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!
8. Live Server
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.
9. Dracula Theme
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.
10. Bracket Pair Colorizer
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, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (15)
Hi Chris,
I might give Tab Nine a go!
VS Code has native auto-import settings, you may not need the auto-import extension. You can check out the article below for the details.
VS Code: You don't need that extension
Rob OLeary γ» Aug 5 γ» 7 min read
Hey Rob,
Nice article, I do find it doesn't import everything, might have been updated now.
But for instance Typescript it didn't auto import before.
But VSC keeps adding the best plugins native so they're going so fast, hard to keep up haha.
Thanks for adding this though!
Fire list man π₯π₯
Finally I've came across extension with browser preview (all-in-one-screen), I preferred to code all the front-end in Codepen or CodeSandbox before for that reason. Will try it out π
Also, TabNine seems to be so intuitive π―
Hey man, yeah indeed the browser preview is amazing π₯
As for TabNine, I only found this recently, installed it, and loving it! π€
I tried TabNine for some weeks and I thought it was great.
But I found out that I was always double checking that what the extension guessed was actually what I wanted.
Although I was amazed the 75% of the time it guessed exactly what I wanted to write, I still needed to choose the good guess.
It's like you are not coding but watching someone learn how to code for you...
So in the end, I find it quite counterproductive. I prefer having a clean autosuggestion list and be sure I can trust every item of it.
Hmm, i see what you are saying, the actual intelisense for each language are way easier for sure.
I'm just blown away so far, by how good it works on actual writings.
Do see how it can become counter productive.
Tab nine is really heavy man βΉοΈ you can't run vscode and browser at the same time the system hangs
Ps: 8 gb ram and i7 H
Ah darn sorry to here, It's been working on my macbook fine, but I've read more people complain about it.
Such a shame, because it's wonderful to use.
Yeah it just makes it so quick to write code
Tabnine seems amazing
Its bizarre! Some people do mention it being very heavy and a bit distracting.
For me it works perfect
But TabNine requires you to install Tensorflow. I got an old machine that has the C++ Redistributable corrupt πππ so I can't use it. Rest of the plugins are dope πππππ
You don't need tensorflow, unless it's pre installed on a mac.
Bracket Pair Colorizer has a new version from the same author with breaking changes.
marketplace.visualstudio.com/items...
Hi Camilo,
Thanks! Wasn't aware it was released already! thank you for the addition! π€