Emmet auto completing HTML tags instead of CSS

[hazem3500]

How can I stop emmet from putting tags into my styled components
I have put this into my settings.json

"emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
  "files.associations": {
      "*.js": "javascriptreact"
  }

[jt3k]

bump-up!

[derek-watson14]

bump again

[raihan004]

bump up again

[jt3k]

bumped-up x2

[steffenu]

yea

[jasonwilliams]

I cannot reproduce this, i get the css options first and emmet only if nothing else matches.
Could you try the latest version of this extension and re-open if it's still a problem?

[chuckhendo]

Can confirm this is still occurring on both latest version of Code and Insiders, using the latest version of of vscode-styled-components. It only happens if you are working in a file with a JSX/TSX extension or have the language mode set to JavaScript React or TypeScript React.

[jasonwilliams]

@chuckhendo i have the suggestions but they’re below all the css ones so it’s not much of an issue for me. Do you see something different?

[chuckhendo]

@jasonwilliams anything with the colon syntax seems to cause it. For example, m:10 or d:f. Interestingly, df also causes issues. You can confirm that the emmet behavior is different if you run Emmet: Expand abbreviation or try the same thing from a CSS file.

[jt3k]

the problem is still relevant. Are there any plans to fix these errors?

[jasonwilliams]

@jt3k we're not sure how possible it is to stop emmet placing tags there so that's why nothing has happened yet.
We're always up for people contributing who want to try and fix this!
https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md

[chuckhendo]

@jasonwilliams I'm going to try to find some time to take a look at it. Can this issue be reopened?

[AJTJ]

Edit: I thought this was an issue, but I had a semicolon by accident...

[NayamAmarshe]

Same problem here. Emmet abbreviation take primary precedence.

[jasonwilliams]

👋 @jrieken do you know how we can override emmet or decrease it’s priority in this situation?

[jrieken]

@jrieken do you know how we can override emmet or decrease it’s priority in this situation?

For us all extensions are equal and therefore one extension cannot "mute" another extension. To me it looks like an emmet bug, it should not suggest <main> inside a CSS block, right?

[jrieken]

/cc @rzhao271

[jt3k]

how long should we wait?

• write in the readme that the tool is broken.
• or write instructions on how to fix it by the user.
• Or fix it at last.

It cannot be used.
When I write tal then instead of the expected text-align: left;
appears text-align-last: left;
Even the items in the contextual list are confused here.

[jasonwilliams]

@jt3k please stop spamming this thread asking when is it going to be fixed. People are looking into it, your comments aren’t helping.

If you’re willing to contribute we’ll accept PRs to update the readme

[jasonwilliams]

I can't reproduce the original issue, i've set the same settings but i still get CSS precedence over Emmet.
I'm not sure what could be causing some to have strong emmet priority.

[rzhao271]

@jt3k For the tal issue, either file an issue on the Emmet repo https://github.com/emmetio/emmet/ or use ta:l instead to distinguish the abbreviations.
For the JSX issue, see microsoft/vscode#51537
I also filed an issue upstream; hopefully I can get to it next week.

[NayamAmarshe]

Here's a small fix, add this in your settings.json:

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "bottom",

[kandarp43]

Here's a small fix, add this in your settings.json:

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "bottom",

works perfect

[jasonwilliams]

Can someone confirm this has fixed the issue microsoft/vscode#119736 if so I’ll close this

[jt3k]

Can someone confirm this has fixed the issue microsoft/vscode#119736 if so I’ll close this

at the moment the problem is still relevant.
the problem you quoted relates to the styles inside the <style> tag. And we are talking about styled-components here.

[jt3k]

Here's a small fix, add this in your settings.json:

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "bottom",

snippets now work strangely. for example when I write log I expect the console.log snippet to be at the top of the list. but he's at the bottom.

[NayamAmarshe]

Here's a small fix, add this in your settings.json:

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "bottom",

snippets now work strangely. for example when I write log I expect the console.log snippet to be at the top of the list. but he's at the bottom.

Yes, this is the only downside to this solution. Snippets appear at the bottom because ultimately, this is not a fix but just a simple workaround. This is why we still need a solid fix for this problem.

[jasonwilliams]

@NayamAmarshe @jt3k are you able to set up a small repo to use as a test case for this? I can’t reproduce this issue so it would help if we’re all looking at the same thing. This would really help push this forward

[rzhao271]

I have commented on the upstream issue with repro steps and the root cause: microsoft/vscode#119736 (comment).
This bug is a subproblem of microsoft/vscode#51537.

[jasonwilliams]

Thanks @rzhao271 that was useful.
I've updated the troubleshooting section of our README and that links to the upstream issues.

I think it's now safe to close this issue and instead point people in the right direction. Feel free to continue commenting if there's anything useful we should know.

[JoshuaCWebDeveloper]

After trying all the suggestions in this thread, none of them worked, but I realized that the auto-completion to HTML only happened when the suggestion box was shown (press Esc before Tab and the completion would work fine). Here is the config I needed in order to get Emmet to expand m:10 to margin: 10px; on Tab:

"emmet.triggerExpansionOnTab": true,
"emmet.showExpandedAbbreviation": "never"

[kalal-rahul]

I was facing the same issue after my VS Code automatically upgraded to March 2023 (version 1.77)

Just to confirm that the issue was with the latest version, I downgraded my VS Code version to the below one and the
issue DID NOT appear there.

Version: 1.75.1 (system setup)
Commit: 441438abd1ac652551dbe4d408dfcec8a499b8bf
Date: 2023-02-08T21:32:34.589Z
Electron: 19.1.9
Chromium: 102.0.5005.194
Node.js: 16.14.2
V8: 10.2.154.23-electron.0
OS: Windows_NT x64 10.0.19044
Sandboxed: No

So seems like the this extension has some bugs with the latest VS Code version March 2023 (version 1.77)

[jasonwilliams]

@kalal-rahul your issue is probably #387