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.