Medium Top JavaScript VSCode Extensions for Faster Development

VSCode is an open source cross-platform editor. Its high-speed, extensible, customizable features have made VSCode one of the most popular editors for programmers, especially in the Web development community. If you haven’t used it yet, download one and give it a try!

There are thousands of extensions available for VSCode, so here are just a few that I use daily:

Quokka.js

Quokka.js can serve as a quick “prototype square” for JavaScript and TypeScript. This means that it can run your code as soon as you type, and display multiple results in your editor. Try it:

⌘ to open the command palette, type Quokka to see the list of available commands, select the New JavaScript File item and press Enter to run. You can also ⌘ + k + j to create a file directly. Next, any code you type into the file will be executed immediately.

Bracket Pair Colorizer & Indent Rainbow🔥 🔥

Parentheses are an integral part of most programming languages. In JavaScript, for example, there is a serious lack of a simple mechanism to pair the beginning and end of parentheses once they become numerous. The Bracket Pair Colorizer and Indent Rainbow extensions make things a lot easier and make a perfect match. Use rise already beautiful and practical, once used habit, get used to the day that does not have them again hard.

Snippets

Snippets are shorthand for the editor’s code writing process. For example, if you write ‘import React from’ React ‘often, use imR and press Tab instead. Similarly, CLG can be used instead of console.log.

The extension supports various types of syntax, such as JavaScript, React, Redux, Angular, Vue, Jest, and more. Since I personally write JavaScript a lot, I find this extension very useful.

Todo Highlighter

When you write a function, you often find that there might be a better way to do the same thing. You’ll then leave a // TODO: Needs Refactoring comment or some other expression to the same effect. But then you might forget the comments and push the code directly into the master or production environment. With this extension, we may be able to reduce this kind of thing. It highlights your TODOs in an easily recognizable color, with the following effect:

Import Cost

This extension allows you to see the size of a module in real time when it is introduced. This feature will help your packer a lot. Helps you choose to import entire libraries or specific modules.

REST Client

As Web developers, we often have to work with a variety of REST apis. Usually we use tools like Postman to check the URL or interface response data. But with the REST Client, we can view HTTP requests and responses directly in VSCode.

Auto Close Tag & Auto Rename Tag

Since React’s introduction and the attention it has gained over the past few years, HTML-like syntax in JSX form is all the rage. Once again, tags are all over our code. Any Web developer will tell you that typing tags is annoying. In most cases, we need a tool that can quickly and easily generate tags and their child elements. Emmet is a great extension built into VSCode. But sometimes, you just want simple features. For example, auto-close tags, which automatically generate closing tags when you type in a start tag. When you change the same TAB, the closed TAB page automatically changes. These two extensions are designed to do just that. They also work in JSX, XML, PHP, Vue, JavaScript, TypeScript, TSX.

These are some of the extensions I use to write code. Do you have a favorite productivity extension? Leave a comment below.