My top Visual Studio Code extensions  for React development

My top Visual Studio Code extensions for React development


React, also known as React.js or ReactJS, is an open-source JavaScript library for building user interfaces (UIs) and web applications.

Developed and maintained by Facebook, React has gained widespread popularity in the web development community for its efficiency, flexibility, and component-based architecture.


My articles are constantly evolving, and I welcome any feedback, corrections, broken links, or suggestions you may have. Please don't hesitate to share them with me, and I'll be grateful for your input.

Give me a shout or add me:

Let's get down to business

shall we?

The-office GIFs - Get the best GIF on GIPHY

Make sure you VS Code

In this article, you can check its installation process with a Debian file format. Check it out.

On Fedora, it's this article.

Open a terminal



The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version.

code --install-extension dbaeumer.vscode-eslint


Configure it on save

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.

code --install-extension esbenp.prettier-vscode


Set as default formatter

Configure Prettier - Code formatter as our VS Code default.

Npm intelissense

Visual Studio Code plugin that autocompletes npm modules in import statements.

auto complete

code --install-extension christian-kohler.npm-intellisense


VSCode React refactor

This simple extension provides JSX refactor code actions for React developers.


  • Extract JSX code parts to a new class or functional component

  • Supports TypeScript and TSX

  • Works with classes, functions and arrow functions

  • Handles key attribute and function bindings

  • Compatible with React Hooks API



code --install-extension planbcoding.vscode-react-refactor

Material Icon Theme

Files and folder icons for Visual Studio Code. The repo can be found here

code --install-extension pkief.material-icon-theme


Auto REname TAG

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does. The repo can be found here.

code --install-extension


Code Snap

It allows us to take beautiful screenshots of the code.

Main Features:

  • Quickly save screenshots of your code;

  • Copy screenshots to your clipboard;

  • Show line numbers

code --install-extension robertz.code-snapshot


Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.

code --install-extension wix.vscode-import-cost


Check all extensions installed

code --list-extensions




Happy Season 2 GIF by The Office - Find & Share on GIPHY

Let's become friends

Final thoughts

Thank you for reading this article.

If you have any questions, thoughts, suggestions, or corrections, please share them with us.

We appreciate your feedback and look forward to hearing from you.

Feel free to suggest topics for future blog articles. Until next time!