CODEWITHSUNDEEP
visual-studio-codevuejs3vue-tsc
Voicu Seiche
Voicu Seiche

Reputation: 70

VSCode show errors in editor from vue-tsc

I have a Vue3 app and using VSCode. Using the npm run type-check command will show me the vue-tsc errors. I'm trying to find a way to show these errors in VSCode, like eslint does.

Does anybody know if this possible?

I have the lastest versions of typescript, vue and vue-tsc npm packages, as well as VSCode and the Vue - Official extension.

Upvotes: 0

Views: 435

Answers (2)

Voicu Seiche
Voicu Seiche

Reputation: 70

The issue was that the rootDir and baseUrl values were not configured correctly in the tsconfig.app.json file.

After changing these settings to the correct values, I get the errors and warnings in VSCode from Volar.

Upvotes: 0

kissu
kissu

Reputation: 46676

Go to this part of the documentation, and give a try to the following snippet

<script setup lang="ts">
import { ref } from 'vue'
const count = ref('1')
</script>

<template>
  {{ count.toFixed(2) }}
</template>

With the official Vue VScode extension (using Volar behind the scenes) + brand new project generated with the Vue CLI, it should work well (works even without asking for TS during the project creation on my side).

enter image description here

Feel free to share a Github repo if it doesn't.

Upvotes: 0

Related Questions