emmet默认启用但缩写不展开，主因是语言模式错误（如右下角显示plain text而非html）或设置缺失（如emmet.includelanguages未包含html），文件未保存为.html后缀或未手动切换语言模式也会导致失效。
Emmet 默认就开着，但你写的缩写不展开，大概率不是插件没装，而是语言模式或设置卡住了。
为什么 ! 或 div.container 按 Tab 没反应
VSCode 自带 Emmet，根本不用装插件。失效通常只发生在两个地方：
- 右下角显示的是
Plain Text 而不是 HTML —— 点击它，手动选成 HTML
- 设置里误删了
html：打开 settings.json，检查 "emerald.includeLanguages" 是否包含 "html": "html"（新版可能叫 emmet.includeLanguages）
- 文件没保存为
.html 后缀，或者刚新建没指定语言模式，Emmet 就不会触发
别急着搜“Emmet 插件”——它不是第三方扩展，是编辑器内置能力，装错反而冲突。
Auto Rename Tag 为什么改了 <div>，<code>
没变
这个插件只对成对标签起作用，且依赖准确的语法解析：
html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
- 写
<img>、<br> 这类自闭合标签时，它完全不响应
- 开头写了
<header></header>，但结尾漏了
- 在
.vue 文件的 <template></template> 里可用，但在 <style></style> 块里写 div { } 不会重命名——它只管 HTML 结构层
- 确保文件语言模式是
HTML 或 Vue HTML，不是 Plain Text 或 JavaScript
Live Server 打开页面空白，控制台报 Cross-Origin Request Blocked
这是最典型的路径误解：你没用 Live Server 启的服务，而是双击 HTML 文件用 file:// 协议打开了。
- 浏览器地址栏必须是
http://127.0.0.1:5500/index.html 这类，不能是 file:/// 开头
- 关掉所有旧标签页，右键 HTML 文件 →
Open with Live Server（不是右键菜单里的 “在浏览器中打开”）
-
<link rel="stylesheet" href="css/style.css"> 中的 css/ 是相对于项目根目录，不是 HTML 文件所在目录 —— 所以要右键整个项目文件夹再启动 Live Server
- 图片、JS 等资源路径也不能写
file:///，得用相对路径或根路径（如 /img/logo.png）
格式化后标签换行乱、缩进错位
VSCode 默认 HTML 格式化器很基础，遇到复杂嵌套容易崩。关键不是换插件，而是调参数：
- 按
Shift+Alt+F 前，先确认当前文件语言模式是 HTML（右下角）
- 如果用了
Prettier，它默认把 <div><p>xxx</p></div> 格式化成多行，但你可能想要内联 —— 改 prettier.singleAttributePerLine 和 prettier.wrapAttributes
- 更轻量的方案：在
settings.json 加 "html.format.wrapLineLength": 0，关掉自动折行
- Emmet 生成的结构本身就不带多余空格，所以优先靠
div>ul>li*3 这类缩写构建，比手敲再格式化更稳
真正卡住效率的，往往不是功能缺，而是语言模式错、路径理解偏、缩写没记熟——这些点踩中一个，再好的插件也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
