Emmet suggestions are expanding even while writing Javascript in JSX documents

[kumarharsh]

Do you have a question? Please ask it on Stack Overflow with vscode tag

(Use Help > Report Issues to prefill these)

• VSCode Version: 1.14.0-insider
• OS Version: Windows 10

Steps to Reproduce:

1. While writing JS code in a javascriptreact document, emmet is inserting it's suggestions into the intellisense suggestions (such as forEach), and pressing tag creates JSX elements.
   

[freddydumont]

This behavior is also present in 1.13.1.

"Expand Emmet Abbreviation" seems to always be the default action in code completion when writing JSX.

[Ciantic]

This seems to affect only when "emmet.useNewEmmet": true in the settings. I actually like the new emmet though.

This must be hard to fix, how would it know it's not a good choice? Maybe enable the new emmet suggestion only inside specific areas, like when already inside the JSX tags.

P.S. I turned the newEmmet off because of this.

[ramya-rao-a]

The problem is that there is no nice way at the moment for an extension to figure out embedded languages

I have removed the emmet auto complete for jsx files for now.

The command Emmet: Expand Abbreviation will still work. So feel free to use this command or bind a keyboard shortcut (not Tab)

You can still get auto completions for emmet everywhere in jsx files by setting the below. Though you will end up getting class instead of className

"emmet.syntaxProfiles": {
        "javascriptreact": "html"
}

For the ideal solution, I am working on pulling the emmet completion provider into a separate module and have language specific extensions use it by passing the right language.

That work is being tracked here #29114

In that model, a React extension can register a completion provider that uses emmet completion provider and provide completions only when inside the tags in a jsx file.

[kumarharsh]

@ramya-rao-a also, I wanted to point out that the this setting is not working - I'm still getting the emmet suggestions in the JSX files.

"emmet.excludeLanguages": [
    "javascript",
    "javascriptreact"
]

[kumarharsh]

Actually, is there a way to disable emmet altogether? It's not letting me write any code - sometimes it overrides all intellisense, meaning I don't get ANY suggestions. And as said, the setting above doesn't seem to be working.

[ramya-rao-a]

@kumarharsh Good catch on the emmet.excludedLanguages setting. Fixed with 9483e9f
The fix will be out in tomorrow's Insiders build

In your screenshot above, is that a jsx file or javascript file?
If it is a jsx file, then from today's Insiders you won't see it anymore.

[ramya-rao-a]

Please read #28286 (comment)

[Ciantic]

@kumarharsh you can use the "emmet.useNewEmmet": false until this has been solved somehow adequately.

[ramya-rao-a]

Actually, here is the best course of action

• If you have emmet.useNewEmmet set to true
  • Assign a keyboard short cut (other than tab) for Emmet: Expand Abbreviation and use that when you want to use Emmet expansions on given abbreviation
  • If you are on stable (1.13.0 or 1.13.1) set "emmet.showAbbreviationSuggestions": false, "emmet.showExpandedAbbreviation": false to stop the emmet suggestions from showing up if you are mainly a jsx dev
  • If you are on 1.14 Insiders, then the emmet suggestions won't show up for jsx as explained in 1.13.0 | New Emmet expansion suggestions don't honor emmet.syntaxProfiles setting #28286 (comment), so you are good to go
• If you have emmet.useNewEmmet set to false and are on Insiders, you are missing out on cool new features like multi cursor support for all Emmet Actions, emmet abbreviation suggestions in auto-complete for markup and css like languages

[ramya-rao-a]

Note to verifier:

• Set emmet.useNewEmmet to true
• You should be able to use the command Emmet: Expand Abbreviation to expand abbreviations in jsx files
• Emmet suggestions should not show up in the suggestion list in jsx files

[ramya-rao-a]

In VS Code 1.15, emmet suggestions will show up in jsx files.
The noise has been greatly reduced and so will not be an annoyance as before.

If you do find it noisy, set "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

[lawrencekgrant]

@ramya-rao-a Thank you so much.