Emmet auto completing HTML tags instead of CSS

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"
  }

bump-up!

bump again

bump up again

bumped-up x2

yea

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?

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.

@chuckhendo

@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?

@jasonwilliams

@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.

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

@jt3k

@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

@jasonwilliams

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

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

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

Here's a small fix, add this in your settings.json:
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "bottom",

works perfect

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

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.

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.

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.

@NayamAmarshe

@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

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.

@rzhao271

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.

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"

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)

@kalal-rahul

@kalal-rahul your issue is probably #387

Navigation Menu

Repository navigation

Emmet auto completing HTML tags instead of CSS #191

14 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Emmet auto completing HTML tags instead of CSS #191

Description

Activity

jt3k commented on Jan 14, 2020

derek-watson14 commented on Feb 2, 2020

raihan004 commented on May 11, 2020

jt3k commented on May 17, 2020

steffenu commented on Jun 15, 2020

jt3k commented on Jul 7, 2020

jasonwilliams commented on Oct 21, 2020

chuckhendo commented on Nov 6, 2020

jasonwilliams commented on Nov 6, 2020

chuckhendo commented on Nov 6, 2020

jt3k commented on Nov 16, 2020

jasonwilliams commented on Nov 16, 2020

chuckhendo commented on Nov 24, 2020

14 remaining items

NayamAmarshe commented on Mar 25, 2021

kandarp43 commented on May 12, 2021

jasonwilliams commented on May 12, 2021

jt3k commented on May 13, 2021

jt3k commented on May 13, 2021

NayamAmarshe commented on May 14, 2021

jasonwilliams commented on May 14, 2021

rzhao271 commented on May 14, 2021

jasonwilliams commented on Aug 10, 2021

JoshuaCWebDeveloper commented on Jan 6, 2022

kalal-rahul commented on Apr 1, 2023

jasonwilliams commented on Apr 1, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions