VS Code默认支持!+Tab生成HTML5骨架，但需确保文件为.html后缀、语言模式为HTML、光标在空行开头，且emmet.triggerExpansionOnTab为true；html:5已废弃，禁用emmet.showExpandedAbbreviation: "never"可恢复补全。
VS Code 默认就能做 HTML 格式化和标签自动补全，不需要装插件也能开箱即用；但默认配置下部分功能（比如 ! 生成骨架、div.class 展开）可能被禁用或响应迟钝，关键在调整几个核心设置。
怎么让 ! 按 Tab 就生成完整 HTML5 结构
这是最常失效的功能。VS Code 的 Emmet 引擎默认识别 ! 为 HTML 片段触发符，但若你改过语言模式、或设置了冲突的 snippets，它就不出建议。
- 确保当前文件后缀是
.html，且右下角语言模式显示为HTML（不是Plain Text或Auto） - 检查
settings.json中是否误加了"emmet.showExpandedAbbreviation": "never"—— 改成"always"或删掉这行 - 如果仍无效，手动触发：输入
!后按Ctrl+Space（Win/Linux）或Cmd+Space（Mac），再选html:5
div.header>p*3 这类嵌套写法不生效？检查 Emmet 模式
Emmet 的嵌套语法（>、+、*、{}）依赖正确的上下文解析。常见失效原因是：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 当前光标不在 HTML 模式下：比如你在
<script></script>块里写div>p，Emmet 不会响应 —— 它只在 HTML 标签体或顶层生效 - Emmet 被设为仅对特定语言启用：确认
settings.json里有"emmet.includeLanguages": { "html": "html" }（默认已含，但自定义后易漏） -
div.header写成div .header（中间有空格）—— Emmet 会当成两个独立词，直接忽略 class 解析
格式化（Shift+Alt+F）后标签错位或缩进异常？别只靠默认 formatter
VS Code 自带的 HTML 格式化器对嵌套深度、属性换行、自闭合标签处理比较保守，容易把 <img src="" alt=""> 拆成多行，或把 <div>
<p></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div> 缩进错乱。
- 安装
Prettier插件并设为默认 formatter，它对 HTML 的语义缩进更合理 - 在
settings.json加上："prettier.htmlWhitespaceSensitivity": "ignore"，避免空格敏感导致意外换行 - 如果项目用 Vue/JSX，Prettier 默认不处理
<template></template>块内的 HTML —— 需额外配"prettier.vueIndentScriptAndStyle": true
为什么重命名开始标签时，闭合标签没同步更新？这不是 VS Code 原生能力
VS Code 默认不支持“改 <div> → 自动改 <code>
