JSX or HTML autocompletion in Visual Studio Code

Question

Is there any way to use components or HTML completion in Visual Studio Code? Because typing each letter manually is not good idea when we have classes like Bootstrap etc. Fo

Answer 1

Autocomplete for React Babel was working fine until yesterday for me.

None of these answers helped so I just restarted my computer. Worked like a charm ;)

Answer 2

2019 Update

---

Auto closing tags in .html, .js, and .jsx

Works out of the box. That is, after typing in the closing bracket to the opening tag, the closing tag will be inserted automatically.

Emmet with basic HTML in .jsx files

Works out of the box.

Emmet with basic HTML in .js files:

Add the following setting, required for Emmet abbreviation suggestions, and required for tab expansion to work consistently.

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

Emmet with custom tags (e.g. React Components) in both .js and .jsx files

Add the following setting:

  "emmet.triggerExpansionOnTab": true,

Note that with this setting, Emmet will expand all words as custom tags (not just React component names)

Also note that when using Emmet to expand React components as custom tags, you have to actually choose the component name from the suggestion list and complete that first (or type out the whole name manually and close the suggestion menu with the escape key). After the word expands, you then have to tab again to get Emmet to expand the custom tag.

There's an active feature request to potentially remove this extra step (automatically expand when selecting the suggestion so that it works the same way as expanding standard html tags would).

---

Troubleshooting

Ensure you have the latest version of VSCode.

Ensure you did not change the following default settings:

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,

// read the GitHub issue listed above if you're curious why this is required).
"editor.wordBasedSuggestions": true,

// you obviously don't want javascript, javascriptreact included in here if you want Emmet to be available in those files
"emmet.excludeLanguages": [
    "markdown"
],

Answer 3

Follow these two steps only:

1. On bottom of VSCode where detect language click on that

1st step

2. Click on "Configure 'Javascript(Babel)' language based settings..." or what ever

2st step

3. paste this code on it separate first by comma ',' and save it.

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

3rd step

Answer 4

Simple answer in 2020

First, select the File Association in the bottom-center-right of the window.

Second, select Configure File Association for .js from the menu that drops down at the top-center of the window. Change it to JavaScript React.

Answer 5

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)

Answer 6

It took me two steps to get auto-closing tags in JSX.

1. Follow Kehkashan Fazal's instructions above about setting "emmet.includeLanguages"
2. Download the Auto Close Tag extension from VSCode (formulahendry.auto-close-tag)

And now you have nice auto-closing JSX tags!