15 VSCode Extensions to Boost your Productivity in React

In this article, I will share the VSCode extensions I used for and . I hope you can find delicious extensions to use :) react development productivity AutoClose Tag The adds HTML/JSX close tags automatically same as Visual Studio IDE or Sublime Text does. AutoClose Tag extension Auto Rename Tag automatically renames paired HTML/JSX tag, same as Visual Studio IDE does. Auto Rename Tag Better Comments The helps you improve your code commenting by annotating with alerts, informational, TODOs, and more! Better Comments extension Color Highlight styles CSS/web colors found in your document. Color Highlight extension Docker 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. This extension DotENV the environment files more readable by using color schema. This extension makes ESLint helps to integrate into VS Code. If you are new to ESLint, check the . This extension ESLint documentation ES7+ React/Redux/React-Native snippets These are for React, React-Native, and Redux in JS/TS with ES7+ syntax. They are customizable and come with built-in integration with Prettier. extensions Gitlens Git inside VS Code and unlocks within each repository. It helps you at a glance via Git blame annotations and CodeLens, Git repositories, via rich visualizations, powerful comparison commands, and so much more. GitLens supercharges untapped information visualize code authorship seamlessly navigate and explore gain valuable insights 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. GitHub Copilot I recently started using Github Copilot. So far, it works really nice. Indent Rainbow 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. This extension Project Manager The adds a new menu to the side panel of VsCode. You can add and easily switch between projects. Project Manager extension Path Intellisense This autocompletes filenames. It is really useful while you are importing a component. extension Prettier — Code Formatter is an opinionated code formatter. This 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. Prettier extension Turbo Console Log enables you to add a console logline in a readable format by using simple keyboard shortcuts. Turbo Console Log extension 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 and . GitHub Visual Studio Marketplace