The best VS Code extensions for JavaScript developers
The best VS Code extensions for JavaScript developers
VS Code has grown significantly into my heart. Its ecosystem of plugins makes it a very compelling option, even compared to WebStorm or PyCharm.
It is still not my editor of choice, but I’ve been using it much more lately for smaller projects or editing simple files, and most of the things I didn’t like from the past are now solved through plugins.
Today, we will reveal those plugins that are a game-changer for JavaScript developers and take VS Code to a whole new level.
JavaScript (ES6) Code Snippets
This 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.
The customization options for building your own snippets is where its power relies on, I haven’t done much of it on my own, but I do install additional plugins to get helpers for React , React Native, Redux and more. Just google “VS Code code snippets” plus your framework, and you will find a set that works for you.
Download JavaScript (ES6) Code Snippets
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 quickly fix rule invalidations. It’s a must-have for all JS developers as it helps improve productivity and the quality of the code.
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 increases productivity. It helps produce high code readability.
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 do 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.
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
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.
Live Server
Live Server allows you to launch a local development server with a live reload feature for static & dynamic pages. This may not be very relevant for those working with frameworks that already set up live-reload like React, but this extension is a live saver if you are working with other web pages or static content.
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.
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.
JavaScript Booster
One of my most loved features in WebStorm is finally available in VS Code. JavaScript booster automatically suggests quick actions to refactor or enhance your code by analyzing your code and its context.
It supports multiple code actions from refactoring conditions, declarations, functions, typescript, promises, JSX, and much more.
Here is a demo of this extension in action:
JS booster demo
Tabnine
Another pain point when coming from Webstorm to VS Code is the quality of auto-completions. In VS Code, code completion works well, but it is far behind what Webstorm or PyCharm can do. However, thanks to the Tabnine , VS Code gets a huge boost.
Tabnine uses AI to provide state-of-the-art suggestions, and it has far exceeded my expectations. It is such a powerful tool that I run it for VS Code and the whole suite of JetBrains’ products.
Let’s discuss some of their features:
- Insane code completion
- Ability to learn from your own and your team’s projects
- Privacy, users can choose to run models locally or get cloud completions, in which case the developer’s code is encrypted and immediately deleted.
- The models are trained on open-source code
- No licensing issues
- Free and paid versions
Demo:
Tabnine demo
Code Runner
Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, and custom command
Open the JavaScript code file in Text Editor, then use shortcut Control+Alt+N (or ⌃ Control+⌥ Option+N on macOS), or press F1 and then select/type Run Code, the code will run and the output will be shown in the Output Window.
Conclusion
VS Code continues to be a solid editor for developers and pretty much anyone that works with text files. It is fast, reliable, and thanks to its ecosystem of plugins, it is one of the best options in the market.
As it continues to evolve, it makes it harder for the likes that me to justify the cost of Webstorm, it is catching up, and I’m curious to see if I will eventually make a move. For the time being, Webstorm is my go-to for big projects, though VS Code is more and more present in my day-to-day work.
Thanks for reading!
Other useful link:
Leave a Comment