VSCode怎样使用Emmet加速HTML/CSS编写？【教程】_网络技术

发布时间 - 2026-01-25 00:00:00 点击率：次

VSCode 默认支持 Emmet，但需确保文件语言模式正确（如 HTML）、启用对应语言的
Emmet 支持（如 JSX 需配置 includeLanguages），并遵循官方 CSS 缩写规则（如 d:f ✅，flex ❌）。

VSCode 默认就支持 Emmet，不需要额外安装插件，但必须确保文件类型识别正确、语法启用到位，否则 Tab 或 Enter 按下后毫无反应——这是最常被误认为“Emmet 不工作”的原因。

根本原因通常是 VSCode 没把当前文件当成 HTML/CSS 处理：

检查右下角状态栏，确认语言模式是 HTML（不是 Plain Text 或 JavaScript）；点击它可手动切换
如果是 .vue 或 .svelte 文件，需在设置中启用对应语言的 Emmet 支持："emerald: true 无效，应查 emmet.includeLanguages
某些自定义文件扩展名（如 .tpl）需显式映射："emmet.includeLanguages": {"tpl": "html"}
禁用其他干扰插件（如某些 snippet 插件会劫持 Tab 行为）

Emmet 的 CSS 缩写有固定规则，并非所有简写都支持。它只认官方预设的缩写词，比如：

JSX 默认不启用 Emmet，因为标签语法和 HTML 有差异（如 className 替代 class），但可以安全开启：

打开设置（Ctrl+,），搜索 emmet includeLanguages
添加配置："emmet.includeLanguages": {"javascriptreact": "html", "typescriptreact": "html"}
注意：此时 div.container 会展开为，不是 class=
若想用 cls 缩写生成 className，需额外配置 emmet.variables，但原生不支持，建议直接用 cn + 自定义 snippet

Emmet 最容易被卡住的地方，其实是语言模式和缩写边界——它不报错，只是沉默，所以第一反应不该是重装插件，而是看右下角那个小标签。