This post will help you install and configure Visual Code Studio extensions for ReactJS that will improve your productivity by 10 folds. We are going install extension to create ReatJS Class based and function-based components on the fly and configure Emmet for JSX, ReactJS, VueJS and JavaScript
Install VS Code ReactJS Extension
If you want to create ReactJS components on the fly then you definitely need this extension that does works.
To install ES7 React/Redux/GraphQL/React-Native snippets, click extensions button on the left and type ‘ES7 React‘ to search for this awesome extension and hit install button and you are done.
Now to create ReactJS components you just need to create component files and type ‘rfce’ to create and export function based react component and to create class-based component and export type ‘rce’.
- rfce for function-based component
- rce for class-based component
Emmet Installation on VS Code
This is not how to install Emmet on VC Code but how to configure Emmet on VC Code and Emmet on VS Code comes preinstalled so you do not need to install Emmet again. You need to know how to use Emmet on VS Code.
How to use Emmet on VS Code
Emmet is preconfigured to auto-complete in HTML and CSS files, however if you want to enable and configure Emmet for JavaScript, ReactJS, VueJS then read on.
Enable Emmet for React JSX, JavaScript, and VueJS
To enable Emmet HTML auto-complete in JavaScript, JSX, and VueJS files, we need to add language support for these languages in Emmet settings JSON file.
To add language, support these languages, open Emmet settings JSON file and add following code.
or click Add Item under Emmet tab type the following values.
Now, to use Emmet auto-complete in your JavaScript files type the following commands and hit tab each time.
- .divClassName
- nav>ul>li*6>a
Emmet for React & Vue Demo
JavaScript Practical Course
If you want to become a JavaScript Developer; do not waste your time and money: try this JavaScript Course that teaches your JavaScript, NodeJS, ExpressJS, MongoDB at a very affordable price. View the before you sign up.