Emmet and JSX

If you’ve ever written HTML tags in an JSX file, you would already have noticed that you lost that flavourish VSCode Emmet autocomplete. Sit back and relax, where there is a will there is a way.

All you have to do is cmd+shift+p on your Mac, or ctrl+ship+p for Linux/Windows to open your Profile>Settings/Json and add the following lines:

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

It will work as is, but if you, like me, got some trouble “tabbing” the autocomplete, you can try adding also this line:

{
    "emmet.triggetExpansionOnTab": true,
    "files.associations": {
        "*.js": "javascriptreact",
        "*.ts": "typescriptreact"
    }
}

Another cool thing to point out is that, if you don’t want Emmet on all your files, you can add these lines to your .vscode/settings.json for your project. It will live only there.

Hope this helps, I know it did for me!