Top 8 VS Code Extensions Every Javascript Developer Must Know and Use

Writing Javascript code can be hectic these days - I think everyone would agree on this. What’s the solution? No clear cut solution, but using the best available tools in the industry could make our lives a bit easier.

VS Code is an open-source and cross-platform editor that many developers have incorporated in their toolset. VS Code is a powerful editor which has various features build into it by default and these features can be extended by these things called extensions

Tired of writing too much console.log ?

Sick of formatting your code manually, so it looks neat?

Wished there were fewer keystrokes for the most redundant statements in the world of Javascript?

If your answer to any of the above questions is a YES, then don’t worry because you are at the right place.

Without consuming any more of your time, here are the must-have VS Code extensions

1. ESLint

If you don’t lint your code then it’s high time you do. Once you start using linting, it will make your life so much better and easy. You won’t be spending hours debugging small syntactic errors or a wrong variable name.

ESLint

ESLint extension provides linting powers to your VS Code and allows you to write better code on the fly. Once you start using it, you will never go back.

2. Prettier

Tired of formating your code manually? Cool. Install Prettier.

Prettier

Prettier is an opinionated code formator and it doesn’t care how you write your code. It just formats your code in a neat and tidy manner.

3. JavaScript (ES6) code snippets

Writing the same redundant statements can be tiresome. Every time writing the same line to import a module, or hitting your keys for writing console.log can be annoying. And here comes JavaScript ES6 code snippets to the rescue.

JavaScript (ES6) code snippets

It provides you with triggers for every snippet. Have a look at the below table:

Some triggers

Write the trigger and hit the tab, to see the magic.

4. Bracket Pair Colorizer

Nesting code can be very messy and no matter how much you try to avoid it you will have nested brackets lying in your codebase.

Bracket Pair Colorizer

Bracket Pair Colorizer allows you to see when your if condition or a function ends in a very clean manner.

5. Live Server

If you are a new developer and you write your Javascript code and go to the browser and refresh it to see the results, then do yourself a favor and download Live Server.

Live Server

You write code and hit save, that’s it. Live Server automatically refreshes the browser for you with the recent changes.

6. Import Costs

Your website is getting slow because you have imported too much of unnecessary and large files?

Import Costs

Download Import Costs which will tell you about the size of the file that is being imported so that you can optimize it on the spot.

7. Better Comments

Comments are a very important part of the code even though the compiler avoids it we as developers can’t. Better comments allow you to write dev friendly comments, with a color scheme attached to it.

Better Comments

8. Highlight Matching Tag

I know it is not exactly for the Javascript code but it is very useful when you write HTML or JSX.

Highlight Matching Tag

Highlight Matching Tag allows you to keep the track of the matching tags making it easier for you to code and debug.

Conclusion

I am pretty confident that I have missed some of the coolest extensions out there and if you think there are some extensions that deserve a spot on this list, feel free to comment.

Hope you liked this article and learned something new and if you did clap your heart out and follow me for more content

Thanks for reading ❤

If you liked this post, please do share/like it with all of your programming buddies!