VS Code "Type annotations can only be used in TypeScript files"

[Mark Volkmann]

Do you use VS Code? If so, have you found a way to stop it from complaining about type annotations in .svelte files?

I thought what I needed to do was the following, but this didn't work.

1. npm install -D svelte-preprocess

2. Create a svelte.config.js file at the root of the project containing this:

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess()
};

3. Configure it in rollup.config.js like this:

...
import sveltePreprocess from 'svelte-preprocess';
...
export default {
...
  plugins: [
    svelte({
      ...
      preprocess: sveltePreprocess()
    }),
    ...
  ],
  ...
};
...

4. Restart VS Code

But after all this VS Code still complains about type annotations in .svelte files.

[Mark Volkmann]

Maybe the answer is that I need to use the VS Code "Svelte Type Checker" extension. I tried that, but I still get the same errors on all my type annotations. See halfnelson/svelte-type-checker-vscode#5.

[halfnelson]

Does this still happen?

[Mark Volkmann]

Yes. I just walked through all the steps again with a new Svelte project. VS Code puts a red squiggly below every type annotation. Hovering over them gives a popup that says "Type annotations can only be used in TypeScript files."

[halfnelson]

When you hover over it, as well as the error it should say which plugin was the source of the error on the right side of the hover window. What does it say for you?

…

On Mon, 4 May 2020, 11:39 pm Mark Volkmann, ***@***.***> wrote: Yes. I just walked through all the steps again with a new Svelte project. VS Code puts a red squiggly below every type annotation. Hovering over them gives a popup that says "Type annotations can only be used in TypeScript files." — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEGS5E5TYATWU2WHYIKNB3RP3AQLANCNFSM4MPANZJA> .

[Mark Volkmann]

I don't see a plugin name. A screenshot is attached.

I'm all in for helping resolve this, so let me know if there is anything else you want to me to try.

[halfnelson]

If it were coming from type checker it would say svelte-type-checker to the right. The svelte plugin puts a "ts" to the right. So my guess is that another plugin is doing this. Does the language in the status bar say Svelte or Html? You can try disabling all extensions except for svelte beta and type checker. Then enable them one by one until the error comes back

…

On Tue, 5 May 2020, 9:56 am Mark Volkmann, ***@***.***> wrote: I don't see a plugin name. A screenshot is attached. [image: Screen Shot 2020-05-04 at 6 54 18 PM] <https://user-images.githubusercontent.com/79312/81024365-d28d2680-8e38-11ea-859e-36d0a9486de3.png> I'm all in for helping resolve this, so let me know if there is anything else you want to me to try. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEGS5HY4QJSEPZYLJFMQJTRP5I2RANCNFSM4MPANZJA> .

[Mark Volkmann]

When viewing a .svelte file the language in the status bar is "HTML". I disabled all extensions except Svelte Beta and Svelte Type Checker. Then I reloaded the window. Nothing changed. I still get "Type annotations can only be used in TypeScript files."

[halfnelson]

I think your problem is that the language is detected as html. It needs to be detected as svelte. This is probably due to a file extension mapping in vscode that points .svelte files to HTML. You would have added this extension mapping in the past

…

On Tue, 5 May 2020, 11:42 pm Mark Volkmann, ***@***.***> wrote: When viewing a .svelte file the language in the status bar is "HTML". I disabled all extensions except Svelte Beta and Svelte Type Checker. Then I reloaded the window. Nothing changed. I still get "Type annotations can only be used in TypeScript files." — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEGS5AYPWMNWWQ77UPTDW3RQAJU3ANCNFSM4MPANZJA> .

[Mark Volkmann]

You are correct that if I remove this, the warnings about type annotations go away.

  "files.associations": {
    "*.svelte": "html"
  }

But then I get new problems like the inability to run Prettier on .svelte files on save. But this isn't your issue. It seems I have to pick my poison and I'd rather have format on save working. The perfect VS Code setup for Svelte still eludes me.

[halfnelson]

I thought the svelte plugin has a formatter Not sure when it runs

…

On Wed, 6 May 2020, 8:11 am Mark Volkmann, ***@***.***> wrote: You are correct that if I remove this, the warnings about type annotations go away. "files.associations": { "*.svelte": "html" } But then I get new problems like the inability to run Prettier on .svelte files on save. But this isn't your issue. It seems I have to pick my poison and I'd rather have format on save working. The perfect VS Code setup for Svelte still eludes me. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEGS5EWYEUSXUTXSDCLFBDRQCFH5ANCNFSM4MPANZJA> .

[Mark Volkmann]

The svelte plugin has never worked for me and it hasn't been updated since October 7, 2019. That's why I went with suggestions to mark .svelte files as HTML.

[Ron Don Jon]

I don't see a plugin name. A screenshot is attached.

I'm all in for helping resolve this, so let me know if there is anything else you want to me to try.

Have you tried adding language="typescript" to your <script> tag?