2

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:

Visual Studio Code: cannot find module

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

enter image description here

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

enter image description here

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?

Improve this question

1 Answer 1

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.