根本原因是语言模式错误：div.container按Tab无反应，因VS Code仅在HTML或vue-html模式下触发Emmet，右下角需显示HTML而非Plain Text/JavaScript；新建文件须先保存为.html才自动识别，.js/.ts中默认不生效，缩写中不可含空格。

为什么 div.container 按 Tab 没反应？

根本原因几乎总是语言模式没设对，不是 Emmet 被关了。VS Code 默认只在 HTML 或 vue-html 模式下触发 Emmet 缩写。

• 看右下角状态栏：必须显示 HTML（不是 Plain Text、JavaScript 或空白）
• 新建文件用 Ctrl+N 后，先保存为 index.html，VS Code 才会自动识别语言模式
• 如果写在 .js 或 .ts 里，Emmet 默认不生效；强行开启需加配置："emmet.includeLanguages": { "javascript": "html" }，但容易导致属性名错乱（比如把 className 展开成 class）
• 缩写中间不能有空格：div .container ❌，必须是 div.container ✅

!、ul>li*5 这些缩写怎么记才不翻车？

不用背全表，盯住三类高频模式就够了：

• !：生成完整 HTML5 模板（含 <meta charset="UTF-8">），比 html:5 更快也更稳
• 标签名#id.类名：如 header#app.header-main → <header id="app" class="header-main"></header>
• 父>子*数量 或 父+子：如 ul>li*3 生成三个 <li></li>；div+p 生成并列的 <div></div><p></p>

进阶但实用：a[href=#]{Click me} 直出带属性和文本的链接；img[src=logo.png alt=Logo] 也能一键展开。

Tab 键失效，是该换快捷键还是修设置？

优先检查 "editor.tabCompletion" 是否为 "on"（默认就是开启的）。改快捷键反而容易冲突——比如 Prettier 或 Auto Rename Tag 也在监听 Tab。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 真要改：搜 emmet trigger → 关闭 Emmet: Trigger Expansion On Tab，再手动绑定 emerald.expandAbbreviation 到 Ctrl+E
• 但更推荐保留默认：Emmet 的 Tab 是上下文感知的——光标在缩写末尾才展开；在行中按可能触发其他补全，这是设计，不是 bug

Vue/JSX 里 ul>li*3 不展开？得配 includeLanguages

Vue 单文件组件默认只在 <template> 区域启用 Emmet，JSX 完全不认 HTML 缩写，必须显式声明。

• Vue 项目：确保装了 Volar（非 Vetur），并在 settings.json 加：

  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  }

• React/JSX：加：

  "emmet.includeLanguages": {
    "javascriptreact": "jsx",
    "typescriptreact": "jsx"
  }

  注意：JSX 中 class 会被映射为 className，但 Emmet 默认不处理这个转换，所以 div.container 展开会输出 <div class="container">，需手动改或配 emmet.variables

真正卡住人的往往不是语法记不住，而是语言模式识别失败、缩写里混入空格、或者在 <script> 块里硬试 HTML 缩写——这些地方它本来就不该工作。