Code Reactjs Faster by Enabling Emmet for JavaScript and TypeScript in VS Code

If you have watched various tutorials on YouTube about Reactjs and wondered how these guys code so quickly?

Well, if you are an intermediate coder like me or beginner you might not have the idea how does they do it. I have found a way how they are all using various plugins in their Code Editor or the IDE(integrated development environment). Some of these plugins include ES7 React/Redux/GraphQL/React-Native snippets, Auto Close Tag, Auto Complete Tag.

But, today I discovered something new for Reactjs developers, its called Emmet support.

The Emmets are actually inspired by the CSS Selectors, it allows you to type shortcuts that are then expanded into full pieces of code. Emmet abbreviation and snippet expansions are enabled by default in js, jsx, tsx, ts among other files.

How to Enable Emmet Support for JSX

You can enable it by adding the following code inside Settings.json of your Visual Studio Code Editor.

"emmet.includeLanguages":{
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
}

References

Brian Design