HTML缩写不展开，主因是语言模式错误或光标位置不当：右下角非HTML模式需手动切换；未保存文件默认为纯文本；光标须在标签外或>后，不可在属性值内；Vue/JSX需配置emmet.includeLanguages并重载窗口。

HTML 缩写不展开？先看语言模式和光标位置

Emmet 在 VSCode 里默认就工作，但只对正确 language mode 生效。敲 ul>li*3 按 Tab 没反应，90% 是因为当前文件没被识别为 HTML。

• 右下角状态栏显示 Plain Text 或 CSS → 点击它，选 HTML
• 新建文件未保存、无 .html 后缀 → VSCode 默认当纯文本处理，缩写不触发
• 光标卡在 <div class="|"> 这类属性值内部 → Emmet 不会展开结构，移到标签外或 <code>> 后再试
• 在 <script></script> 或 <style></style> 块里输入 HTML 缩写 → 默认不生效，Emmet 只作用于模板上下文

CSS 缩写 m10 为什么不出 margin: 10px;

m10 是合法缩写，但它只在 CSS 作用域内生效，且必须满足两个硬性条件：语言模式为 CSS，光标位于声明值位置（即冒号后、分号前）。

• 在 .css 文件中，输入 m10 后光标必须在 margin: 后面，不能在选择器或注释里
• 在 Vue 的 <style> 块中，需确保语言模式是 css（不是 vue），否则不识别
• m10 默认单位是 px；要输出 % 得写 w100p，h50em 才会带 em
• 注意前缀规则：mt10 ✅（margin-top），m10 ❌（新版 VSCode 默认禁用通用简写，改用更明确的属性前缀）

Vue / JSX 文件里 Emmet 不工作？补配置就行

Vue 单文件组件的 <template> 和 <style> 块默认不触发 Emmet，JSX 文件则完全不支持，除非手动关联。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 打开设置（Ctrl+,），搜 emmet.includeLanguages，添加：
• {"vue": "html", "javascriptreact": "html", "typescriptreact": "html"}
• 改完必须重载窗口（Ctrl+Shift+P → Developer: Reload Window），否则不生效
• 别碰 emmet.extensionsPath —— 新版已弃用，设了反而让 Emmet 失效

自定义缩写别乱改 emmet.json，用 variables 最安全

想让 myheader 展开成特定 HTML 片段，不要直接覆盖核心配置，优先走 emmet.variables。

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

• 在 settings.json 中加：
• "emmet.variables": {"myheader": "<header class=\"site-header\"></header>"}
• 变量值必须是合法 HTML 字符串，引号要用反斜杠转义，< 和 > 不能省略
• 如果需要多行结构或动态内容，用 emmet.snippets 更合适，例如：
• {"html": {"cc": "console.log('${1:data}');${0}"}} → 在 HTML 文件中输 cc+Tab 插入日志
Emmet 的核心限制其实就两条：语言模式必须匹配，光标必须落在可展开的位置。很多人反复调设置却忽略这两点，结果越配越乱。真正难的不是语法，而是判断当前到底处于哪个上下文——比如在 Vue 的 <script setup> 里敲 div，永远展不开。