一、打开 VSCode 配置用户代码片段

快捷键：
Windows/Linux：Ctrl + Shift + P
Mac：Cmd + Shift + P
输入：Preferences: Configure User Snippets
选择：New Global Snippets file…
起名：html-vue.code-snippets 回车
然后把下面内容全部粘贴进去即可。

二、完整模板代码（直接复制）

{
  // ==========================
  // HTML 基础模板
  // 前缀: html
  // ==========================
  "HTML Basic Template": {
    "prefix": "html",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <title>Document</title>",
      "</head>",
      "<body>",
      "  $0",
      "</body>",
      "</html>"
    ],
    "description": "HTML 基础模板"
  },

  // ==========================
  // Vue2 模板
  // 前缀: vue2
  // ==========================
  "Vue2 Component": {
    "prefix": "vue2",
    "body": [
      "<template>",
      "  <div>",
      "",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '',",
      "  data() {",
      "    return {",
      "",
      "    }",
      "  },",
      "  methods: {",
      "",
      "  },",
      "  created() {",
      "",
      "  },",
      "  mounted() {",
      "",
      "  }",
      "}",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>"
    ],
    "description": "Vue2 单文件组件模板"
  },

  // ==========================
  // Vue3 setup 语法糖模板
  // 前缀: vue3
  // ==========================
  "Vue3 Script Setup": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div>",
      "",
      "  </div>",
      "</template>",
      "",
      "<script setup>",
      "import { ref, reactive, onMounted } from 'vue'",
      "",
      "$0",
      "</script>",
      "",
      "<style scoped lang=\"css\">",
      "",
      "</style>"
    ],
    "description": "Vue3 setup 语法糖模板"
  },

  // ==========================
  // Vue3 + Less 版
  // 前缀: vue3-less
  // ==========================
  "Vue3 Less": {
    "prefix": "vue3-less",
    "body": [
      "<template>",
      "  <div>",
      "",
      "  </div>",
      "</template>",
      "",
      "<script setup>",
      "import { ref, reactive, onMounted } from 'vue'",
      "",
      "$0",
      "</script>",
      "",
      "<style scoped lang=\"less\">",
      "",
      "</style>"
    ],
    "description": "Vue3 + Less"
  }
}在这里插入代码片

三、怎么用？

在对应文件里输入前缀，按 Tab 即可生成：
在 .html 文件输入：html → Tab
在 .vue 文件输入：vue2 → Tab
在 .vue 文件输入：vue3 → Tab
想用 Less：vue3-less → Tab
$0 是光标最终停留的位置。

四、如果你想输入！也能出 HTML 模板

打开设置：
Ctrl + ,
搜索：Trigger Expansion On Tab
勾选上
然后输入 ! + Tab 就能快速出 HTML 模板（VSCode 自带）。