JSX or HTML autocompletion in Visual Studio Code

2019: Straight-to-the-point answer for React

The most straight-forward way to get JSX/HTML autocomplete in your React projects is to add this to your user settings or workspace settings (<project-path>/.vscode/settings.json):

      "emmet.includeLanguages": {        "javascript": "javascriptreact"      },      "emmet.triggerExpansionOnTab": true

You may have to restart VS Code for the change to take effect.

P.S. If you're not doing this mapping for a React.js project, then KehkashanFazal's answer should probably work for you.

Visual studio code detect .jsx extensions and add emmet support by default ( i'm using VS code 1.8.1)

But if you prefer to use .js extention for all your react files - you can associate JavaScript React mode with .js files in bottom right corner of VS Code window.

How to do this step by step (gif)

Update 2021

For those who just want to copy-paste the code:

"emmet.syntaxProfiles": {  "javascript": "jsx"}

If the solution above doesn't work, try this:

"emmet.triggerExpansionOnTab": true,"emmet.includeLanguages": {  "javascript": "javascriptreact"}

Tested with VS Code v1.56.2.

If someone is still struggling with this issue:

I have discovered that simply setting

"emmet.syntaxProfiles": {     "javascript": "jsx"  },

does not enable HTML completion. But, using:

"emmet.includeLanguages": {    "javascript": "html"}

does.

According to emmet docs:

"emmet.includeLanguages": {}

Enable emmet abbreviations in languages that are not supported by default. Add a mapping here between the language and emmet supported language.
Eg: {"vue-html": "html", "javascript": "javascriptreact"}