We recently published a translation of an article about useful VS Code extensions for Python developers. It's JavaScript's turn!
Last time, readers shared their favorites in the comments. We hope that today we too will be able to collect an excellent collection of useful VS Code extensions for JavaScript.
I've been using PyCharm Pro and WebStorm, an IDE by Jetbrains for several years now . Since these are not cheap products, every time I recommend them, people suggest that I switch to VS Code, as this editor is free and cool at the same time. After several such discussions on Reddit, I promised to test VS Code within a couple of weeks.
Among the important advantages of VS Code (besides, of course, the “for free” cost): customization and an ecosystem of plugins. I wanted to get the most out of the trial, which is why I needed plugins. Again on Reddit I was advised by a huge number of different extensions, and today I would like to talk about plugins for VS Code that I especially liked.
Despite my experimenting with VS Code, I continue to work with my beloved PyCharm and WebStorm, as I've gotten used to them over the years. Their cost is fully justified by the value and quality. That being said, VS Code pleasantly surprised me: it's a very simple and fast tool.
ESLint
ESLint is without a doubt one of the most popular extensions among JS developers. It applies ESLint rules in code and displays the result in the editor. This allows you to quickly identify and correct violations of the rules. ESLint will be useful to all JS developers, as it helps to improve performance and code quality.
Download ESLint
Prettier
Prettier is an opinionated code formatting tool that integrates with VS Code, Visual Studio, Atom, Vim, Sublime Text, and other editors. A handy little extension to help you format your code, indent your code and highlight keywords to make the code easier to read.
Of course, such useful features will reduce formatting work and therefore increase our productivity. Thanks to Prettier, the code readability will be very high.
Download Prettier
Quokka.js
The Quokka.js extension provides rapid JavaScript prototyping in the VS Code editor. It is a real-time sandbox for JavaScript and TypeScript developers. Quokka.js is often referred to as the modern notebook for JavaScript developers.
Have you ever wanted to test something quick and ended up using the browser console? Or do you run
node
-process in terminal and try there? The main goal of this extension is to quickly and conveniently run code right in the VS Code editor.
Download Quokka.js
REST Client
The REST Client is an extension for VS Code that allows you to send HTTP requests and see the response right in VS Code.
This is Postman for VS Code, but conveniently built into the code editor.
The REST Client supports REST and GraphQL APIs.
Download REST Client
Debugger for Chrome
Debugging JavaScript can be frustrating. Chrome and other browsers offer great tools to help you get started.
However, they are often not easy to work with. Besides, such tools are not very convenient, especially when using frameworks and many libraries.
Debugger for Chrome is an extension developed by Microsoft that helps you easily debug your code for every small change.
The extension console is pleasantly surprising with its power, especially when you need to find out in which line and function an error occurred. You can even trace data processing.
Run the code in Chrome and debug it in the code editor.
Download Debugger for Chrome
Live Server
Live Server allows you to run a local development server with live-reload functionality for static and dynamic pages. This is not very relevant for those working with frameworks that have already set up live-reload, such as React. However, if you work with other libraries or static content, then this extension will definitely come in handy for you.
Download Live Server
Live Share
This is an amazing tool! I'm not sure if there is something like this for WebStorm. With Live Share, you can share your code editor with others. It is ideal for pair programming, especially now that most people are still working remotely due to the pandemic.
I tried it and I liked it!
Download Live Share
JavaScript (ES6) Code Snippets
As you've probably noticed, almost all of the extensions on this list are performance enhancements, and JavaScript (ES6) Code Snippets is no exception.
The name speaks for itself! This extension will help increase the coding speed by working with a predefined set of snippets. Snippets can be customized according to our preferences by installing pre-made packages or creating our own.
Download JavaScript (ES6) Code Snippets
Babel JavaScript
JavaScript has evolved a lot lately. A large number of frameworks and libraries have appeared, for example, React, Flow, GraphQL, and, as a result, many new ways to design code.
Babel JavaScript allows you to work with the latest JavaScript syntax as well as the libraries listed above. The extension offers the JavaScript editor the latest and most beautiful syntax versions.
Download Babel JavaScript
One dark pro
Developers spend ages in a code editor, so it's especially important that we are happy with its look and aesthetics. One Dark Pro is a theme for VS Code that makes the editor look more beautiful, like what I'm used to.
Download One Dark Pro
Output
After trying VS Code, I was pleasantly surprised to realize how fast and reliable it is.
By customizing it with extensions, I could also get a feel for how powerful it is.
Since it is one of the most popular code editors on the market (if not the most popular), there is a huge community creating tools and extensions to make it even better. This is what I have always liked about Jetbrains products and what I like about VS Code now.
VS Code is a great choice for any developer. I recommend! However, WebStorm and PyCharm still have a special place in my heart.
Thanks for reading this article!