Auto import (and import fix) for React components

[jabacchetta]

There are a few issues with importing React components:

1. Export not detected

Whether or not it's detected appears to be a random occurrence from what I can tell. If this happens, opening the file first will fix the issue.

2. Can't auto-import a nested component

It does not appear in the suggestion list. This appears to be an expected result, as described here, but I wonder if that should be changed/fixed. As shown below in my workflow, the limitation kills productivity.

Note that yes, you can first type in the opening bracket, which will bring up the suggestion, and then you can select the suggestion, and then you can type in the closing bracket and let VSCode's auto closing tag feature kick in. However, that seems like a lot of unnecessary steps.

Optimally this would work more like an Emmet suggestion, as described here. We would be able to start typing in our component name immediately and then simply select the suggestion.

3. Import fix requires checkJs

Maybe not even a fix, but I'm curious, why does auto import work without any extra settings, yet, in order to get the import fix to show up in code actions, the following setting is required: "javascript.implicitProjectConfig.checkJs": true?

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Emmet expansion with React components (#66107)

[jabacchetta]

Regarding point 2, I loaded up WebStorm today to check out what I thought VSCode might be missing, because I remember enjoying the React component experience there.

As it turns out, they actually require the opening bracket as well before offering suggestions. So I'm not sure if this can be improved or not.

What they did do better, though was:

• As soon as the suggestion was selected, the entire tag was completed (no need to type in the closing bracket to the opening tag).
• Required props were automatically inserted, with tab through for filling out each one
• IntelliSense available for component props
• Commands for collapse/expand tag (extension here, but does not work properly)
• Suggestions for the components themselves were much more accurate, giving priority to the components (shown in screenshots below).

VSCode Suggestions

WebStorm Suggestions

I realize at this point I'm listing a number of different features revolving around the React experience. I'd be glad to open separate issues after hearing thoughts.

[mjbvz]

Can you please open separate issues for these points. It's difficult to track all of this in a single issue and some are questions about how the behavior. Better to split them up so that the conversation is easier to follow

Please include example code (as text) or a small example project for any bugs