在 VSCode 中定义 vue3-setup 代码片段需手动创建或编辑用户级 snippets/vue.json 文件，填入标准 JSON 格式片段，前缀为 vue3-setup，内容含 script setup（TS）、template 和 style；注意语言模式设为 Vue、光标位置正确、启用 Volar 插件。
怎么在 VSCode 里定义一个 vue3-setup 代码片段
VSCode 原生不带 Vue3 的 setup 模板，得自己配 snippets。关键不是装插件，而是改用户级或工作区级的 vue.json 片段文件。
路径一般是：~/Library/Application Support/Code/User/snippets/vue.json（macOS）、%APPDATA%\Code\User\snippets\vue.json（Windows）或 ~/.config/Code/User/snippets/vue.json（Linux）。如果 vue.json 不存在，就新建一个空 JSON 文件。
内容直接写成标准 JSON 格式，注意不能有 trailing comma，否则 VSCode 会静默忽略整个文件：
{
"Vue3 Script Setup": {
"prefix": "vue3-setup",
"body": [
"<script setup lang=\"ts\">",
"import { ref, reactive, onMounted } from 'vue'",
"",
"const props = defineProps<{",
" msg?: string",
"}>()",
"",
"const emit = defineEmits<{",
" (e: 'update:modelValue', value: string): void",
"}>()",
"",
"const count = ref(0)",
"const state = reactive({",
" name: ''",
"})",
"",
"onMounted(() => {",
" console.log('mounted')",
"})",
"</script>",
"",
"<template>",
" <div>{{ msg }}</div>",
"</template>",
"",
"<style scoped>",
"</style>"
],
"description": "Vue3 script setup template with TS and common APIs"
}
}
为什么用 lang="ts" 而不是默认 JS
现在新项目基本都开 TS，如果片段里写 lang="js"，后续还得手动删改，反而拖慢节奏。直接按 TS 写，类型提示、defineProps 和 defineEmits 的泛型写法也更规范。
立即学习“前端免费学习笔记（深入）”；
如果你真用纯 JS，把 lang="ts" 改成 lang="js"，同时删掉所有泛型（比如 defineProps<{...}>() → defineProps({ ... })），但要注意：JS 下 defineProps 不支持解构，也不能用类型断言，容易误写。
-
defineProps在 JS 中必须传对象字面量，不能是变量或函数调用 -
defineEmits在 JS 中只接受字符串数组，不支持事件签名对象写法 - Volar 插件对 JS 的类型推导弱很多，
props.msg可能报 undefined 风险
输入 vue3-setup 后没触发？常见卡点
不是所有 .vue 文件都会自动激活这个片段——VSCode 默认只在 script 标签内识别 vue 片段，但光标必须落在 <script setup> 标签内部（哪怕标签还没写），或者在空白 <script> 标签里且语言模式设为 vue。
检查这几处：
- 右下角语言模式是不是
Vue（不是HTML或JavaScript）；如果不是，点一下切换 - 确保光标在
<script开始标签之后、>之前，或在已有<script setup>标签内部 - 片段前缀
vue3-setup输入后要按Tab或回车，不能只输完就停住 - 如果用了 Volar，确认它已启用（禁用 Vetur）；Volar 才真正支持
setup片段上下文
想加 Composition API 常用函数但又怕模板太重？
别一股脑全塞进去。模板越长，每次触发后要删的也越多，反而降低效率。建议按最小必要原则保留：
- 必留：
ref、reactive、onMounted—— 80% 场景够用 - 按需加：
computed、watch、useRouter等，单独另建片段如vue3-computed - 避免预设
axios或pinia相关代码 —— 不是每个组件都用，且导入路径因项目而异
真实协作中，团队共用片段时，最易被忽略的是 defineProps 和 defineEmits 的泛型写法是否和项目 tsconfig.json 兼容。比如开了 strict: true 但没配 skipLibCheck: true，可能报 Cannot find name 'defineProps' —— 这时候不是片段错了，是 Volar 的 TS 服务没加载好，重启窗口或重装 Volar 更快。
