15 React Productivity VSCode Extensions (Pack)
Firstly, let me introduce myself. My name is Cem. Currently, I am working as a FullStack Engineer in Berlin. 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 :)
Extension Pack: https://marketplace.visualstudio.com/items?itemName=ickarakurt.react-productivity-pack
Auto Close Tag
The extension adds HTML/JSX close tags automatically same as Visual Studio IDE or Sublime Text does.
Auto Close Tag — Visual Studio Marketplace
Extension for Visual Studio Code — Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Auto Rename Tag
Automatically rename paired HTML/JSX tag, same as Visual Studio IDE does.
Auto Rename Tag — Visual Studio Marketplace
Extension for Visual Studio Code — Auto rename paired HTML/XML tag
Improve your code commenting by annotating with alerts, informational, TODOs, and more!
Better Comments — Visual Studio Marketplace
The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you…
This extension styles CSS/web colors found in your document.
Color Highlight — Visual Studio Marketplace
This extension styles css/web colors found in your document. In VSC press Ctrl+Shift+P (Cmd+Shift+P on Mac) then type…
The 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.
Docker — Visual Studio Marketplace
The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It…
The extension makes the environment files more readable by using color schema.
DotENV — Visual Studio Marketplace
Extension for Visual Studio Code — Support for dotenv file syntax
Integrates ESLint into VS Code. If you are new to ESLint check the documentation.
ESLint — Visual Studio Marketplace
Integrates ESLint into VS Code. If you are new to ESLint check the documentation. The extension uses the ESLint library…
ES7+ React/Redux/React-Native snippets
Extensions for React, React-Native, and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
ES7+ React/Redux/React-Native snippets — Visual Studio Marketplace
Extension for Visual Studio Code — Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax…
GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.
GitLens — Git supercharged — Visual Studio Marketplace
Extension for Visual Studio Code — Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame…
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 start using Github Copilot. So far, it works really nice.
GitHub Copilot — Visual Studio Marketplace
GitHub Copilot is an AI pair programmer which suggests line completions and entire function bodies as you type. GitHub…
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.
indent-rainbow — Visual Studio Marketplace
If you use this plugin a lot, please consider a donation: This extension colorizes the indentation in front of your…
The extension adds a new menu to the side panel of VsCode. You can add your projects and easily switch between projects.
Project Manager — Visual Studio Marketplace
Organize your projects with Tags Adds Virtual Workspaces support Adds Workspace Trust support Improved Side Bar…
The extension autocompletes filenames. It is really useful while you are importing a component.
Path Intellisense — Visual Studio Marketplace
Extension for Visual Studio Code — Visual Studio Code plugin that autocompletes filenames
Prettier — Code Formatter
Prettier is an opinionated code formatter. It 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 — Code formatter — Visual Studio Marketplace
Extension for Visual Studio Code — Code formatter using prettier
Turbo Console Log
By using a simple keyboard shortcut, you can add a console logline in a readable format
Turbo Console Log — Visual Studio Marketplace
This extension make debugging much easier by automating the operation of writing meaningful log message. I) Insert…
These extensions are really useful for me. Just give it a try and decide whether you need the extension or not.