根本原因是语言模式错误: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>;div+p生成并列的<div></div> <p></p>
进阶但实用:a[href=#]{Click me} 直出带属性和文本的链接;img[src=logo.png alt=Logo] 也能一键展开。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
Tab 键失效,是该换快捷键还是修设置?
优先检查 "editor.tabCompletion" 是否为 "on"(默认就是开启的)。改快捷键反而容易冲突——比如 Prettier 或 Auto Rename Tag 也在监听 Tab。
- 真要改:搜
emmet trigger→ 关闭Emmet: Trigger Expansion On Tab,再手动绑定emerald.expandAbbreviation到Ctrl+E - 但更推荐保留默认:Emmet 的
Tab是上下文感知的——光标在缩写末尾才展开;在行中按可能触发其他补全,这是设计,不是 bug
Vue/JSX 里 ul>li*3 不展开?得配 includeLanguages
Vue 单文件组件默认只在 <template></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">,需手动改或配 <code>emmet.variables真正卡住人的往往不是语法记不住,而是语言模式识别失败、缩写里混入空格、或者在
<script></script>块里硬试 HTML 缩写——这些地方它本来就不该工作。










