VSCode中Vue文件代码片段的有效Scope取值咨询

Vue文件在VSCode中对应的正确Scope值是vue。

如果之前设置vue没生效，大概率是代码片段格式或环境配置问题，可以按以下步骤排查：

• 确认代码片段文件结构正确，示例如下：

  {
    "Vue基础组件模板": {
      "scope": "vue",
      "prefix": "vue-base",
      "body": [
        "<template>",
        "  <div class=\"${1:wrapper}\">",
        "    $0",
        "  </div>",
        "</template>",
        "",
        "<script setup>",
        "// 组件逻辑写在这里",
        "</script>",
        "",
        "<style scoped>",
        ".${1:wrapper} {",
        "  padding: 1rem;",
        "}",
        "</style>"
      ],
      "description": "生成带setup语法的基础Vue组件结构"
    }
  }
  

• 检查代码片段存放位置：工作区代码片段需放在.vscode/snippets/vue.code-snippets；全局代码片段可通过文件>首选项>用户代码片段选择vue创建对应文件
• 确保已安装并启用Vue相关插件（如Volar或Vetur），这类插件负责识别Vue文件的语言模式，缺失的话VSCode无法正确识别.vue文件的Scope
• 尝试重启VSCode，部分配置变更需要重启才能生效

如果需要让片段同时作用于Vue和HTML文件，可将Scope设为html,vue。

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