DEV Community

Cover image for 10 AWESOME VS CODE EXTENSIONS 👨‍💻

Posted on


A good vs code user has extensions that help him be the best

Today we will look at 10 vs code extensions that make your coding experience amazing and simplified. All these extensions are must for vs code users

1) Prettier

Do you struggle to make your code look good ? Well, prettier auto formats your code on the go. You should tweak following settings after you install prettier in your vs code editor to make it work.

1) Change your default formatter to prettier
2) Tick the checkbox saying "Format on save"
3) Choose the modifications option in the dropdown saying Format on save mode

2) Live server

Do you create a package.json file then create a script just to test your code on a live server. Well, your life is going to change, Live server does it all in one click. Just click on the live server menu on the bottom menu to open your website on a live server.

3) Auto Rename Tag

This extension is game changer for html developer. Lets you have the following code

<div> Hello I am a span </div>

You need to change the div into a span. You delete the whole thing and rewrite. Or you can simply change the inner context of both the tags. Sometimes the other tag is somewhere in your code. You can't search for it. Using this extension, if you simply change the tag name in one of the either tags it gets changed in the other one also making life more easier

4) Image Preview

You have a website with more than 10 images. You don't which one goes where. Well, This extension gives a preview of your right beside your tag to the left side increasing your productivity

5) Luna Paint

Want to edit your images on the go. Luna paint is an inbuilt image or graphic editor inside vs code. Just install the extension and click on any image the editor magically opens !

6) Snippet creator

Sometimes, you are likely to reuse your code. Now, this extensions creates snippets for your code and you can use the code in that particular language whenever you type the name given for the snippet. Just install the extension and to create a snippet just by selecting the code, opening the command palette and entering all the required information

7) Console ninja

Console ninja gives the result of console directly inside your editor making your work flow easier

8) Rainglow

Have you ever struggled to find the best theme for your vs code editor, well rainglow makes your life easier. They have a bunch dark and light coloured themes. This decreases your need to download new extensions for your vs code theme

9) Vs code pets

Have you ever thought you could play with a variety of pets inside your computer ? Well your dream came true. Install vs code pets extension and you will have a panel below folder panel. When you click on them you can create a new pet, interact with existing pet or throw a ball for the pets to catch. You have dogs, cats, ducks, chickens and whole gallery of pets you can play with when you feel stressed

10) Cody

Are you too poor to afford github co-pilot, you have a variety of free code auto completers in vs code. But, in my opinion cody ai by sourcegraph is the best of them all. I tried Tabnine, Bito and others but I personally liked cody.

You have made it to the end, guys make sure to comment what was your favourite extension of them all. Also, tell me if you know other crazy and useful extensions in vs code

Thank you, Have a wonderful day of code

Top comments (1)

dino2328 profile image

Very well done, nice job