Setting to Disable Emmet in CSS-in-JS

[karlhorky]

Describe the bug (including copyable syntax)

56 and #57 introduced Emmet into this extension, which unfortunately is not possible to turn off without disabling other things too.

Even with the settings below (which should work according to the VS Code docs)

  "emmet.showExpandedAbbreviation": "never",

The only way to disable this is with the following settings, which also disables other suggestions:

  "editor.quickSuggestions": {
    "other": false
  }

Video

https://user-images.githubusercontent.com/1935696/141503501-c136cba7-5f35-461b-8a67-3dd432339332.mp4

This especially causes issues if using characters like a comma:

https://user-images.githubusercontent.com/1935696/141528952-9e2d7e3f-1b6b-4898-b487-2e690683a044.mp4

To Reproduce

Hit enter at the end of the display: flex; line below (typescriptreact syntax) and type h1 - it will suggest height: 1px

const sidebarContainer = css`
  display: flex;
`;

Expected behavior

If emmet.showExpandedAbbreviation is set to false, this should be respected.

According to the upstream typescript-styled-plugin docs it should be.

Build environment (please complete the following information):

• OS: macOS Monterey 12.0.1
• VSCode Version: 1.62.1
• Extension Version 1.6.6

[jasonwilliams]

This should be an easy fix if you’re up for having a go https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md#setting-up-for-development--debugging

I won’t have much time to look into it sadly.

[karlhorky]

I would have time to do a simple fix if guided to where the code is that I need to update, but won't have time currently to learn the codebase and set it up on my machine.

Can you guide me?

[jasonwilliams]

@karlhorky everything you need to know about set up is already written here: https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md#setting-up-for-development--debugging

please let me know if that isn’t clear or you’re stuck.

Secondly, your issue is in the styled plugin not in this extension (this extension only does syntax highlighting). Once setup above you will have both projects running, you can try seeing what the disable emmet actually does. Maybe it’s because we updated emmet-helper and it stopped working, or maybe it never did anything. You should be able to tinker to see what the issue is.

emmet is used here: https://github.com/microsoft/typescript-styled-plugin/blob/main/src/_language-service.ts#L227 maybe try setting breakpoints there and see if that is the issue, maybe it needs an if statement around it to check the config field for emmet.showExpandedAbbreviation

The more I look at https://github.com/microsoft/typescript-styled-plugin the more I think it never respected this config option at all, so the change would be for it to check

[karlhorky]

Ok, thanks for the hints. Probably won't get around to setting this up and debugging anytime soon.

But since you mention it could be an upstream issue, I'll consider opening an issue there.

[karlhorky]

Reported in upstream at https://github.com/microsoft/typescript-styled-plugin/issues/154

[jasonwilliams]

The Deno typescript plugin is able to get access to the editor config so it must be possible: https://github.com/denoland/vscode_deno/blob/main/typescript-deno-plugin/src/index.ts#L24-L26

Hopefully someone has time to work a similar solution into the typescript styled plugin

[karlhorky]

Reported in the new upstream at https://github.com/styled-components/typescript-styled-plugin/issues/10