DEV Community

oyedeletemitope
oyedeletemitope

Posted on

Vscode Extensions You Should Try Out

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
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

auto close
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 rename
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

code spellThis 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
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

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
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

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

vs code
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

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

bracket
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

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

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
Dracula is a color scheme for code editors and terminal emulators. with features similar to one dark pro. Get it here

Night owl

night
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)

purple
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.

Discussion (10)

Collapse
whippingdot profile image
Sanjaay R.

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

Collapse
oyedeletemitope profile image
oyedeletemitope Author

Thanks for the observation Sanjaay.

Collapse
gokulkrishnann profile image
Gokul Krishna

Thanks for sharing. I'd add Github Copilot to the list as well :)

Collapse
idk__5be4c82538d9e0abac32 profile image
Idk

Lmao why

Collapse
oyedeletemitope profile image
oyedeletemitope Author

Thanks Krishna

Collapse
lashac profile image
LashaC

Prettier and Live Server are great.

Collapse
oyedeletemitope profile image
oyedeletemitope Author

Yes they are LashaC

Collapse
andreidascalu profile image
Andrei Dascalu

Why not bracket pair colorizer 2?

Collapse
oyedeletemitope profile image
oyedeletemitope Author

Noted

Collapse
rborajov profile image
Roschek Borajov

Your choice is coool