Extensions: If you are an experienced ReactJs developer, or someone who is learning to code in ReactJs, you are definitely using Visual Studio Code as your Code Editor. VS code provides so many functionalities out of the box, such as syntax highlighting, autocomplete, built-in GIT commands, customization, and so much more.

In this article, we are going to see top VS code extensions for ReactJs, that are going to help you speed up your ReactJs workflow and improves overall productivity.

1. Path Intellisense

Number one extension on the list is Path Intellisense. Once installed, it enables VS Code to autocomplete the filenames.

Installation

In the command palette (cmd-shift-p) select Install Extension and choose Path Intellisense.

You also need to add following configuration options to your settings:

{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }

2. Simple React Snippets

Just like the name, this extension is really simple. It allows you to write React commands with couple of characters.

Installation

In order to install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions. There you have either the option to show the already installed snippets or install new ones.

Supported languages

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)

Example

Below are some of the triggers and their corresponding snippets. If you want to see all of the supported snippets, you can go to this link.

Trigger	Snippet
rcc→	class component skeleton
cwm→	componentWillMount method
cwr→	componentWillReceiveProps method
ren→	render method
rwwd→	class component without import statements

3. VS Code React Refactor

4. 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. A must have extension.

Installation

Visual Studio Marketplace

Launch Quick Open:

• Linux: Ctrl+P
• macOS: ⌘P
• Windows: Ctrl+P

Paste the following command and press Enter:

ext install dsznajder.es7-react-js-snippets

4. Tailwind CSS IntelliSense

Personally, I love this extension. Not only because it helps me in React, but also in React Native. I don’t need to install any other extension for React Native. This single extension does the trick. It enhances your tailwind development experience by providing autocomplete, syntax highlighting, hover preview and also linting.

Installation

Install via the Visual Studio Code Marketplace →

In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.config.cjs in your workspace.

Conclusion

So, there you go. Top React extensions that you must have. They will increase your productivity, and you don’t need to write commands manually. They will autocomplete your filenames, variable names, react imports and commands, and so much more.

What other extensions do you use for ReactJs? Let me know in the comments.

Keep coding and keep learning and also keep building stuff.