Vue3+TypeScript项目中，VS Code能否实现SFC模板组件Props自动补全？

你的技术栈（VS Code + Vue 3 + TypeScript + Vite + Volar）完全支持单文件组件模板中的Props自动补全，以下是确保功能生效的要点和验证步骤：

基础验证：你的组件写法是正确的 #

你提供的UserComponent使用了<script setup lang="ts">结合defineProps<Props>的类型推导写法，这是Vue 3推荐的TS写法，Volar原生支持这种写法的类型解析，理论上已经具备补全能力。

确保功能生效的关键配置 #

1. 禁用Vetur，启用Volar
   Vetur是针对Vue 2的旧插件，和Volar冲突，必须在VS Code中禁用Vetur，确保Volar处于启用状态。

2. 检查tsconfig.json配置
   项目根目录的tsconfig.json需要正确包含Vue的类型支持，示例配置如下：

   {
     "compilerOptions": {
       "target": "ES2020",
       "useDefineForClassFields": true,
       "module": "ESNext",
       "lib": ["ES2020", "DOM", "DOM.Iterable"],
       "skipLibCheck": true,
       "moduleResolution": "bundler",
       "allowImportingTsExtensions": true,
       "resolveJsonModule": true,
       "isolatedModules": true,
       "noEmit": true,
       "jsx": "preserve",
       "strict": true,
       "types": ["vue"]
     },
     "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
     "references": [{ "path": "./tsconfig.node.json" }]
   }
   

   重点确保compilerOptions.types包含"vue"，include覆盖了所有.vue文件。

3. 正确导入组件
   在父组件中必须显式导入UserComponent，Volar才能识别组件的Props：

   <template>
     <!-- 输入<UserComponent u>时，会自动提示username -->
     <UserComponent u/>
   </template>
   
   <script setup lang="ts">
   import UserComponent from './UserComponent.vue'
   </script>
   

排查问题的小技巧 #

• 如果补全没出现，尝试重启VS Code或通过Ctrl+Shift+P执行「重新加载窗口」，刷新Volar的类型服务。
• 推荐开启Volar的接管模式（Take Over Mode）：在VS Code扩展设置中搜索「Volar: Take Over Mode」并启用，或者临时禁用VS Code内置的TypeScript扩展（仅Vue项目中），让Volar完全接管TS类型解析，提升补全准确性。

内容的提问来源于stack exchange，提问作者ezero