Vue3+TypeScript模板无代码提示及类型校验问题排查

核心原因 #

你当前仅配置了针对Node环境的tsconfig.vite-config.json，但缺少根目录下专门用于Vue组件的tsconfig.json——Vue Volar插件需要这个配置来解析模板中的类型信息，因此只能识别<script setup lang="ts">内的代码，无法覆盖模板区域的提示与校验。

具体修复步骤 #

1. 在项目根目录创建tsconfig.json #

添加以下适配Vue组件的TS配置：

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["src/**/*.vue", "src/**/*.ts", "src/**/*.d.ts"],
  "compilerOptions": {
    "strict": true,
    "jsx": "preserve",
    "types": ["vue"]
  }
}

• extends：直接继承Vue官方预设的Web环境TS配置，省去基础配置编写
• include：确保所有Vue组件、TS文件、类型声明文件都被纳入类型检查范围
• strict: true：开启严格类型校验，这是Volar实现模板类型检查的基础
• types: ["vue"]：让TypeScript能识别Vue的全局类型定义

2. 启用Volar的Take Over Mode #

VS Code中需确保Volar完全接管TS类型检查：

• 禁用所有其他Vue相关插件（如Vetur，避免冲突）
• 按下Ctrl/Cmd + Shift + P打开命令面板，执行Vue: Switch TS/JS Language Mode，选择Vue - Take Over Mode

3. 重启VS Code #

修改配置后必须重启编辑器，确保新的TS配置生效。重启后打开Vue组件，模板区域的自动提示与类型校验即可恢复正常。

补充说明 #

你的package.json中已安装@vue/tsconfig、typescript等必要依赖，不存在依赖缺失问题，核心问题就是缺少根目录下针对Vue组件的TS配置文件。

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