本文详解如何在现代 emmet（v2+）中启用 bem 模式，通过 &__element 和 &--modifier 语法快速生成符合 scss 嵌套规范的 html 结构，大幅提升组件化开发效率。
Emmet 原生支持 BEM（Block–Element–Modifier）语义化类名生成，但并非通过自定义 snippet 实现，而是依赖内置的 BEM 处理器。早期文档中提到的 bem 过滤器（如 |bem）已废弃；当前（Emmet v2 及主流编辑器插件，如 VS Code 的 Emmet 扩展、WebStorm 内置 Emmet）采用更简洁、侵入性更低的 BEM 模式开关机制——只需启用配置，即可直接在缩写中使用 & 符号继承父级块名。
✅ 正确启用方式（以主流编辑器为例）
-
VS Code：打开设置（Settings → Extensions → Emmet），搜索 Emmet: Options，在 Edit in settings.json 中添加：
"emerald.options": { "bem": true }⚠️ 注意：实际键名为 "emerald" 是旧版误传；正确应为 "emmet"。推荐直接在 settings.json 中添加："emmet.preferences": { "bem.enabled": true }
WebStorm / IntelliJ 系列：Settings → Languages & Frameworks → Emmet → HTML → 勾选 Enable BEM actions。
-
Sublime Text（Emmet 插件）：修改 Emmet.sublime-settings，添加：
立即学习“前端免费学习笔记（深入）”；
"preferences": { "bem.enabled": true }
启用后，即可在 HTML 文件中直接使用以下语法：
? 实际编码示例
输入：
.parent>.parent__child
→ 展开为：
<div class="parent"> <div class="parent__child"></div> </div>
更强大的是结合 & 继承符号（无需重复书写块名）：
.parent>div&__child+div&__content+div&--disabled
→ 展开为：
<div class="parent"> <div class="parent__child"></div> <div class="parent__content"></div> <div class="parent--disabled"></div> </div>
你甚至可在嵌套中链式使用：
.card>.card__header>h3&__title+.card__body>p&__text
等价于：
<div class="card">
<div class="card__header">
<h3 class="card__header__title"></h3>
<div class="card__body">
<p class="card__body__text"></p>
</div>
</div>
</div>✅ 提示：& 总是继承最近的上级块（block），即离它最近的、带明确类名的标签（如 .card、.parent）。若需跨层级继承，建议保持结构扁平或拆分缩写。
❗ 重要注意事项
- 文件类型上下文敏感：BEM 模式仅在 html、htm、vue（template 区域）、jsx/tsx（部分支持）等支持 Emmet 缩写的语言模式下生效；纯 scss 或 css 文件中不触发。
- 不要手动写正则 snippet：问题中尝试的正则表达式（如 "$TM_CURRENT_LINE/^\.(.*?)&..."）不仅复杂难维护，且与 Emmet v2 的解析引擎不兼容。BEM 是核心功能，非 hack 方案。
-
SCSS 嵌套友好性：生成的类名可直接对应 SCSS 的嵌套写法：
.parent { &__child { /* ... */ } &__content { /* ... */ } &--disabled { /* ... */ } }二者命名完全对齐，避免手误和维护断裂。
✅ 总结
与其费力调试不可靠的自定义 snippet，不如启用 Emmet 官方支持的 bem.enabled 选项——它轻量、稳定、语义清晰，并深度适配现代前端工作流。开启后，&__xxx 成为编写 BEM 风格 HTML 的标准快捷键，让结构与样式真正“同源同构”，显著提升 SCSS 组件化开发的一致性与可持续性。
