Svelte for VS Code shows error for custom syntax run through svelte-preprocess, Svelte(Kit) compiles it with no errors/warnings

[WillsterJohnson]

Describe the bug
I've implemented a custom syntax in a very basic preprocessor I'm making and it compiles and functions correctly.

However, when viewing the file in VSCode with the Svelte for VS Code extension enabled, I am told there is an error at {#somethingHere}.

Despite the perceived error, and the cascade of *.svelte has no default export to all dependant files, the code compiles without error or warning and functions as intended.

If there's an existing solution to this that doesn't require creating a language support extension of my own, I would love to know.

To Reproduce
Steps to reproduce the behavior:

1. Install a preprocessor such as my one which uses a custom {#somethingHere} syntax
2. Setup svelte-preprocess in svelte.config.js to use the preprocessor (which I'm told is also read by Svelte for VS Code)
3. Create a <template /> using the correct lang attribute, and use the custom {#somethingHere} syntax
4. Refresh VSCode and restart the dev process to confirm it's not a caching quirk
5. Observe the error ts(-1) or js(-1) "Expected if, each, await or key" in the editor, and observe no error/warning from the compiler

Expected behavior
The Svelte for VS Code extension should not show errors that the Svelte compiler does not throw.

In this case "Expected if, each, await or key ts(-1)" should not appear in the editor as it does not appear when running the dev process or when building the SvelteKit site.

Screenshots

Demonstration of the in-editor error (the other 2 errors are due the cascade of errors mentioned above)

System (please complete the following information):

• OS: Linux (PopOS 21.04, Ubuntu based)
• IDE: VSCode v1.61.1 (installed from official site, no package manager weirdness)
• Plugin/Package: Svelte for VSCode (installed from VSCode marketplace)

Additional Context
My preprocessor linked above is available on npm and has a setup guide and a demo of the syntax in question (named "match/apply") in the wiki. Hopefully it shouldn't be a problem to test with my preprocessor.

[dummdidumm]

If you introduce custom syntax, then you are off on your own unfortunately. This is like adding custom syntax to JavaScript files and expect it to not throw errors. #1177 would make this a little easier (because intellisense would likely still work to some extent in other places), and you can turn off TS/JS-diagnostics for Svelte files, but adding support for custom syntax or adding possibilities to enhance the language tools is nothing we consider at the moment.

This is essentially a duplicate of #339 , so I'm closing this.

[WillsterJohnson]

@dummdidumm thanks for getting to this so quickly.

could you give me some pointers as to how to fix this? For example how does Svelte for VS Code understand TypeScript/SASS/etc when I use it in svelte-preprocess, but not my own preprocessor?

I'm not sure what I should be adding/creating for my preprocessor to allow Svelte for VS Code to understand it

[dummdidumm]

At the moment there is nothing you can do except forking the whole project and add support on your own.

TypeScript/SASS/Less are supported because there is explicit support for these languages built in by taking advantage of the TypeScript and HTML/CSS language servers of VS Code. Intellisense of JS/TS inside the markup is added by using the Svelte parser and then transforming the AST into a form that is analyzable for TS/JS. This process has to be synchronous because the TS language service is synchronous, which is why #339 is so hard to implement/on hold. If you would want to add decent intellisene, you would need #339 and your preprocessor would need to generate source maps. Another way would be to enhance both the Svelte parser and the transformation to analyzable JS/TS, which effectively means what I said above - forking this whole project.