Add "jsx": "preserve" in jsconfig.json for vue3 javascript project

[Gu-Miao]

What problem does this feature solve?

I use vscode and volar, when I create a new vue project, I find a warning from <template> tag by valor:

TypeScript intellisense is disabled on template, you can config `"jsx": "preserve"` in tsconfig or jsconfig to enable it, or config `vueCompilerOptions.experimentalDisableTemplateSupport` to disable this prompt.

If you do nothing with it or just set vueCompilerOptions.experimentalDisableTemplateSupport in jsconfig.json, you will find that your intelligent completion won't work anymore in template part. So I add "jsx": "preserve", and everything is fun again.

What does the proposed API look like?

Add "jsx": "preserve" to jsconfig.json by defualt when user create a vue3 javascript project.

[Naveenkumar153]

using this code add your jsconfig.json file. this code solve my problem

"vueCompilerOptions": {
"experimentalDisableTemplateSupport": true,
"jsx": "preserve"
}

[Gu-Miao]

@Naveenkumar153 Yes, I know. That's the reason why I suggested we should add this option in template by default if when creating a vue3 project.

[egdavid]

For TypeScript projects, adding:

"vueCompilerOptions": {
    "experimentalDisableTemplateSupport": true
}

in tsconfig.json solves the problem.

[AntoineGGG]

I only add line below to my compilerOptions part in tsconfig.json to solve the problem, but yes as the author said, it'll be nice to implement it directly:

"jsx":"preserve"

[QiQiBiBi]

Agree.

I only add line below to my compilerOptions part in tsconfig.json to solve the problem, but yes as the author said, it'll be nice to implement it directly:

"jsx":"preserve"

[AaronBeaudoin]

This issue is important because otherwise the Vue 3 project arrives "incomplete" for VS Code users (which I would suspect is the majority) and requires additional configuration to get up and running properly.

It seems like it should be a relatively small change to implement.

[JayCph]

But what does the setting actually do other, what's the technical explanation behind it?

[AaronBeaudoin]

All I know is that it enables type checking in SFC templates. See vuejs/language-tools#1153.

For more details ask the author johnsoncodehk.