8 VSCode Extensions Every Developer Must Have

Vedant Bhushan7 days ago

These are awesome extensions! Maybe you could add tabnine as well.

2

2 replies

Reply

Jacob Bankston

Jacob Bankston3 days ago

Definitely picked up Turbo Console Log, and had a few of the others already! Great list overall.I would recommend adding indent-rainbow, it colorizes the indentations of lines to make your code more readable.

1

1 reply

Reply

Sylvain Pont

Sylvain Pont7 days ago (edited)

TCL is Amazing, thank you for that.Some remarks:Project manager seems to be a LOT more used than Projects. Whould you explain why you chose the later?VSCode now ships with Sync Settings. I used to use Settings sync extension but the VSCode one is…...

Read More1 reply

5 min read

VS Code is one of the most popular and widely used code editor. It comes packed with lots of features that are free in comparison to other editors. You can download extensions on VS code, which add another dimension of incredible features.

I have listed some of my favorite VS code extensions, without which I cannot live.

Please note that there is no ranking involved. Each extension is impressive in itself. The last one and the first are equal.

I am sure you will leave with a new extension that will make your work easier.

1. Turbo Console Log

Turbo console log is a killer extension when coming to the debugging part. This extension makes debugging easier by automating the process of writing meaningful log messages.

You insert meaningful log message automatically with two steps:

  • Selecting the variable which is the subject of the debugging
  • Pressing ctrl + alt + L

2. Import cost

Speed is essential for your website. If your page or app can’t load quickly, it is the same as no page.

This extension displays your import’s size. This way, you get to know how much you will be downloading and figure out why your application is sluggish.

With this extension, you can decide if you should write a function or import the whole bundle.

3. Prettier

This extension is for everyone, be it If you code in python, JavaScript, or any other language.

It makes your code, as the name suggests, prettier.

I am terrible at giving equal lines and spacing and tab. As a result, my code looks just like some noodle pasta.

With prettier, as soon as you press command+S, you will experience the magic. All your code will get correctly and equally spaced, and proper line spaces. Your code will look beautiful.

No-One will ever identify how messy you are 😐.

4. Bracket pair colorizer

How many times it happens that when editing JavaScript code, you have trouble finding the closing brackets. It is painful to use the finger to trace the opening and closing brackets. Stop wasting your time and use this extension.

Your opening and closing brackets are colored the same; it is easier this way.

This extension is a must-have for those who have spent time with python because python doesn’t require brackets; this will help the transition.

Image for post

5. Live share

Live share is a fantastic extension. With it, I can code with my friends, colleagues.

Whenever I am stuck with a problem, I can pull over my friend to help me.

What this extension does is that it gives remote control of your VS code editor, the opened files. With that, another person can change my code and save it—no need to struggle over the phone anymore or wait to meet your friend to get help.

One of the features you get with this is that — You get to code in real-time. You get to know who is typing and what it is that they are entering. It makes coding just like messaging, which we all love. Thanks to VS code and live share. Besides, it also gives access to localhost, your terminal.

Live share is one of the best features of VS code, in my opinion, and the reason I recommend it to everyone. I haven’t seen anything as good as it and free to use. Mind-blowing!

Bonus: You can download the live share audio extension, which adds audio calling capabilities to Live Share. I love this and especially in the pandemic when everything has gone remote.

6. Projects

If you are working on several projects at a time, then switching between folders is hard. You have to navigate to the required folder. And if you switch between quite often, then it is hell.

One use I find with this extension is that it can work as your favorite tab. E.g. Someone may store custom CSS and bootstrap in a folder and use this extension to navigate in between quickly.

Image for post

7. Settings Sync

As the name suggests, setting sync extension stores all your setting backup in GitHub. This way, you can have the same settings for your multiple devices or new devices. Any changes made can be seamlessly synchronized.

It allows you to sync pretty much everything you customize on VS Code to Github, from settings to keyboard shortcuts to other VS Code extensions.

8. JavaScript (ES6) Code Snippets

VS Code comes with built-in JS IntelliSense, but JS Code Snippetsenhances that experience further by adding premade JavaScript snippets, which contain the most commonly used snippets. No more repeating of code endlessly.

The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue.

Image for post

I hope you enjoyed reading and I provided value to you. If you find extensions that I have missed and you find it amazing, mention it in response.

Thank You 🙌

Ali Haider

Over 5 years of obsession with technology || Writer and developer. I love making new friends, why don’t we be friends?

Comments are closed.