Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emmet suggestions are expanding even while writing Javascript in JSX documents #29185

Closed
kumarharsh opened this issue Jun 21, 2017 · 12 comments
Closed
Assignees
Labels
bug Issue identified by VS Code Team member as probable bug emmet Emmet related issues verified Verification succeeded
Milestone

Comments

@kumarharsh
Copy link
Contributor

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.
    image
@freddydumont
Copy link

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.

@ramya-rao-a ramya-rao-a added bug Issue identified by VS Code Team member as probable bug emmet Emmet related issues labels Jun 21, 2017
@ramya-rao-a ramya-rao-a added this to the July 2017 milestone Jun 21, 2017
@Ciantic
Copy link

Ciantic commented Jun 21, 2017

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
Copy link
Contributor

ramya-rao-a commented Jun 22, 2017

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
Copy link
Contributor Author

@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
Copy link
Contributor Author

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.

image

@ramya-rao-a
Copy link
Contributor

ramya-rao-a commented Jun 22, 2017

@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
Copy link
Contributor

Please read #28286 (comment)

@Ciantic
Copy link

Ciantic commented Jun 25, 2017

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

@ramya-rao-a
Copy link
Contributor

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
Copy link
Contributor

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 ramya-rao-a modified the milestones: June 2017, July 2017 Jun 26, 2017
@roblourens roblourens added the verified Verification succeeded label Jun 30, 2017
@ramya-rao-a
Copy link
Contributor

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
Copy link

@ramya-rao-a Thank you so much.

@vscodebot vscodebot bot locked and limited conversation to collaborators Nov 17, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue identified by VS Code Team member as probable bug emmet Emmet related issues verified Verification succeeded
Projects
None yet
Development

No branches or pull requests

6 participants