Emotion: VS Code syntax highlighting

[sandervspl]

I would like to have syntax highlighting for my styled in VS Code, but I can't find anything in the docs or on Google. Is there anything similar to https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components for Emotion?

[lee-reinhardt]

That extension works for emotion as well.

[markogresak]

Duplicate of #447.

[jasondonnette]

I found that I had a conflicting plugin (for me it was vscode-styled-jsx) that broke certain syntax highlighting.

Works great after disabling that plugin!

[FezVrasta]

Closing as dupe of #447 as mentioned by @markogresak (thanks!).

AFAIK, the recent styled-components versions introduced support for the css property so I think they will add (or added already) support for syntax highlighting for this property as well.

[aleclarson]

The vscode-styled-components package will not support the entire Emotion API.

https://github.com/styled-components/vscode-styled-components/issues/107#issuecomment-413512135

Time for a fork?

[Andarist]

@aleclarson do you have any example on when this vscode plugin fails with current emotion APIs?

[aleclarson]

injectGlobal

[Andarist]

Hm, that's weird - injectGlobal is also part of their API: https://styled-components.com/docs/api#deprecated-injectglobal . It might be deprecated now - but given not everyone had a chance to migrate to the newest version of SC etc it should be supported for the extended time period. They still even have such fixture:
https://github.com/styled-components/vscode-styled-components/blob/9fc89daf82f6dcf7f7d608d7801c5b20ef65b918/test/colorize-fixtures/injectGlobal.js
with accompanying snapshot:
https://github.com/styled-components/vscode-styled-components/blob/4320c223666ea835e8c63c85573c2704f550b7df/test/colorize-results/injectGlobal_js.json

Maybe there is some bug somewhere? 🤔

[aleclarson]

@Andarist This syntax also has problems:

[Andarist]

Hm, this code is also not emotion-specific. Could you check if that VScode extension handles this if you use styled-components? If not then it might be worth reporting a bug there. If yes then I would have to dig into this and potentially fork that plugin (but if we could avoid this I would prefer not doing this).

[karlhorky]

I found that I had a conflicting plugin (for me it was vscode-styled-jsx) that broke certain syntax highlighting.

Confirmed that vscode-styled-jsx breaks vscode-styled-components with Emotion and styled-components code.

This only started happening for me on the May 2020 version of VS Code (version 1.46).

See also:

• https://github.com/iFwu/vscode-styled-jsx/issues/4#issuecomment-646619998
• https://github.com/styled-components/vscode-styled-components/issues/208#issuecomment-646606763