根本原因是文件未被识别为html模式，vs code仅在html、vue、jsx等语言模式下激活emmet；若状态栏显示plain text或javascript，需点击切换为html，否则div.class1.class2不会展开。
Emmet 输入 div.class1.class2 为什么没生成双 class 标签
根本原因不是插件坏了，而是当前文件没被识别为 HTML 模式。VS Code 只在 html、vue、jsx 等语言模式下激活 Emmet；你在 .js 或纯文本里敲 div.a.b，它就是不会展开。
检查右下角状态栏——如果显示的是 Plain Text 或 JavaScript，点它，选 HTML 即可。常见误操作是新建文件没保存（.html 后缀未生效），或用其他插件强制覆盖了语言模式。
-
div.class1 .class2（中间有空格）→ 生成两个独立 <div class="class1"></div>
<div class="class2"></div>
-
div.class1,class2（逗号）→ Emmet 完全不识别，原样保留
- class 名含短横线（如
text-lg、bg-blue-500）无需转义，直接写 span.text-lg.bg-blue-500 即可
Auto Rename Tag 修改 <div> 时结束标签没同步？
<p>插件本身不依赖语言模式，但只对成对标签生效。如果标签被写成自闭合形式（如 <code><img>、<br>），或用了错误的大小写（<div> 和 <code>
混用），它就无法匹配。
另外，该插件默认只监听标签名变更，不响应属性修改（比如改 class 值）。如果你删掉起始标签的最后一个字符（如 <di></di>），它也不会触发重命名——必须是完整标签名替换才算数。
- 确保起始和结束标签完全一致（包括大小写）
- 不要手动写错配对，比如
<section><p></p></section> 这种嵌套错位会干扰识别
- 插件不处理模板语法里的标签（如 Vue 的
<template></template> 内部需额外配置）
Live Server 打开页面空白或提示跨域错误
页面空白大概率是你手动双击 .html 文件，用 file:// 协议打开了它。浏览器会拦截 JS/CSS 加载，控制台报 Cross-Origin Request Blocked。
正确做法：右键文件 → Open with Live Server，或点击右下角 Go Live 按钮。它会启动本地 HTTP 服务（如 http://127.0.0.1:5500/index.html），绕过跨域限制。
- 端口冲突时，可在
.vscode/settings.json 中加："liveServer.settings.port": 3000
- 旧标签页别关——新链接必须用 Live Server 生成的地址，不是你手输的
localhost:3000
- 若仍空白，打开浏览器开发者工具的 Network 面板，看是否有 404 的资源请求
HTML 文件里 class 补全失效？
不是 Emmet 的问题，而是缺少 HTML CSS Class Completion 类插件支持。VS Code 默认不从外部 CSS 文件读取 class 名，div.container 能展开，但输入 class="con" 时按 Ctrl+Space 不出提示，就是因为没装补全类插件。
推荐安装 HTML CSS Class Completion（作者 Zignd），它会扫描项目中所有 .css、.scss 和 .vue 文件，把 class 名注入补全列表。注意：它只在 class 属性值内生效，不作用于 Emmet 缩写。
- 装完后首次补全可能稍慢，等它索引完 CSS 文件
- 如果项目用了 CSS-in-JS（如 styled-components），这类插件基本无效
- 补全列表默认不区分大小写，但匹配时严格区分连字符和下划线（
my-class ≠ my_class）
实际写 HTML 时，最常卡住的不是语法，而是「当前编辑器到底认不认这个文件」——语言模式、插件作用域、HTTP 协议这三道坎，跨过去，剩下全是肌肉记忆。
