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.


Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi