Vue.json代码片段不生效,根本原因是语言模式、scope或JSON结构错误;需确保右下角显示“Vue”(非Vue HTML/Vue Volar),scope字段严格为"vue",且文件置于用户snippets目录并重启.vue文件。

vue.json 代码片段不生效,基本就是语言模式、scope 或 JSON 结构三者之一错了——不是插件没装全,也不是 VSCode 坏了。
为什么输入 vue 按 Tab 没反应
VSCode 不看文件后缀,只认右下角显示的语言模式。哪怕你打开的是 Button.vue,如果状态栏写着 HTML 或 Plain Text,vue.json 里的所有 prefix 都不会触发。
- 点击右下角语言标识,手动选成
Vue(注意:不是Vue HTML,也不是Vue (Volar)) - 检查
settings.json里有没有错误的"files.associations",比如"*.vue": "html"这种硬覆盖 -
vue.json必须放在用户 snippets 目录下(%APPDATA%\Code\User\snippets\或~/Library/Application Support/Code/User/snippets/),放项目里或.vscode/snippets/下默认不加载 - 改完
vue.json后,关掉当前 .vue 文件再重开——缓存不刷新,改了也白改
vue.json 中 scope 和 prefix 怎么配才对
scope 是唯一决定“能不能触发”的字段,必须写 "scope": "vue",不能是 "html"、"javascript" 或留空。VSCode 只有在语言模式为 Vue 时,才会去匹配这个 scope。
-
prefix建议避开通用词,比如用vue3或sfc,而不是直接叫vue——Volar、Vue Snippets 插件很可能也声明了同名 prefix,会互相覆盖 - 多个插件同时提供
vfor,VSCode 只展示一个,不会合并;想保留原功能又加自定义逻辑,就换新 prefix,比如vfor-async - body 里写 TypeScript 泛型要转义:
"const $1 = ref<$2>($3);",否则<和>被当 HTML 标签解析,插入后语法直接报错
Vue 3 项目该用什么模板结构
别抄 Vue 2 的 Options API 模板。你项目用的是 <script setup lang="ts">,片段里还写 export default { data() { } },等于每次新建都得删三行再重写。
递归分析 Vue 项目组件依赖,从入口文件生成组件层级图,支持 Vue 2/3,输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 推荐 body 内容精简为:
"<template></template>", "<script setup lang='ts'>", "import { ref, reactive } from 'vue'", "</script>", "<style scoped></style>" -
$0放在</script>后面,光标停在样式块里,方便立刻写 CSS - 不要在
body数组里写注释行(如// setup),VSCode 不识别,会当普通文本插入 - 如果项目用 JS 而非 TS,把
lang='ts'改成lang='js',不然 Volar 会跳类型错误
Volar 和代码片段的关系到底是什么
Volar 不提供模板,也不“激活”片段——它只是让 VSCode 正确识别 .vue 文件的语言模式为 Vue,从而让 scope: "vue" 生效。没有 Volar,.vue 文件大概率被识别成 HTML,片段自然失效。
立即学习“前端免费学习笔记(深入)”;
- Volar 必须启用,且 Vetur 必须禁用;两者共存会导致
defineProps类型推导崩坏,ref()解构后变any - Volar 默认不开启宏支持,需手动打开设置
Vue > Experimental: Vue Macros,然后**完全关闭并重启 VSCode 窗口**(不是重载) - 路径别名(如
@/components/)跳转失败?90% 是tsconfig.json里没配baseUrl和paths,和插件无关

















