Enable Emmet’s Autocomplete Feature Inside React Files (VSCode)

Emmet is an automation tool for code editors, that saves you a lot of time by giving you code autocompletion on abbreviations. For example, typing h1 followed by hitting the TAB key(on your keyboard) will automatically create a complete h1 element (open/close tags) <h1></h1> and thus save you a lot of typing.

In VSCode, Emmet is built-in, so it works out of the box when you want to do autocompletion inside your .html files.

But when you’re inside a React file, this autocompletion doesn’t always work. In that case, you’ll have to enable Emmet’s triggerExpansionOnTab function manually inside your project’s Workspace Settings.

To enable Emmet inside a React file in VSCode:

• Go to Preferences > Settings
• Inside Settings, click on the {} button in the top right corner to open your settings.json file (Workspace Settings)
• Paste the following inside that and hit Save (CMD or CTRL + S)

{
    "emmet.triggerExpansionOnTab": true
}

Here’s a video showing the entire process:

Now Emmet autocompletion should work inside your React.js files in VSCode.