vs code 中用 emmet 输入 div.class1.class2 回车即可生成带两个 class 的 div 标签；多个 class 间必须用英文点号连接，不可有空格或逗号，且需确保文件语言模式为 html。
用 Emmet 快速输入带两个 class 的 HTML 标签
VS Code 默认启用 Emmet，div.class1.class2 回车就能生成 <div class="class1 class2"></div>。不用手动敲引号、空格、等号，也不用切输入法。
常见错误是写成 div.class1 .class2（中间有空格），结果会变成两个独立标签；或者写成 div.class1,class2（逗号），Emmet 直接不识别。
- 多个 class 之间用英文点号
.连接，不能有空格、逗号或连字符 - 支持嵌套：比如
section.header.main>div.container>span.text-lg.text-gray-600，一次生成带层级和多 class 的结构 - 如果 class 名含短横线（如
bg-blue-500），Emmet 照常识别，无需转义
输入时 class 名自动补全失效？检查 Emmet 触发范围
默认情况下，Emmet 只在 html、vue、jsx 等特定语言模式下生效。如果你在 .js 或纯文本文件里敲 div.a.b，它不会展开——这不是 bug，是设计行为。
常见误判：以为“VS Code 没反应”是插件坏了，其实是当前文件没被识别为 HTML 类型。
立即学习“前端免费学习笔记（深入）”；
- 看右下角状态栏，确认语言模式是
HTML（不是Plain Text或JavaScript） - 快捷键
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac），输入Change Language Mode，选HTML - 想在 JS 文件里也用 Emmet？改用户设置：
"emerald.emmet.includeLanguages": {"javascript": "html"}，但注意这可能干扰 JSX 原生语法高亮
需要动态 class 或条件 class？别硬塞 Emmet
Emmet 是静态模板生成工具，不处理运行时逻辑。像 Vue 的 :class="{ active: isActive, 'text-red': error }" 或 React 的 className={\`btn \${loading ? 'disabled' : ''}\`}，没法靠 div.btn.disabled 一键生成。
这时候硬用 Emmet 反而增加删改成本：先展开，再手动改成绑定语法，容易漏引号或拼错变量名。
- 静态 class 多于 2 个时，Emmet 仍高效；一旦涉及变量、三元、对象语法，就该停手，直接手写
- 常用框架有专属 snippets：Vue 用户可装
Vetur或Volar，输入v-bind:class会有提示补全 - 如果频繁写条件 class，建议把高频组合存成自定义 Emmet 缩写（见 VS Code 设置里的
emerald.emmet.variables），但别指望它理解 JS 表达式
为什么有时按 Tab 不展开，非得按 Enter？
这是 Emmet 的触发键设置问题。VS Code 默认用 Tab 展开缩写，但如果你装了其他插件（比如 Prettier、Auto Rename Tag），它们可能劫持了 Tab 行为，导致按下后只缩进、不展开。
最直接的验证方式：在空行输入 ul>li*3，按 Tab；如果不展开，大概率是冲突。
- 临时解决：按
Enter也能展开（Emmet 支持双触发键） - 根治方法：打开设置搜
emerald.emmet.triggerExpansionOnTab，确保它是true - 更稳妥的做法：在键盘快捷键里搜
editor.action.emerald.expandAbbreviation，把它明确绑定到Tab，并禁用其他插件对Tab的同功能覆盖
div 都不会高亮，更别说展开了。 
