Techstacker
Light ModeDark ModeReset dark mode. Falls back to OS dark mode setting.

Pages

No results for 'undefined'

Blog Posts

No results for 'undefined'
Powered by Algolia

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

Feb 4, 20191 min readVSCode, ReactViews:

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.

© 2019 - TechStacker
Powered byGatsbyGithubNetlify