VSCode中Vue3开启悬停对象属性查看及代码片段失效问题

1. 开启悬停显示对象内部结构 #

要实现这个功能，按以下步骤操作：

• 卸载旧版Vue插件Vetur，安装Vue3官方推荐的Volar插件（专属语言服务工具）
• 确保项目有Vue类型支持：
  • TS项目：用Vue CLI/Vite初始化的项目自带类型，无需额外操作
  • JS项目：安装@vue/runtime-core包，或在项目根目录新建jsconfig.json并填入以下配置：

    {
      "compilerOptions": {
        "module": "ESNext",
        "moduleResolution": "Node",
        "target": "ES2020",
        "jsx": "preserve",
        "baseUrl": ".",
        "paths": { "@/*": ["./src/*"] },
        "types": ["vue"]
      },
      "exclude": ["node_modules", "dist"]
    }
    

• 打开VSCode设置，搜索Volar: Enable Take Over Mode并开启，让Volar完全接管Vue文件的语言服务，确保悬停提示正常工作

2. 解决Vue/ES6代码片段不生效问题 #

按以下方向排查修复：

• 确认当前.vue文件的语言模式是Vue (Volar)（右下角可切换，不要选普通Vue模式）
• 修正代码片段的语言关联：打开VSCode「用户代码片段」，给Vue的script区块写片段时，要把scope设置为javascriptvue,typescriptvue而非单纯的javascript。示例代码片段：

  {
    "Vue3 Setup 模板": {
      "prefix": "vsetup",
      "body": [
        "<script setup>",
        "$0",
        "</script>"
      ],
      "description": "快速生成Vue3 Setup脚本",
      "scope": "javascriptvue,typescriptvue"
    }
  }
  

• 禁用冲突插件：如果之前装过Vetur，必须禁用，它会和Volar抢语言服务控制权，导致片段失效
• 检查触发前缀：确保在对应区块内触发（比如JS/ES6片段要在script标签内输入前缀，不要在template里触发）

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