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!!!
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
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 name tag as the name implies helps in automatically renaming paired HTML/XML tag. This is another extension I’ll recommend. Get it here
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 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 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 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
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
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
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
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
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 is a color scheme for code editors and terminal emulators. with features similar to one dark pro. Get it here
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
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
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.