Visual Studio Code: Initial VueJS setup cannot find module "@/.."

Question

As you know @ is a placeholder for /src and the application compiles and runs properly if I use it so. But my VSCode thinks the module is not there and show me an error message:

Question 1: How can I teach VSCode how to find the modules?

A similar situation is the following:

export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}

There are two errors in the IDE (while the application compiles and runs properly):

1) !: is red underlined -> Expression expected

2) string is red underlined -> Member 'string' implicitly has an 'any' type.

But these are not really errors, that's the normal syntax and VSCode cannot deal with it. Vetur Extension (Vue Tooling for VSCode) is already installed.

Question 2: How can I deal with Vue + TypeScript in VSCode at all? What (all) do I have to consider?

Answer 1

Importing *.svg

VS Code doesn't know how to import an svg file on its own. To fix this, add a .d.ts file to the root of your project, containing:

declare module '*.svg' {
  const content: any;
  export default content;
}

I found that adding this declaration to src/shims.d.ts does not work. It only worked when creating a .d.ts file at the project root (e.g., <root>/index.d.ts).

Expression expected error

That's from Vetur 0.11.7, which uses an older TypeScript version that doesn't support definite assignment assertions, introduced in TypeScript 2.7. (vuejs/vetur Issue #723)

Vetur 0.11.8 Preview fixes the issue by updating to the newer version of TypeScript, but this is not yet released, so you'll have to install the VSIX manually. The simplest method IMO is to use the command drop-down from VS Code's Extensions view to install the downloaded vetur-0.11.8.vsix. The fix is available in Vetur 0.12.1, which is installable from VS Code's Extensions view.