Autocomplete doesn't work when importing assets (non-js/ts/svelte files)

[aradalvand]

Describe the bug

I'm not really sure which repo I should post this issue in, so if this isn't the right place, please let me know.

In SvelteKit, you can of course import assets, stuff like .png, .jpg, or .svg files (there's an example of that in the official FAQ), and depending on the configuration, you could get the path to the file, or its contents (for example if you're using something like sveltekit-svg, by importing an SVG file you could get its content as a string).

This all works great, but the one issue that's been bothering me is that when you want to import, say an SVG file, VSCode's autocomplete doesn't show any of such files in its list of suggestions, while it does so for Svelte files or TS/JS files.

For instance, assuming you have a directory structure like so:

- src
    - lib
        - assets
            - logo.svg
            - avatar.png
            - someTypeScriptFile.ts
        - components
            - MyComp.svelte
    - routes
        - ...

When you want to import say the logo.svg file from the assets folder, this is what VSCode's list of suggestions looks like:

As you can see none of the .png, .svg, etc. files appear in the list. Why is that? Isn't there any way to make this work?

In addition to that, when you reference a non-existent file, you don't get any red squiggly or anything, which isn't nice:

Note that I'm also using TypeScript in the project.

Thanks in advance.

Severity

annoyance

[dummdidumm]

It does not provide autocompletion because these completions come from the TypeScript language service which only deals with TS/JS files. You could try to use https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

[aradalvand]

@dummdidumm Thanks. I just gave it a try but it seems like this extension doesn't support non-TS/JS files in import statements either. See this issue.

[aradalvand]

@deadcoder0904 Update: As per this comment by the creator of the extension, it does actually work in .ts files, so when I do an import in a .ts file:

It shows all files as expected.

But when it's done in a Svelte file...

So I guess this must have something to do with Svelte, am I right?

[aradalvand]

@dummdidumm I also just tried this extension which was built exactly for purpose of showing files of all extensions in import statements. But the same problem is there, namely that it works as expected in .ts files, but not in .svelte files, as the screenshots in my previous comments show.

So, I'm guessing this is a Svelte issue.

[dummdidumm]

The problem likely is that these extensions are built for use within .ts files, not .svelte files, so their parser or whatever they use does not understand Svelte code. So it's an issue with these extensions - or a deliberate decision by them to not support all kinds of file types. If these extensions don't want to support for Svelte files, we could look into adding it to the Svelte extension itself, but I'm very hesitant to add something like this right now. It feels like a rather niche use case and I'm not sure how much weight / maintenance burden this would add.

[aradalvand]

@dummdidumm

we could look into adding it to the Svelte extension itself

Intuitively, this actually makes more sense to me.

but I'm very hesitant to add something like this right now. It feels like a rather niche use case and I'm not sure how much weight / maintenance burden this would add.

But it's not really that niche, is it? I mean, with the advent of SvelteKit, importing assets like image files is going to be a rather common thing to do. Isn't that right? I'm not sure about the maintenance burden as I'm not familiar with the inner-workings of Svelte language tools, but I think especially when newcomers try something like SvelteKit for the first time, things like this stand out, and are sometimes common sources of confusion.

[aradalvand]

@dummdidumm Apparently, both of those extensions DO in fact work even in .svelte files by default, it's just that once you install the Svelte extension, it begins interfering with them, take a look at this comment and the two above it.

[Nukiloco]

Will there be a fix to this? I love the Path Intellisense extension but sadly the Svelte extension doesn't work with it.

Edit: To make Path Intellisense extension work with Svelte extension, set svelte.enable-ts-plugin to false as svelte.enable-ts-plugin is used for svelte intellisense.

[aradalvand]

Was this actually fixed?

[jasonlyu123]

In TypeScript 5.0, any files with an "*.extension" ambient type definition will have path completion. But do keep in mind there is https://github.com/sveltejs/language-tools/issues/1859. So path completion might not work in SvelteKit $lib alias.