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.
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:
2. Simple React Snippets
Just like the name, this extension is really simple. It allows you to write React commands with couple of characters.
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.
- TypeScript (.ts)
- TypeScript React (.tsx)
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.
|class component skeleton|
|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.
Visual Studio Marketplace
Launch Quick Open:
Paste the following command and press
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.
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.cjs in your workspace.
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.
In this short article, we are going to see how we can add linear gradient to any text in HTML.
We are going to do this in 3 easy steps.
Learn how to change version number in React Native, in order to successfully upload your update to play store.
Learn how to prevent colors inversion in React native deployed app. We will also see how to get the android folders in react native.