VSCode怎么配置Emmet语法快速编写HTML
作者：吹吹风会发光
时间：2026-07-11
浏览：0
VSCode内置Emmet且默认开启，HTML缩写不展开需检查语言模式是否为HTML、文件后缀为.html、光标位于行尾；CSS缩写仅在属性值位置生效，通过includeLanguages可支持Vue/JSX文件，常见问题源于语言模式未切换或Tab被插件劫持。
写HTML的时候，Emmet突然失效了？别急着翻设置，先检查这几个地方，往往比折腾settings.json更快解决问题。
先说清楚一点：VSCode 1.40及以上版本已经内置了Emmet支持，emmet.enable默认就是打开的，根本不需要额外安装插件或者手动开启。你敲div.container然后按Tab没反应，大概率不是配置的问题，而是环境没对上。先盯住右下角的语言模式和光标位置，这两个地方出问题的概率最高。
HTML缩写不展开？先确认这三件事
经常遇到的情况是：ul>li*3按Tab只换行、不生成结构。这时候需要检查三个要点：
- 右下角状态栏必须显示为HTML（而不是Plain Text、Vue或Ja vaScript），点它手动切换一次最稳妥
- 文件必须已经保存，并且后缀是.html或.htm；新建的临时文件经常被识别为纯文本，Emmet不会触发
- 光标必须位于行尾，或者紧贴着缩写末尾（
div.container|是有效的，但div .container|中间多了空格就会解析失败）
CSS缩写按Tab没反应？只在声明值位置生效
这一点容易被忽略：CSS Emmet不补全选择器，只补全属性值，而且只会在冒号后面、分号前面响应。正确的操作流程是：先写margin:，然后换行或者加个空格，输入m10，再按Tab，就能得到margin: 10px;。
一些常用缩写示例：m10是合法写法，但mt10才是margin-top: 10px;；w100p对应width: 100%;，w100则对应width: 100px;。另外，如果在.vue文件的