本文详解如何在现代 emmet（v2+）中启用并正确使用 bem 过滤器，实现 `.parent__child` 等嵌套类名的智能生成，大幅提升 scss/bem 项目中的 html 编写效率。
Emmet 原生不支持 .&__child 这类“继承父级类名”的自定义 snippet 语法（如问题中尝试的正则替换方案），但官方提供了更强大、语义更清晰的替代方案：BEM 过滤器（bem filter）。该功能专为 BEM（Block Element Modifier）命名规范设计，可自动推导并补全 block__element 和 block--modifier 结构，完美匹配 SCSS 中的嵌套写法（如 .parent { &__child { ... } }）。
✅ 正确启用 BEM 支持（以主流编辑器为例）
BEM 过滤器在 Emmet v2+ 中默认禁用，需手动开启：
-
VS Code：打开设置（Ctrl+, / Cmd+,）→ 搜索 emmet bem → 勾选 Emmet: Bem（或在 settings.json 中添加）：
"emmet.bem": true
- WebStorm / IntelliJ：Settings → Editor → Emmet → HTML → 勾选 Enable BEM actions。
-
Sublime Text（Emmet 插件）：修改 Emmet.sublime-settings，添加：
"bem": true
⚠️ 注意：旧版 Emmet 文档中提到的 |bem 语法（如 div.parent|bem）已废弃；当前版本仅需全局启用 bem 选项，后续所有 .class 缩写将自动激活 BEM 行为。
✅ 实际使用：3 种高频场景示例
启用后，在 HTML 文件中直接输入以下缩写，按 Tab 即可生成符合 BEM 规范的结构：
| 输入缩写 | 生成结果 | 说明 |
|---|---|---|
| .parent | <div class="parent"></div> | 基础块（Block） |
| .parent__child | <div class="parent__child"></div> | 元素（Element），自动继承 parent 块名 |
| .parent--theme-dark | <div class="parent--theme-dark"></div> | 修饰符（Modifier），双连字符语法 |
更进一步，结合嵌套语法可快速构建完整结构：
立即学习“前端免费学习笔记（深入）”；
.parent>.parent__header+.parent__body>.parent__item*3
→ 生成：
<div class="parent">
<div class="parent__header"></div>
<div class="parent__body">
<div class="parent__item"></div>
<div class="parent__item"></div>
<div class="parent__item"></div>
</div>
</div>❌ 常见误区与注意事项
- 不支持动态父级推导：BEM 过滤器不会回溯解析上一行的 .parent 作为上下文（即无法实现问题中设想的“光标在下一行输入 .&__child 自动补全为 parent__child”）。它仅基于当前缩写字符串解析 __ 和 --。
- 作用域限制：BEM 仅对 .class 缩写生效，#id 或标签名缩写（如 div.parent）不受影响。
-
SCSS 同步建议：为保障一致性，推荐在 SCSS 中严格遵循 BEM 命名，并利用 & 引用父选择器：
.parent { &__child { color: blue; } &--compact { padding: 4px; } } - 避免混用：勿将 BEM 过滤器与自定义正则 snippet 混合使用——后者易出错且不可维护（如问题中失败的 JSON 正则方案）。
✅ 总结
与其尝试复杂且不可靠的自定义 snippet，不如直接启用 Emmet 官方维护的 bem 过滤器。它轻量、稳定、语义明确，且与主流编辑器深度集成。只需一次配置，即可在日常编码中通过直观的 .block__element 语法，获得与 SCSS BEM 嵌套完全对齐的 HTML 结构，显著提升组件化开发体验。
