JSX or HTML autocompletion in Visual Studio Code

Solution 1:

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.

Solution 2:

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.