HTML tag autocomplete stopped working on JSX files (Code - Insiders)

[rickitan]

• VSCode Version: Version 1.9.0-insider (1.9.0-insider) | 2017-01-11T07:05:43.066Z
• OS Version: 10.12.2

I opened this issue #18284 on Monday. I downloaded the nightly build to verify the fix that @aeschli introduced. It did work.

But I found a possible regression. Autocompleting tags in javascriptreact files stopped working:

On stable it is working:

Thank you for the hard work guys, I'm loving VS Code.

[aeschli]

We now have a separate language id for inside react tags: jsx-tags.
The emmet mode should map that to the mode id it uses.

[rickitan]

I just downloaded the latest nightly build and confirmed the fix. Thank you @ramya-rao-a ! 🎊

[accounthandler]

seems it happened again. vs code ver: 1.10.2 2017-03-08T13:54:01.558Z
mac os 10.12.2

[ramya-rao-a]

@accounthandler I just tried on 1.10.2, works fine. What is the language mode on your file? You can see it on the bottom right corner

[accounthandler]

@ramya-rao-a
javascript (babel) or javascript react (babel) , neither works. But if I switch to html, then it works.
(the file extension is .js, just a boilerplate file created by create-react-app)

It's also weird to me, since it was working yesterday.

[ramya-rao-a]

As long as the language mode is "Javascript React", it should work

Can you share a gif/screenshots of what you are seeing with sample code perhaps?

Was this working for you in 1.10.2 ?

[accounthandler]

It was working. No idea what happened...

[ramya-rao-a]

The language mode "Javascript Babel" are you getting that from an extension?

[accounthandler]

These are the extensions I installed. Maybe from the first one babel es6/es7. But even after I disable the plugin, the tag autocomplete still doesn't work.

[h2df]

Using highlighter plugin Sublime Babel, this issue occurs too.

[ramya-rao-a]

I installed both the babel and sublime babel extensions

And emmet expansions work for me both in .js and .jsx files with language mode as Javascript React (Babel) in the Insiders build but not in the Stable build.

@aeschli Did we change something around this?

[kivohin]

Not working for me also on stable version 1.14.2 inside JS and JSX files when using "emmet.useNewEmmet": true. But with "emmet.useNewEmmet": false it works.

However inside HTML files both cases are fine. Has this been fixed yet?

[ramya-rao-a]

@kivohin This is fixed in the latest Insiders. Can you give it a try there?

[luishrd]

broken for me on Version 1.14.2

[ramya-rao-a]

VS Code 1.15 will be released soon (mostly tomorrow) in which this should be fixed without any settings change.

[whs465]

@ramya-rao-a
Autocompleting tags in javascriptreact files for components is broken for me on VS Code 1.15.

[ramya-rao-a]

@whs465 Emmet suggestions will not show up for simple words. We made that decision because other wise you will end up getting a suggestion for every word you type.

We are working on getting tab back for emmet. So for components, that should work. Follow the issue number 32243

And for actual abbreviations like MyComponent.hello>YourCompnenet gets emmet suggestions even today

[lottamus]

@CodeLittlePrince

"emmet.includeLanguages": { "javascript", "html" },
add this to your settings.json

I think you meant: "emmet.includeLanguages": { "javascript": "javascriptreact" }

This works for me

[smiled0g]

I have version 1.15.1, still not fixed

I practically cannot work now. Please suggest what to do.

[ramya-rao-a]

@smiled0g You need to provide more details on what is not working for you. What settings have you set? Which file are you working on? etc.

Please read the Emmet docs

[ziison]

step 1: the setting emmet.triggerExpansionOnTab and set it to true.
step 2:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "plaintext": "jade"
}