JaredDev Logo

VS Code: Emmet Support for React

2017-09-12

The issue

I've recently been learning React. One of the tutorials I followed used WebStorm. While this was a great editor I normally work in VS Code and wanted to see if I could get a similar experience out of it!

One of the initial issues I faced was getting Emmet support for the JSX style syntax.

If you aren't sure what Emmet is I'd HIGHLY recommend that you check it out! It allows you to build a full page worth of markup (if you wanted) in a single line.

table>(thead>tr>th*5)+tbody>CourseListRow

The above markup gets turned into a full table.

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <CourseListRow></CourseListRow>
    </tbody>
</table>

CourseListRow is an example of a React component.

Turns out that this didn't work like I wanted out of the box.

The fix

The fix turned out to be a lot easier than I thought it might be.

If you go to File > Preferences > Settings there are two settings that need to be changed for this to work.

    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }

Actually, "emmet.triggerExpansionOnTab" is optional, but I'd highly recommend it.

Simply add these to your settings file and everything SHOULD start working!


In the emmet.includeLanguages tag you can add multiple languages that you'd like emmet support enabled for if they aren't already. My full block on machines where I also do PHP development is...

    "emmet.includeLanguages": {
        "php": "html",
        "blade": "html",
        "javascript": "javascriptreact"
    }