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

5 months ago

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.

No comments to display.