Vue에서 TypeScript intellisense 템플릿 오류를 수정하는 방법

최근에 Vue 3 프로젝트에서 작업하는 동안 이 오류가 발생했습니다.

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

당황할 필요 없이 이 Volar 메시지exactly how it says를 비활성화하면 됩니다.
.tsconfig 파일에서 "jsx": "preserve" 섹션에 compilerOptions를 추가해야 합니다.

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

Nuxt 3를 사용하고 있으므로 TypeScript 구성 파일이 약간 다르게 보입니다.

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "jsx": "preserve"
  }
}

대신 jsconfig 파일을 사용하는 경우 다음과 같이 보일 수 있습니다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "jsx": "preserve"
  },
  "include": ["src/**/*"]
}

jsx controls how ts transforms and outputs .tsconfig 파일의 .tsx 옵션이지만 이 오류는 .vue 확장자가 없는 tsx 파일에서 발생합니다.

따라서 이 옵션을 변경하여 경고를 끄는 것은 우리 프로젝트에 실질적인 영향을 미치지 않습니다. Vue에서는 유형 검사에만 TypeScript를 사용하므로 이 옵션은 우리가 수행하는 작업에 영향을 미치지 않습니다.

이 문제는 VS Code가 Intellisense 기능을 제공하기 위해 사용하는 TypeScript 언어 서버 때문에 발생할 수 있습니다. Volar는 이 서버에 연결되지만 불행히도 이를 제어할 수 없습니다.