The best VS Code extensions for JavaScript developers

The best VS Code extensions for JavaScript developers


As we did with the best vscode extensions for Python developers it was time to review and update this article containing the best Visual Studio Code extensions for JavaScript developers.

Since the last time I wrote this article, 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.

Useful tutorials, guides, and career tips for developers, delivered once a week.

Subscribe and get a FREE copy of my book ten learning strategies.


    JavaScript (ES6) Code Snippets

    JavaScript (ES6) Code Snippets

    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

    ESLint

    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.

    Download ESLint


    Prettier

    Prettier

    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.

    Download Prettier


    Quokka.js

    Quokka.js

    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.

    Download Quokka.js


    REST Client

    REST Client

    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.

    It is one of the best vscode extensions for productivity for API developers.

    Download REST Client


    Debugger for Chrome

    Debugger for Chrome

    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

    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.

    Download Live Server


    Live Share

    Live Share

    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


    Babel JavaScript VSCode

    Babel JavaScript VS Code

    Babel JavaScript VS Code

    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


    JavaScript Booster

    JavaScript Booster

    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

    JS booster demo

    JavaScript Booster


    Tabnine

    Tabnine

    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

    Tabnine demo

    Download Tabnine


    Conclusion

    Visual Studio 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!