Trying to utilize Typescript with Vue 3 in VSCode has been a bit of a challenge for me.
Initially, I relied on the Vetur plugin for error highlighting, but it was a bit too eager and not recommended by official Vue 3 documentation.
https://i.sstatic.net/yJvv8m.png
Following the guidance from the Vue 3 docs, I disabled Vetur and switched to Volar...
However, now I'm facing the issue where no errors are being displayed, even when there are obvious mistakes in my code.
https://i.sstatic.net/xsCqPm.png
I'm wondering what step I might be overlooking?
The structure of my tsconfig.json file is identical to what is generated with the npm create vue@3 command:
{
"files": [],
"references": [
{
"path": "./tsconfig.config.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
Furthermore, here's the content of the tsconfig.app.json file, again matching what is produced with the npm create vue@3 command.
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Listing my enabled extensions in VSCode, I have also tried "takeover mode" as per the recommendations in the documentation. However, the typescript errors still refuse to highlight properly even without takeover mode active.
https://i.sstatic.net/52Ft0m.png https://i.sstatic.net/2VtG3m.png
Could there be a configuration setting that I have overlooked?