vs code 自带 emmet，div.class1.class2 回车即可生成 ；多个 class 必须用英文点号连接、无空格逗号，且文件语言模式需为 html。
直接用 Emmet，不用装额外插件——VS Code 自带功能就能完成，关键在于写法和环境是否匹配。
div.class1.class2 为什么没生成带两个 class 的标签
常见错误是中间加了空格或逗号：div.class1 .class2 会生成两个独立 div；div.class1,class2 则完全不识别。Emmet 要求多个 class 必须用英文点号 . 连接，且不能有空格、括号、连字符（短横线本身允许，如 bg-blue-500 没问题）。
- 正确写法：
div.header.main→<div class="header main"></div> - 类名含短横线也照常解析：
span.text-lg.font-bold - 如果按 Tab/Enter 没反应，先看右下角状态栏语言模式是不是
HTML，不是就点它手动切到 HTML
在 JS 或 JSX 文件里写 div.a.b 为啥不展开
Emmet 默认只在 html、vue、jsx、tsx 等特定语言模式下激活。你在 .js 文件里敲 div.container，VS Code 不会展开——这不是插件坏了，是设计如此。
- 解决方法：打开设置，搜
emmet includeLanguages，添加映射："javascript": "html"（注意引号和冒号格式） - 或者临时切换语言模式：Ctrl+K M → 输入
html回车，当前文件就按 HTML 解析了 - Tailwind CSS IntelliSense 插件的类名补全也遵循同样规则，只在支持的语言中生效
怎么一次生成带 class + 内容 + 子元素的结构
Emmet 支持组合语法，用 {} 填内容，> 表示嵌套，* 批量生成，不用分步敲。
-
section.container>h1{标题}+p{说明文字}→ 生成带 class 的section，里面是h1和并列的p -
ul>li.item$*3→ 生成三个li，class 分别是item1、item2、item3 -
div.flex.items-center>span.text-gray-600{操作}→ Tailwind 类 + 文本一步到位 - 注意：
{}里的内容不能含双引号或尖括号，否则会破坏结构
真正卡住人的往往不是语法记不住，而是语言模式没对、空格多打了一个、或者以为要装插件才敢用——其实 VS Code 开箱就有，只是得知道它在哪、怎么触发、以及哪些地方它故意“装死”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
