VS CODE EXTENSION(S) EVERY DEVELOPER MUST KNOW

Zajjaj Bin Sana
4 min readFeb 26, 2023

--

As a software developer, you are likely using VS code extensions. Extensions are a helping tool for developers to make their work environment easy and friendly. Different developers use different extensions according to their work and the language used. In this article, I will share my top five extensions that I use in my daily development task and how these extensions help me accomplish my task.

#1 BLACK BOX

Visual representation of Black Box Extension

Black box is a super cool Ai extension that helps developers solve problems within visual studio code, it was really mindblowing for me when I first started to use this extension. it is an Ai tool that collects data from the internet and then provides the solution to developers in the ide, also provides the source from where the code is fetched. Bellow is a perfect use case for this black box extension.

Use: The developer has to write the question he/she looking for with pair of forward slash (/) at the start and a question mark (?) at the end, and the Black-box will show the most related answer to it with the source link at the end.

#2 Prettier-Code formatter

If you are a developer and don't use prettier then there is something wrong :). Prettier is the most used extension in vs code by every developer. It simply maintains the code consistency and representation of the code. while writing code it is possible the developer loses consistency and with prettier with a one-click everything manages to look perfect and in place. it also helps in debugging the code or refactoring.

Visual representation of Prettier

To install prettier through terminal

ext install esbenp.prettier-vscode

#3 VS Code ES7+ React/Redux/React-Native/JS snippets

if you are a ReactJS developer this extension is a game changer for you. it is a very useful extension that a lot of developers are unfamiliar with. if you use a class-based component or functional component this extension has covered it all. it gives you autocomplete code of react functional/class-based components which saves a lot of time and makes development fast and easy.

Visual representation of Extension

use: First we have to install this extension in the vs code and then the magic happens, rfce: react, functional component, export. It will give a default code back and that's pretty fast and neat too. it also has other cool sort keywords which makes development quite fast and easy. Check the extension documentation for more useful sort keys.

#4 Auto-complete Tag

While writing code it is very likely to just forgot the closing tag of a div or any element and that can lead you to disaster and days of debugging, I have been in this before I started using this extension. it just auto-completes the end tag of any element or tag so the developer is free from closing the tags, but it does have a small bug which is it also adds a closing tag with the element that tends to be self-closing tags, like input and that is sometimes annoying to me. But the extension is very useful itself.

Visual representation of the extension

Extensions are very useful and play a huge role in the development industry. Using these few cool extensions made my life quite simple as a developer and I thought of sharing them. Hope you found it useful and helpful if any of the above extensions are new to you and haven't tried them, Go try them out today and let me know in the comment section about them.

Happy coding

--

--

Zajjaj Bin Sana

I am a self-taught MERN stack developer currently doing my bechlors in Electrical Engineering,I write about Topic of my interest spreading my knowledge to world