Write Code Faster in React (JSX Autocompletion)

#emmet #jsx #react #autocomplete

Hello there, today we will be talking about emmet. For those who are still new to react.js and are struggling to write faster HTML (JSX) code in react.js, this article is for you.

We will be making use of VS code.

What is Emmet?

From Wikipedia:
Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist.

In VS Code, it is already included by default for all HTML and CSS files, but we must make some additional configurations to enable Emmet support for HTML in React. As a result, writing HTML in React (.js) files is significantly quicker and simpler.

We navigate to settings by clicking on the gear icon or settings icon on the bottom left corner of our text editor, then selecting the settings option.
We click on an open file icon on the top right corner of our editor.

Which then opens a settings.json file.
We then add this block of json code below to the code already there.

 "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }

Now open any component file in React and type .menu, and press the tab key and it will auto-complete it to

<div className="menu"></div>

Conclusion

Emmet is unique because it makes HTML typing faster and allows us to build a huge code block using a single statement.
Emmet boosts developer efficiency when it comes to typing in JSX and the developer experience overall.

Please leave a comment below to ask me anything! I’m always happy to talk and help.

Kindly Connect with me on Twitter and on Linkedin

Thanks for Reading!!! 😊