VSCode配置Emmet高级技巧_HTML标签一键生成的万能缩写手册

Emmet这东西，用好了是真快，用不好就是各种按不下去的尴尬。很多人在群里问“为什么我写的缩写没反应”，答案往往不是缩写本身的问题，而是几个非常基础的细节没对齐。今天就把这几个最容易卡住人的点掰开揉碎了讲清楚。

Emmet 不是万能缩写手册，它只在语言模式正确、语法精准、上下文匹配时才可靠展开；所谓“万能”其实是误读，真正高效的是掌握三类结构逻辑 + 两个关键配置。

为什么 div.container>h2.title+ul.list>li*3 按 Tab 没反应

你写了一个很标准的缩写，Tab键按下去，结果光标纹丝不动。这时候千万别急着怀疑自己是不是写错了——先看看编辑器右下角的状态栏，语言模式是不是 Plain Text 或者 Ja vaScript？如果是，点一下把它切到 HTML，问题就解决了。文件没保存、后缀名缺失时，VSCode会默认当成纯文本处理，这也是一个常见陷阱。

另一个容易被忽略的原因：你装的插件太多了。Prettier、Auto Rename Tag 这些插件可能会“劫持”Tab键，导致Emmet根本没机会响应。去 settings.json 里翻一下，看看有没有 "emerald.emmetEnabled": false 这种旧配置残留，或者 emmet.triggerExpansionOnTab 被改成了 false。默认它是 true，但不少人之前为了调别的功能顺手改过，后来就忘了。

ul>li*5 和 ul>li{Item $}*5 的实际差异

这两个缩写看起来差不多，但输出结果差别很大，关键在于花括号和计数符的位置。

• ul>li*5 只会生成5个空
，里面什么内容都没有。
• ul>li{Item $}*5 则会生成
• Item 1
到
• Item 5
，$ 是自动递增的计数符，必须写在花括号内部。
• 注意：li {Item $}*5 中间多了一个空格，这个缩写就直接失效了，Emmet会把它当成两个独立元素处理。
• 同理，a[href="#"]{Click} 是有效的，但 a [href="#"]{Click} 中间的空格会让解析器认为 a 是一个独立标签，后面的内容全部被忽略。

在 Vue/JSX 中让 section>div>p 正常展开

Vue单文件组件和JSX默认是不启用Emmet的，必须手动告诉VSCode“这里也当HTML处理”。

• Vue的