VSCode写代码插件神器_VSCode快速生成Vue模版【操作】-VSCode-PHP中文网

vue.json必须放在vscode配置目录的snippets子目录下，windows路径为c:\users{用户名}\appdata\roaming\code\user\snippets\vue.json，macos为~/library/application support/code/user/snippets/vue.json；推荐通过命令面板“configure user snippets”选择vue自动生成，确保路径和文件名正确。

vscode写代码插件神器_vscode快速生成vue模版【操作】

vue.json 文件必须放在正确路径才能生效

VSCode 的用户代码片段不是随便放个 vue.json 就能用的。它必须存放在 VSCode 配置目录下的 snippets 子目录里，Windows 路径是 C:\Users\{用户名}\AppData\Roaming\Code\User\snippets\vue.json，macOS 是 ~/Library/Application Support/Code/User/snippets/vue.json。手动新建文件时如果路径错了，输入 vue 完全没反应——不是插件问题，是文件根本没被加载。

更稳妥的做法是：用 Ctrl+Shift+P（Win）或 Cmd+Shift+P（Mac）打开命令面板，输入 Configure User Snippets，再选 vue（不是新建普通 JSON 文件），VSCode 会自动创建并打开正确的 vue.json。这个动作确保路径和文件名都合规。

prefix 值区分大小写，且不能含空格或特殊符号

prefix 是触发代码片段的关键字，比如设成 "prefix": "vh"，那必须在 .vue 文件里**连续、无空格**地敲出 vh，然后按 Tab 或 Enter 才能展开。敲成 v h、VH、vue! 都不会匹配。

常见误操作：

把 prefix 设为 "Vue"，但在文件里输小写 vue → 不触发
加了中文标点或空格，如 "prefix": "vue " → 无效
用 vue 作为 prefix，但当前文件右下角语言模式显示为 HTML 而非 Vue → 片段不出现（需点击右下角手动切为 Vue）

Vue 2 和 Vue 3 模板不能混用同一 prefix

Vue 2 的 Options API 和 Vue 3 的 <script setup></script> 结构完全不同，强行用一个 prefix 绑定两种模板会导致内容错乱。建议分开定义：

vue-component-analyzer

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

下载

在同一个 vue.json 里写两个独立片段：

{
  "vue2": {
    "prefix": "vue2",
    "body": ["<template>", "  <div>$0</div>", "</template>", "", "<script>", "export default {", "  data() {", "    return {}", "  }", "}</script>"]
  },
  "vue3": {
    "prefix": "vue3",
    "body": ["<script setup lang='\"ts\"'>", "$0", "</script>", "", "<template>", "  <div></div>", "</template>"]
  }
}

这样输入 vue2 得到 Options 模板，输入 vue3 得到 Setup 模板，互不干扰。别图省事只留一个 vue，后期项目升级或多人协作时容易踩坑。