Quick fix component imports

[techniq]

Describe the bug
Currently if you have a component missing it's import, there is no way to add it via Quick Fix (Command + ., light bulb, or hover => Quick Fix...)

The import suggestion does show up during auto complete suggestion (i.e. while you have a partial bit of the component name typed)

This doesn't work great when copy/pasting components between files, or if you miss the autocomplete initially.

A current workaround I use is to remove the last character of the component name so the autocomplete suggestion kicks in. Not optimal, and a little slower especially when you bring in a big block with many references.

To Reproduce
Add a component without an import and attempt to resolve using one of the Quick Fix methods.

Expected behavior
The ability to add an import via Quick Fix (similarly to autocomplete's "auto import ...").

System:

• OS: MacOS
• IDE: VSCode
• Plugin/Package: Svelte for VSCode

[jasonlyu123]

I did look into this before. This is a limitation of our current typescript language service setup. There are two problems here, one is that we use a special svelte.JSX namespace under the hood, which typescript thinks needs to exist in the module scope to allow component import quick-fix. And the other, which is more important, we suffix the generated component default export so that it doesn't conflict with a user-defined symbol. And typescript's import quick-fix require the symbol to be the same as where it's defined.

With that said there's a workaround for this. You can leverage the auto-import completion as a quick fix. Just put your cursor behind the component name and manually trigger the completion with ctrl+space or ctrl+I(^+space or command+I in mac). Maybe we can somehow find a way to programmatically does this to provide a quick fix in the future, until then you can use this kind of weird workaround.

[techniq]

@jasonlyu123 Thanks, that's a little quicker workaround. Particularly helpful when you need to add more than 1 import.

One thing I noticed is you want the cursor after the component name (and not before or anywhere within) as otherwise it will duplicate that much of the component name remaining

start of component name (full component name duplicated)

middle of component name (remaining component name duplicated)

end of component name (no duplication)

It also adds a good bit of extra whitespace in the <script> tag when it import, but nothing prettier can't cleanup :)

Thanks again for the additional workaround, and hopefully we can come up with a Quick Fix solution at some point.

[techniq]

@jasonlyu123 Thanks for the fix. Just had a quick second to test, and works! I appreciate it!