如何利用VSCode插件生成标准代码模板-VSCode-PHP中文网

vs code 自带的用户代码片段（vue.json）才能实现新建 .vue 文件时自动生成 template/script/style 结构，插件仅负责前缀补全；需正确配置 scope 为 "vue"、文件名为 vue.json，并设置 prefix 如 "vuel" 避免冲突。

如何利用vscode插件生成标准代码模板

Vue VSCode Snippets 插件能直接补全 vuel、vue 等前缀生成标准 Vue 单文件组件，但**它不负责新建空 .vue 文件时的初始结构**——这点常被误以为“装了就自动有模板”，结果新建文件还是空白。真正解决“一键创建带 template/script/style 的 .vue 文件”的，是 VS Code 自带的「用户代码片段」机制，不是插件。

新建 .vue 文件时没模板？问题出在 scope 配置

很多人装了 Volar 或 Vue Language Features，以为它们该管文件模板，其实它们只增强语法高亮和类型检查，不提供文件级模板。VS Code 本身从不自动生成新文件内容，必须靠代码片段（snippets）+ 正确的 scope 触发。

常见错误现象：

新建 test.vue 后全是空行，得手动敲三块结构
在用户片段里写了 "scope": "vue"，但输入 vue + Tab 没反应
复制别人配置，却把 scope 写成 "html" 或漏写

正确做法是：打开命令面板（Ctrl+Shift+P），搜 Configure User Snippets → 选 vue（不是全局或 javascript）。生成的 vue.json 文件里，每个片段必须显式指定 "scope": "vue"，且文件名必须是 vue.json（VS Code 严格按文件名匹配语言）。

`vue.json` 片段怎么写才真正生效

片段 body 要覆盖完整单文件组件结构，且占位符位置合理。比如 vuel 前缀应生成含 <template></template>、<script setup></script>、<style scoped></style> 的三段式结构，光标默认落在 <template></template> 内部。

关键点：

prefix 设为 "vuel"，别用 "vue"（容易和插件冲突）
body 数组每行一个字符串，用 $1 标记第一个光标位置（通常在 <template></template> 里），$2 放在 <script></script> 内部，$0 表示最终光标停留处
必须包含 "scope": "vue" 字段，否则即使文件是 .vue，也不会触发
不要用 $TM_FILENAME_BASE 这类变量在 <script></script> 里生成组件名——Vue 3 setup 不需要命名导出，留空更安全

示例片段节选：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

{
  "Vue SFC with setup": {
    "prefix": "vuel",
    "scope": "vue",
    "body": [
      "<template>",
      "  <div>$1</div>",
      "</template>",
      "",
      "<script setup>",
      "$2",
      "</script>",
      "",
      "<style scoped>",
      "$0",
      "</style>"
    ],
    "description": "Vue 3 single file component with script setup"
  }
}