VSCode代码结构美化插件_VSCode自动生成Vue视图【技巧】-VSCode-PHP中文网

vscode中需配置用户代码片段（vue.json）并设scope为"vue"，配合volar插件启用，文件后缀必须为.vue，输入vue按tab才可触发模板；常见失效原因包括scope错误、volar未启用、后缀非.vue或未重启编辑器。

vscode代码结构美化插件_vscode自动生成vue视图【技巧】

VSCode 里不能靠插件“一键新建 .vue 文件”就完事——真正起作用的是用户代码片段（snippets），且必须配对 scope: "vue" 才能在 .vue 文件内触发。

为什么输入 `vue` 按 Tab 没反应

常见错误不是代码写错了，而是根本没生效：

scope 值填成了 "html" 或 "javascript"，必须是 "vue" —— 这是 VS Code 决定“该不该展开”的唯一依据
Volar 插件未启用或被禁用：VS Code 本身不识别 vue scope，Volar 启用后才注入该语言支持
文件没保存为 .vue 后缀：哪怕内容全是 Vue 语法，只要后缀不是 .vue，scope: "vue" 就不会激活
配置文件名写错：必须是 vue.json（全局）或项目级 .vscode/snippets/vue.code-snippets，不是 vue-template.json 等随意命名

`vue.json` 中必须写的最小可用结构

别抄网上带几十行生命周期的旧模板，Vue 3 + setup 场景下，够用且无兼容风险的配置长这样：

{
  "Vue 3 SFC": {
    "scope": "vue",
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div>$1</div>",
      "</template>",
      "",
      "<script setup lang="ts">",
      "import { ref } from 'vue'",
      "",
      "const $2 = ref<string>('')",
      "</script>",
      "",
      "<style scoped>",
      "$3",
      "</style>"
    ],
    "description": "Minimal Vue 3 SFC with TS"
  }
}

注意几点：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

lang="ts" 是默认值，若项目用 JS，删掉即可，别硬写 lang="js"（无效）
$1/$2/$3 是 tab 切换焦点位置，$0 表示最终光标停靠点，没写就默认在末尾
空行必须用 "" 表示，不能省略，否则结构错位
所有 HTML 标签尖括号要转义为 和 <code>>，否则 JSON 解析失败

Vue 2 和 Vue 3 模板不能混用

同一个 vue.json 里可以共存多个 snippet，但 prefix 要区分清楚：

给 Vue 2 项目用：prefix: "vue2"，body 里写 export default { data() { return {} } }
给 Vue 3 项目用：prefix: "vue3"，body 里用 <script setup></script>，别塞 beforeMount 那套 Options API
别用一个 prefix: "vue" 想兼顾两者——项目类型一变，模板立刻失效或报错
如果项目同时存在 Vue 2 和 Vue 3 组件（如迁移中），建议按目录分 scope，但 VS Code 不支持目录级 snippet，只能靠 prefix 区分并手动输

和 Prettier、ESLint 共存时的格式冲突点

模板生成后第一次保存，常出现样式“跳动”，根源不在 snippet 本身，而在格式化链路：

Prettier 默认不处理 <template></template> 中的缩进，但若开了 prettier.vueIndentScriptAndStyle: true，它会强行缩进 script/style 块，和你 snippet 里的空格数打架
ESLint 的 vue/multi-word-component-names 等规则，在模板刚生成、还没写 name 时就会报错，属于正常，别因此怀疑 snippet 失效
最稳妥做法：生成模板 → 手动删掉所有空行和占位符（如 $1）→ 再保存，让格式化器从干净状态开始工作

真正难搞的从来不是怎么写 snippet，而是改完之后忘记重载窗口，或者误以为 Volar 没装好——其实只是没重启 VS Code。