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-snippets4. 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 add Icon and Text to HTML file input
Have you ever wondered how to add Icon and text to default html file input? In this article we are going to see how to change your default html file input.
-
What is MERN tech stack? Explained with folder structure
Learn about the basics of MERN Stack, i.e., FrontEnd and Backend technologies and respective folder structure for each.
-
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.
