Sublime如何快速生成HTML骨架 Sublime安装Emmet插件应用【攻略】

Sublime 里输入 ! 或 html:5 按 Tab 就能生成 HTML5 骨架，这事儿听起来简单，但前提是 Emmet 必须启用，而且当前文件语法得是 HTML。这两点没满足，再熟的快捷键也白搭。

为什么 ! 按 Tab 没反应？

最常见的原因，其实特别简单——当前文件压根没被识别成 HTML 语法。你瞅瞅右下角状态栏，如果显示的是 Plain Text、Ja vaScript 或者 HTML (Twig)，那 Emmet 就直接罢工了，根本不会触发任何缩写。

• 点右下角语法名，选 HTML（注意是纯 HTML，不是带括号的衍生语法）
• 或者按 Ctrl+Shift+P，搜 Set Syntax: HTML，回车
• 文件后缀是 .html 最保险，.htm 或 .shtml 默认不绑定 HTML 语法，得手动映射一下
• 检查 Preferences → Package Settings → Emmet → Settings，确认 syntax_profiles 里 html 是 true

! 和 html:5 有啥区别？

! 是 Emmet 内置的简写别名，等价于 html:5，输出结果完全一样。但实际用起来，! 这个写法更干脆，敲起来顺手，而且不容易按错。html:5 在旧版配置里偶尔会失效，或者被自定义 snippet 冲突干扰。

• ! 默认生成 lang="en"，如果需要中文，手动改成 lang="zh-CN"
• html:5 在 Sublime Text 4 里还能用，但 VSCode 已经废弃了，建议统一用 !
• 如果改过 Emmet 的 snippets.json，把 ! 映射成其他内容了，那 ! 就不再等价于 HTML5 骨架了

生成的骨架缺 怎么办？

不会缺——正常情况下 ! 输出的骨架一定包含这行。如果没出现，说明你触发的不是 Emmet 的 !，而是 Sublime 自己的原生 snippet——也就是输入 html 后按 Tab 那个。

• 原生 html + Tab：只生成 ，没有 meta
• Emmet ! + Tab：必定含 、、 $0]]> html text.html.basic
  • 保存为 Packages/User/html.sublime-snippet
  • 之后输入 html + Tab 就会触发新结构，! 仍走 Emmet，互不干扰
  • 关键点： 必须是 text.html.basic，写成 text.html.vue 或留空都无效

  真正容易被忽略的，其实不是怎么写 snippet，而是 scope 的匹配精度。它必须和当前文件的实际语法 scope 完全一致，差一个字符，代码块就永远不会弹出来。这才是关键。