Better autosuggest when using the styled jsx factory

[SlexAxton]

Description

If I use css or styled as a function in my code, I get a suggestion to import the correct module.

If I use <styled to start a block in jsx, I don't get any suggestion.

I'd love if we could somehow hint to typescript/vscode/something that this is a valid non-intrinsic component or something so it suggests the import?

Problem Statement/Justification

This would improve DX a good bit for my team!

Proposed Solution or API

Add some hint or different export to allow the suggestion in jsx.

Alternatives

No response

Additional Information

css auto-suggests the wrong import first, but the right one is at least there.

styled works if I use it in a code block:

But styled does not work if I use it in jsx (in fact, if I type <styled. (with the dot) then it changes the entire thing to a totally different suggested keyword)

[segunadebayo]

That's a good point. I'd love such tooling as well.

I don't know how to get this natively in the editor. There might be some config in VSCode to configure the JSX autosuggest triggers.

[SlexAxton]

Unfortunately vscode has very little by way of letting you tweak autosuggestions. I think the ultimate solution is probably a typescript one. I'm curious if other namespaced jsx factory type libraries succeeds here. I'll check some out sometime.