A collection with the best VS Code extension for JavaScript developers

For some years now, I’ve been using the Jetbrains suite of IDEs like PyCharm pro and WebStorm, and since those are on the expensive side, every time I recommend them, people suggest me to switch to VS Code, as it’s free and awesome. So after some discussions on Reddit in that regard, I promised I would try VS Code for a few weeks.

Some of the big selling points for the VS Code (besides the price, FREE) are customization options and the plugin ecosystem. Since I wanted to have a great experience during my tryout, I needed some plugins to level up my game, so again, on Reddit, I was suggested a ton of them, and I’d like to talk today about those plugins for VS Code that were truly awesome.

Now, I’m still going to be using PyCharm and WebStorm in my projects because it’s what I love, been using them for years, and they provide me a lot of value for the money. With that said, VS Code amazed me, it was super easy and fast to use, and it was a great experience overall.

---

ESLint

ESList is one of the most popular and beloved extensions among JS developers, without a doubt. The extension runs ESLint rules on your code and integrates the result within the editor. It allows you to detect and fix quickly rule invalidations. It’s a must-have for all JS developers as it helps improving productivity and quality of the code.

Download ESLint

---

Prettier

Prettier is an opinionated code formatter that integrates with VS Code, Visual Studio, Atom, Vim, Sublime Text, and many more. This handy little extension makes your codes consistently formatted and properly indented and presents colored keywords for more readable code.

It reduces the formatting effort and thus increasing productivity. It helps produce high code readability.

Download Prettier

---

Quokka.js

Quokka.js provides rapid JavaScript prototyping in your VS Code editor. It is a live playground for JavaScript and TypeScript. It is often called the modern-day scratchpad for JS developers.

Have you ever wanted to try something quick and you end up on your browser’s console to run some JS? Or you start the node process on a terminal and try it there? This extension’s primary purpose is to run code fast and conveniently right there in your VS Code editor.

Download Quokka.js

---

REST Client

REST Client is a VS Code extension that allows you to send an HTTP request and view the response directly in VS Code.

It is Postman for VS Code with the convenience of being integrated into the code editor. REST Client supports both REST and GraphQL APIs

Download REST Client

---

Debugger for Chrome

Debugging JavaScript can be painful. Chrome and other browsers offer amazing tools that help you with the job. Still, they are often hard to work with or don’t provide a great experience overall, especially when working with frameworks and many libraries.

Debugger for Chrome is an extension developed by Microsoft that seamlessly helps you debug your code for every small change. Debugger for Chrome console is pretty powerful when it comes to discovering which lines and functions occur the error came from, up to seeing its data handling.

Run your code on Chrome, debug on your code editor.

Download Debugger for Chrome

---

Live Server

Live Server allows you to launch a local development server with live reload feature for static & dynamic pages. This may not be very relevant for those working with frameworks that already setup live-reload like React, but if you are working with other web pages or static content, this extension is a live saver.

Download Live Server

---

Live Share

This one is amazing, and I’m not sure there’s something like this for WebStorm, but it allows you to share your code editor with other people. It’s perfect for pair programming, especially with the growth in popularity of working from home.

I used it, and I loved it.

Download Live Share

---

JavaScript (ES6) Code Snippets

As you have seen by now, many of the extensions on this list are productivity boosters, and JavaScrip (ES6)t Code Snippets is no exception.

The title is pretty self-explanatory. The extension allows you to increase your productivity by working with a predefined snippet set. You can customize the snippets to match your preferences by installing other packages or building your own.

Download JavaScript (ES6) Code Snippets

---

Babel JavaScript

JavaScript evolved so much in the last few years, and with the introduction of frameworks and libraries like React, Flow, GraphQL, many new types of “syntaxes” are now allowed.

Babel JavaScript enables syntax highlighting for new JavaScript syntax and these particular “languages” keeping your JavaScript editor working with the latest and prettiest.

Download Babel JavaScript

---

One Dark Pro

As developers, we spend a lot of time in front of our code editors, so it is crucial that we are pleased with the esthetics of it. One Dark Pro is a theme for VS Code that makes it look beautiful and more similar to what I’m used to.

Download One Dark Pro

---

Conclusion

After trying VS Code, I was surprised to see how fast and reliable it is. However, after customizing it using extensions, I also discovered how powerful it is.

Because it’s one of the most, if not the most, popular code editor in the market, there’s a huge community behind building tools and extensions to make it even better. That’s something I also loved about Jetbrain products and that I love now from VS Code.

VS Code is a solid choice for any developer, and I recommend it. For myself, however, WebStorm and PyCharm have a special place in my heart.

Thanks for reading!

Source: livecodestream