I recently got this error while working on a Vue 3 project:
TypeScript intellisense is disabled on template. To enable, configure `"jsx": "preserve"` in the `"compilerOptions"` property of tsconfig or jsconfig. To disable this prompt instead, configure `"experimentalDisableTemplateSupport": true` in `"vueCompilerOptions"` property.volar
No need to panic, just disable this Volar message exactly how it says.
In your .tsconfig
file you need to add "jsx": "preserve"
in the compilerOptions
section:
{
"compilerOptions": {
"jsx": "preserve"
}
}
Iβm using Nuxt 3, so my TypeScript config file looks a little different:
{
// https://v3.nuxtjs.org/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"jsx": "preserve"
}
}
If youβre using a jsconfig file instead, it may look closer to this:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"jsx": "preserve"
},
"include": ["src/**/*"]
}
The jsx
option on the .tsconfig
controls how ts transforms and outputs .tsx
files, but this error happens on .vue
files with no tsx
extension.
So changing this option to silence the warning has no real effect on our projects. In Vue we are only using TypeScript for type checking so this option doesnβt affect anything that weβre doing.
This issue is likely happening because of the TypeScript Language Server that VS Code uses to provide the Intellisense feature. Volar hooks into this server, but unfortunately, has no control over it.
Top comments (1)
Haha, I simply disable TS in my projects. πΉ
Maybe I need to get on the train some day. π€