False positive errors when using custom extensions (configured aliases in tsconfig `paths` not respected)

[WillsterJohnson]

Describe the bug

I'm using a custom preprocessor to parse text content as markdown (not mdsvex, though I'm using some of their packages). Note that the issue persists even when I completely remove my preprocessor.

I've configured the file extension .svmd in my svelte.config.js, as well as adding "../src/**/*.svmd" to my tsconfig.

I've also set "files.associations" : { "*.svmd": "svelte" } in vscode.

In one of my .svmd files, I import some things from $lib. At runtime, there's no issue, and these components work as expected.

This issue happens with any file extension, not just .svmd.

Reproduction

The .svmd files are doing nothing - they are simply svelte files with a different extension. They're included into typescript, and are parsed the same way as .svelte files.

$ pnpx sv create # minimal, typescript

// svelte.config.js
import adapter from '@sveltejs/adapter-auto'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

const config = /** @satisfies {import('@sveltejs/kit').Config}*/ ({
  extensions: ['.svelte', '.svmd'],
  preprocess: [
    vitePreprocess({ script: true, style: true }),
  ],
  kit: {
    adapter: adapter(),
    typescript: {
      config(tsconfig) {
        for (const ext of config.extensions) tsconfig.include.push(`../src/**/*${ext}`)
      },
    },
  },
})

export default config

// .vscode/settings.json
{
  "files.associations" : { "*.svmd": "svelte" }
}

<!-- src/lib/Thing.svelte -->
<script lang="ts">
  let { prop }: { prop: string } = $props()
</script>

<h1>{prop}</h1>

<!-- src/routes/+page.svmd -->
<script lang="ts">
  import Thing from '$lib/Thing.svelte';
</script>

<Thing prop="prop" />

Expected behaviour

There should be no errors in vscode, as proven by svelte-check;

$ pnpm check

> stuff@0.0.1 check /your/computer
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: /your/computer
Getting Svelte diagnostics...

====================================
svelte-check found 0 errors and 0 warnings

Instead, it seems any aliases configured in tsconfig by svelte (eg, $lib) are reported as not existing by the vscode extension when accessed in a .svmd file (or the issue is caused by the typescript server itself, which seems like a bigger issue).

System Info

• OS: Linux (PopOS)
• IDE: VSCode 1.99.3

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

Example of vscode and svelte-check disagreeing;

The same file, renamed to .svelte;

[jasonlyu123]

This is because your custom file extension won't match the tsconfig.json include pattern. files.associations doesn't change how files are matched, and your patch in svelte.config.js won't either. The include pattern matching only works with "known" file extensions. I'll assume the reason you went with a custom file extension is that you need a way to differentiate files that need pre-processing. Maybe you can try "A.md.svelte" or "A_md.svelte"?

[WillsterJohnson]

I'll see if that extension prefix idea does what I need.

How do you add a 'known' file extension? Does it just need a module '*.svmd'?

[jasonlyu123]

Meaning It's hard-coded and it's not something you can configure.

[WillsterJohnson]

ah, damn.

Using a custom prefix to the .svelte extension works. Thank you.