halfnelson/svelte-type-checker

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

mvolkmann opened this issue · 12 comments

mvolkmann commented

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()
};
  1. Configure it in rollup.config.js like this:
...
import sveltePreprocess from 'svelte-preprocess';
...
export default {
...
  plugins: [
    svelte({
      ...
      preprocess: sveltePreprocess()
    }),
    ...
  ],
  ...
};
...
  1. Restart VS Code

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

mvolkmann commented

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 commented

Does this still happen?

mvolkmann commented

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 commented
mvolkmann commented

I don't see a plugin name. A screenshot is attached.
Screen Shot 2020-05-04 at 6 54 18 PM

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

halfnelson commented
mvolkmann commented

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 commented
mvolkmann commented

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 commented
mvolkmann commented

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.

rondonjon commented

I don't see a plugin name. A screenshot is attached.
Screen Shot 2020-05-04 at 6 54 18 PM

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?

  • 👍1