Top Visual Studio code extensions for ReactJs
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:
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.
-
How to take screenshots in android studio?
In this short article, we are going to see how we can take screenshots inside Android Studio and also changing default location for saving screenshots.
-
How to setup an app to Google Play Console (detailed)
In this detailed article, we are going to see the process of uploading our expo built app to Google play console.
-
Elon Musk names Linda Yaccarino new Twitter CEO
Elon musk has names Linda Yaccarino as the new Twitter CEO, after his takeover of the social media company.