VSCode怎么快速生成Vue3的script setup模板代码片段-VSCode-PHP中文网

在 vscode 中定义 vue3-setup 代码片段需手动创建或编辑用户级 snippets/vue.json 文件，填入标准 json 格式片段，前缀为 vue3-setup，内容含 script setup（ts）、template 和 style；注意语言模式设为 vue、光标位置正确、启用 volar 插件。

vscode怎么快速生成vue3的script setup模板代码片段

怎么在 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 不支持解构，也不能用类型断言，容易误写。

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

defineProps 在 JS 中必须传对象字面量，不能是变量或函数调用
defineEmits 在 JS 中只接受字符串数组，不支持事件签名对象写法
Volar 插件对 JS 的类型推导弱很多，props.msg 可能报 undefined 风险

输入 `vue3-setup` 后没触发？常见卡点

不是所有 .vue 文件都会自动激活这个片段——VSCode 默认只在 script 标签内识别 vue 片段，但光标必须落在 <script setup></script> 标签内部（哪怕标签还没写），或者在空白 <script></script> 标签里且语言模式设为 vue。

检查这几处：

右下角语言模式是不是 Vue（不是 HTML 或 JavaScript）；如果不是，点一下切换
确保光标在 <script> 开始标签之后、<code>></script> 之前，或在已有 <script setup></script> 标签内部
片段前缀 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 更快。