Sublime Text 需通过 Package Control 安装官方 Emmet 插件并重启才能启用；CSS 缩写需确保语法为 CSS、Tab 在正确位置触发，并通过用户设置添加自定义 snippet（如 df→display: flex）及为 SCSS/Less 手动绑定键位。
Sublime Text 本身不自带 Emmet，但通过 Package Control 安装后，它就能原生支持 HTML、CSS、JS 等语法的快速展开——不过默认对 CSS 的缩写支持有限，比如 mt10 不会自动转成 margin-top: 10px;，得靠自定义语法补全。
用 Package Control 正确安装 Emmet
别去 GitHub 下 zip 手动解压，容易漏依赖或版本不匹配。正确路径是：
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），调出命令面板 - 输入
Install Package，回车，等待列表加载完成 - 搜
Emmet，选中官方维护的Emmet（作者：sergeche），回车安装 - 安装完重启 Sublime —— 不重启的话，
Tab展开可能不生效
验证是否成功：新建一个 .html 文件，输入 ul>li*3，按 Tab，应立刻生成带 3 个 <li></li> 的无序列表。
CSS 缩写不生效？检查语法模式和触发设置
Emmet 对 CSS 的支持默认只在 CSS 语法模式下激活，且需满足两个条件：
立即学习“前端免费学习笔记（深入）”；
- 当前文件右下角状态栏显示的是
CSS（不是Plain text或SCSS）；如果不是，点击它 →Set Syntax → CSS -
Tab键必须在行末、冒号后或空格后触发，例如：mt10后面跟空格或直接按Tab，才会展开；写成mt10px则不识别 - 确认
Preferences → Package Settings → Emmet → Settings中没有禁用css语法支持
常见失败现象：df 按 Tab 没反应 → 实际上 Emmet 默认不把 df 当 display: flex，这是自定义范畴。
给 CSS 添加自定义缩写（如 df → display: flex）
Emmet 的 CSS 缩写规则存在两层：内置规则（不可改） + 用户自定义规则（可扩展）。要加 df、jcse 这类简写，必须编辑用户配置：
- 菜单栏打开
Preferences → Package Settings → Emmet → Settings – User - 填入如下结构（注意逗号和括号闭合）：
{
"preferences": {
"css.snippets": {
"df": "display: flex;",
"jcc": "justify-content: center;",
"aic": "align-items: center;",
"mt@": "margin-top: ${1:0}px;"
}
}
}
保存后无需重启，新缩写立即可用。注意：${1:0} 表示光标停在 0 处可编辑，@ 是 Emmet 的“参数占位符”语法，不是所有字符都支持，仅限数字单位类属性（如 mt@、pl@）。
为什么有些缩写在 .scss/.less 文件里不工作？
Emmet 默认只绑定 CSS 语法模式，SCSS 和 Less 是独立语法包，需要显式启用：
- 打开
Preferences → Package Settings → Emmet → Key Bindings – User - 添加以下键位映射（让
Tab在 SCSS 文件中也触发 Emmet）：
[
{
"keys": ["tab"],
"command": "emmet_expand_abbreviation",
"context": [
{
"operand": "source.css.scss",
"operator": "equal",
"match_all": true,
"key": "selector"
}
]
}
]
其中 source.css.scss 是 SCSS 的语法作用域名，可通过 Ctrl+Shift+P → Show Scope Name 查看当前文件真实 scope。Less 同理，换成 source.css.less 即可。
自定义缩写和语法绑定这两步漏掉任意一个，CSS 快速编写就只剩一半效率。很多人卡在“装了 Emmet 却写不出 df”，其实问题不在插件，而在没配 CSS snippet 或没切对语法模式。
