VSCode的Vue代码片段填什么快捷词_VSCode自定义模板【宝典】-VSCode-PHP中文网

最稳妥的 prefix 是 vue3，因其明确指向 composition api + setup 语法糖，避免与 vue2 片段或 volar/vetur 冲突；vue3-ts 适用于 typescript 项目，需含 lang="ts" 和类型导入；所有 prefix 必须小写、无空格或特殊符号。

vscode的vue代码片段填什么快捷词_vscode自定义模板【宝典】

vue3 是最稳妥的 prefix 选择

别用 vue、v 或 vc，这些前缀极易和 Volar/Vetur 自带片段、旧版 Vue2 模板或第三方插件冲突。VSCode 会按优先级匹配，你的片段大概率被静默屏蔽。vue3 明确指向 Composition API + setup 语法糖，触发稳定，团队协作时也无歧义。

vue3：通用模板（<script setup></script> + <template></template> + <style scoped></style>）
vue3-ts：带 lang="ts" 和基础类型导入（如 defineProps 声明）
vue3-setup：纯 <script setup></script> 块，适合快速补全逻辑层

所有前缀都必须小写，且不能含空格或特殊符号——vue3-template 合法，vue3 template 会失效。

vue.json 还是 vue3.json？路径和作用域决定一切

文件名和存放位置直接决定片段能不能在 .vue 文件里弹出来。很多人把片段写进 vue.json 却没反应，问题不在内容，而在 VSCode 根本没加载它。

若你希望片段只在 .vue 文件生效 → 放进 vue.json，路径为：$HOME/.config/Code/User/snippets/vue.json（Linux）、%APPDATA%\Code\User\snippets\vue.json（Windows）、$HOME/Library/Application Support/Code/User/snippets/vue.json（macOS）
若你希望片段在新建空 .vue 文件时就可用，且跨项目稳定 → 放进全局 vue3.json（通过 Ctrl+Shift+P → Preferences: Configure User Snippets → New Global Snippets File 创建）
关键前提：右下角 languageId 必须显示为 vue，不是 HTML 或 Plain Text；如果不是，右键 → Change Language Mode → 选 Vue

body 里缩进、占位符、lang 属性怎么写才不报错

JSON 不允许注释，缩进混用 Tab/空格，或漏掉 <p>JSON 不允许注释，缩进混用 Tab/空格，或漏掉 <code>$0，都会导致整个文件静默失效——VSCode 不报错，只是片段不出现。

，都会导致整个文件静默失效——VSCode 不报错，只是片段不出现。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

body 是字符串数组，每行一个元素，缩进用空格写死（比如 " const count = ref(0)" 前两个空格，就真缩进两格）
光标跳转必须连续编号：$1 → $2 → $3 → $0；跳号（如只有 $1 和 $3）会让后续跳转卡住
$0 必须有且只能有一个，放在最终光标位置（比如后面）
lang 属性要和项目实际配置一致：lang="scss" 前提是你装了 sass 和 style-resources-loader 等；否则改用 lang="css" 避免构建报错 Module parse failed

示例安全写法：

"body": [
  "<script setup lang='\"ts\"'>",
  "const ${1:name} = ${2:ref}(0);",
  "$0",
  "</script>",
  "",
  "<template>",
  "  <div>${3:content}</div>",
  "</template>",
  "",
  "<style scoped lang='\"css\"'>",
  "${4:}",
  "</style>"
]

Volar 插件没启、languageId 错位、JSON 格式错误是三大静默杀手

这三个问题不会抛出红色报错，但会让你反复检查代码却找不到原因。

Volar 未启用或禁用：VSCode 右下角 languageId 显示为 HTML，vue.json 片段永远不会触发；确认已安装并启用 Volar（不是 Vetur），且禁用冲突插件
languageId 错位：新建 test.vue 后，VSCode 默认可能识别为 HTML；必须手动右键 → Change Language Mode → Vue，之后再输 vue3 + Tab
JSON 格式错误：多一个逗号、少一个引号、用了中文引号、加了 // 注释 —— VSCode 全部静默忽略，连警告都不给；建议用 VSCode 自带 JSON 验证（保存时提示）或粘贴到 jsonlint.com 校验