VSCode怎么使用Emmet快速写HTML_VSCode Emmet缩写语法教程【高效】

VSCode 1.40+ 内置 Emmet，输入 ! 按 Tab 生成 HTML5 骨架需满足三条件：右下角语言模式为 HTML、文件已保存、光标在空行或标签外；属性值须双引号、禁空格；JSX/Vue 需配置 emmet.includeLanguages。

很多开发者都遇到过这样的困惑：明明照着教程输入了Emmet缩写，按Tab键却毫无反应。其实，从VSCode 1.40版本开始，Emmet就已经内置了，根本不需要额外安装插件或修改默认设置。只要你的文件是.html后缀，并且语言模式正确，输入缩写按Tab就能瞬间展开。那些卡住的情况，十有八九不是语法问题，而是触发环境没满足条件。

为什么输入 ! 没反应？检查这三处

输入一个简单的感叹号!再按Tab，本该立刻生成一份完整的HTML5骨架文档。如果没动静，别急着怀疑人生，先按顺序排查下面这三个地方：

• 右下角的语言模式：看看状态栏右下角显示的是什么？必须是HTML才行。如果显示的是Plain Text（纯文本）或者Ja vaScript，Emmet是不会工作的。直接点击那里手动切换成HTML。
• 文件是否已经保存：对于还没保存过的新建临时文件，VSCode常常会将其识别为纯文本模式，导致Emmet失效。先按Ctrl+S保存一下，问题可能就解决了。
• 光标位置是否合适：光标必须位于空行，或者是在已有的HTML标签外部。如果你把光标放在
  标签内部，或者结束标签的后面，按Tab自然不会有反应。

顺带一提，以前常用的html:5或html5缩写现在已经废弃了，统一使用!。另外，生成的骨架中默认是英文，如果需要中文，手动改成lang="zh-CN"即可。

div.container>ul>li*3 展不开？确认触发键和上下文

像div.container>ul>li*3这类多层嵌套的复杂缩写展不开，问题往往出在触发方式和编辑上下文上。可以对照以下几点检查：

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

• 触发键是Tab，不是Enter：这是最容易被忽略的一点。VSCode默认只响应Tab键来触发Emmet展开，按回车是没用的。
• 光标别卡在属性值里：想象一下，如果你正在编写
  （|代表光标），此时按Tab，VSCode会尝试补全class名称，而不是展开Emmet缩写。
• 确保不在脚本或样式块中：Emmet只作用于HTML模板上下文。在