Productive VS Code - Lesson #43

The Best JavaScript Extensions for VS Code

VS Code excels at JavaScript development. It already has a bunch of built-in features, but extending VS Code's JavaScript features with extensions makes VS Code superpowered. Here are some of the best extensions for writing JavaScript in VS Code.

One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. I won't cover framework specific extensions, but here are some of the best extensions in VS Code for writing JavaScript.

This extensions comes with a multitude of helpful JavaScript extensions. My most used snippets from this package:

  • imp - import a default export
  • imd - import a named export using a destructure
  • clg - console.log

View on the VS Code Marketplace

GitHub Copilot is the AI pair programmer that excels at providing hints at which code snippets you may want to use. It's like being able to search StackOverflow right inside of VS Code.

Some of the time, it gives some outrageous snippets. This is due to it being backed by AI. But when it works (and it often works well), it is magical.

View on the VS Code Marketplace

This extension is an absolutely required extension when working in VS Code. This extension catches so many errors that you can't even tell if you've made a mistake or not.

It's a great way to catch your own errors and it's also a great way to enforce certain code rules when working on a team.

View on the VS Code Marketplace

ESLint

A helpful extension to see how many bytes each of the package you have imported will cost your application and more importantly, your users.

View on the VS Code Marketplace

Import Cost

Let VS Code autocomplete your path. When you go to import a file, VS Code will read your file system and provide IntelliSense for your files and folders.

View on the VS Code Marketplace

Path IntelliSense

I use this extension to speed up my JavaScript development. It doesn't do much, but it does make it easier to refactor some code. It can do things like:

  • Replace a string with a template string
  • Convert a named function to an arrow function
  • Convert an arrow function to a named function
  • In React, wrap certain things with JSX brackets {}
  • More helpful utilities

View on the VS Code Marketplace

JavaScript Booster

Version Lens will look at your package.json file and show you the version of your dependencies. It will also show you the packages that have updates available. You can then update your packages with a single click.

View on the VS Code Marketplace

Version Lens

There are many extensions that we can add to VS Code to make our JavaScript development more enjoyable. I hope that this post has helped you to learn more about these extensions and how to use them.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)