15 VSCode Extensions to Boost your Productivity in React

In this article, I will share the VSCode extensions I used for react development and productivity. I hope you can find delicious extensions to use :)

AutoClose Tag

The AutoClose Tag extension adds HTML/JSX close tags automatically same as Visual Studio IDE or Sublime Text does.

Auto Rename Tag

Auto Rename Tag automatically renames paired HTML/JSX tag, same as Visual Studio IDE does.

Better Comments

The Better Comments extension helps you improve your code commenting by annotating with alerts, informational, TODOs, and more!

Color Highlight

Color Highlight extension styles CSS/web colors found in your document.

Docker

This extension adds a Docker menu to the side panel of VsCode. With this menu, you can build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging for some languages.

DotENV

This extension makes the environment files more readable by using color schema.

ESLint

This extension helps to integrate ESLint into VS Code. If you are new to ESLint, check the documentation.

ES7+ React/Redux/React-Native snippets

These are extensions for React, React-Native, and Redux in JS/TS with ES7+ syntax. They are customizable and come with built-in integration with Prettier.

Gitlens

GitLens supercharges Git inside VS Code and unlocks untapped information within each repository. It helps you visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations, powerful comparison commands, and so much more.

GitHub Copilot

GitHub Copilot is an AI pair programmer which suggests line completions and entire function bodies as you type. GitHub Copilot is powered by the OpenAI Codex AI system, trained on public internet text and billions of lines of code.

I recently started using Github Copilot. So far, it works really nice.

Indent Rainbow

This extension colorizes the indentation in front of your text, alternating four different colors on each step. This is a really helpful extension to make indentation more visible.

Project Manager

The Project Manager extension adds a new menu to the side panel of VsCode. You can add and easily switch between projects.

Path Intellisense

This extension autocompletes filenames. It is really useful while you are importing a component.

Prettier — Code Formatter

Prettier is an opinionated code formatter. This extension enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Turbo Console Log

Turbo Console Log extension enables you to add a console logline in a readable format by using simple keyboard shortcuts.

In Conclusion:

These extensions are really useful for me. Just give it a try and decide whether you need the extension or not.

You can also find the extension pack on GitHub and Visual Studio Marketplace.