emmet在vscode中默认启用,但缩写不展开主因是语言模式错误(需右下角显示html)、光标位置不当(须在行尾或紧贴缩写)或tab键被插件劫持。

Emmet 在 VSCode 里默认就开着,但绝大多数“没反应”问题都出在语言模式、光标位置或 Tab 键被劫持——不是语法不会写,而是环境没对。
HTML 缩写不展开?先盯右下角语言模式和光标位置
常见现象:ul>li*3 按 Tab 没反应,或只换行不生成结构。
- 右下角状态栏必须显示
HTML(不是Plain Text、JavaScript或Vue);点它手动切一次最稳 - 光标必须在行尾、或紧跟在
后面(如 <code><div.container></div.container>中的.前),不能卡在属性值中间、注释里、JS 字符串内 - 新建未保存文件(无后缀)默认是
Plain Text,哪怕内容全是 HTML,Emmet 也不触发;先存为.html再试 -
!只在空的首行生效,且必须是HTML模式;输完直接按Tab,不是Enter
CSS 缩写按 Tab 没反应?检查是否在声明值位置
CSS Emmet 不补全选择器,只补全属性值,而且只在冒号 : 后、分号 ; 前响应。
- 正确流程:先写
margin:→ 换行或空格 → 输入m10→ 按Tab→ 得到margin: 10px; -
m10本身合法,但mt10才是margin-top: 10px;;w100是width: 100px;,w100p才是width: 100%; - 在
.vue文件的<style></style>块中,需确认设置中有"emmet.syntaxProfiles": {"vue-html": "html"},否则可能识别为普通文本 - 输入
bgc可能弹出多个候选(background-color/border-bottom-color),用方向键选再按Tab
JSX/TSX、Vue 等非标准文件里 Emmet 失效?靠 emmet.includeLanguages 接入
VSCode 默认只对 html 和 css 启用 Emmet,其他语言需显式映射。
- JSX/TSX 文件中写
div.container没反应?在设置中搜emmet.includeLanguages,加一行:"javascript": "javascriptreact" -
.vue的<template></template>默认支持,但<style></style>块需额外配置:"vue": "html"(对应模板)+"vue-html": "html"(确保语法解析正确) - 改完设置后必须重载窗口(
Ctrl+Shift+P→Developer: Reload Window),热更新不生效 - 别碰
emmet.extensionsPath,这是旧版遗留项,2026 年已弃用
自定义缩写总不生效?优先用 emmet.variables,别硬改 JSON 结构
想让 flex 展开为 display: flex; justify-content: center;?别直接改 emmet.json,风险高还易失效。
- 安全做法:在
settings.json中加"emmet.variables": {"flex": "display: flex; justify-content: center; align-items: center;"} - 变量值必须是合法 CSS 字符串,引号要转义:
"myheader": "<header class='\"site-header\"'></header>" -
emmet.snippets更适合加整段 HTML 片段,但格式复杂;日常够用的场景,variables足够且稳定 - 所有自定义配置改完后,必须重载窗口,否则编辑器仍读缓存
真正容易被忽略的是:Emmet 在不同嵌套层级下行为不同——比如在 <div> 标签内部写 <code>ul>li*3,它可能当成文本插入而非结构展开;离开标签上下文再试,往往就通了。











