It’s no news that vscode has been and still is one of the best code editors in the market.
Vscode comes with tons of extensions and features that’ll make development processes more efficient, get things done faster, and many more.
In this article, I’ll be writing about some of these extensions. These are the ones that you'll definitely need.Most of them I’ve used and others were recommend by a few of my colleagues. To make it easier for us I’ll be grouping them into :
- General-purpose extension (necessary extensions that will help improve our use of vs code editor)
- Themes (giving our code editor a customized look)
So let's jump right in!!!
General-purpose extensions
Blockman
Blockman is a vscode extension for highlighting a nested block of codes. It gives you information about where the code belongs. It's an extension that’s handy. Get it here
Auto close tag
We’ve all had moments where we forgot to close a tag which has lead to an error or a bug. Auto close tag eases that burden of ensuring we close our tags by automatically adding HTML/XML close tag now we can write our code without even worrying. Get it here
Auto rename tag
Auto name tag as the name implies helps in automatically renaming paired HTML/XML tag. This is another extension I’ll recommend. Get it here
Code spell checker
This extension helps check whether your spellings and variables are spelled correctly. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low. Get it here
Eslint
ESLint is a vscode extension that can both format your code and analyze it to make suggestions for improvement. It is also configurable. This means that you can customize how your code is evaluated. Get it here
Prettier
Prettier is a formatting extension like eslint that automatically helps formats your code whenever you save it. also, if you’re still new to coding, Prettier can save you by allowing you to focus on your project instead of how to make your code readable. Get it here
Live server
Live server is another “must-have” vscode extension. Normally, when you make a change in your code or write something new, you need to refresh the page manually to see the changes. In other words, if you make 100 changes in your code each day, you need to refresh the browser 100 times.The live-server extension, however, automates this for you. After installing it, automated localhost will be able to run in your browser, which you can start with a single button. Get it here
Quokka J.s
Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type. It’s a simple, lightweight extension, and one that’s perfect for both seasoned developers and newbies alike. It’s also free for community use, but if you’re a JavaScript/TypeScript professional, you can also buy a Pro license that lets you modify your runtime values without having to change your code. Get it here
VSCode icons
vscode-icons is an extension for icon customization, project auto-detection and it adds nice icons too. It helps me identify what I’m looking for much faster. Get it here
Gitlens
The gitlens extension Supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. GitLens simply helps you better understand code. Get it here
Bracket Pair Colorizer
It’s such a simple quality of life improvement, This extension essentially allows the bracket that you use in your vscode to have a different color depending on how far they are nested. It allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use. Get it here
Live share
Visual Studio Live Share enables you to edit and debug collaboratively with others in real-time, not minding what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.Get it here
Themes
One dark pro
One Dark Pro is based on Atom's default One Dark theme and is one of the most downloaded themes for VS Code. It's one of my favorite themes so far. Get it here
Dracula theme
Dracula is a color scheme for code editors and terminal emulators. with features similar to one dark pro. Get it here
Night owl
For those who are fancy coding at night. night owl extension is the one for you. it has been Fine-tuned for those who like to code late into the night. Color choices have taken into consideration what is accessible to people with colorblindness and in low-light circumstances. Get it here
Shades of Purple (SOP)
A professional theme with hand-picked & bold shades of purple for your VS Code editor and terminal. It comes with features and attributes like color highlighting and more. Get it here
Conclusion
There are tons of extensions out there, these are the few I've worked with. I'll be at the comment section wanting to hear which VSCode extension you'd recommend and how helpful you think it'll be. Please share if you found this helpful.
Oldest comments (10)
Thanks for sharing. I'd add Github Copilot to the list as well :)
Thanks Krishna
Lmao why
Bruh auto close tag is integrated into vs code now
Also microsoft is building a live preview extension to combat live server...I use it right now - I don't have the link but if you search hard you could find it
Thanks for the observation Sanjaay.
Why not bracket pair colorizer 2?
Noted
Prettier and Live Server are great.
Yes they are LashaC
Your choice is coool