本文介绍如何在 emmet 中启用 bem 模式，实现类似 `.parent__child` 的智能类名补全，自动生成符合 scss 嵌套结构的 html 元素，大幅提升组件化开发效率。
Emmet 内置的 BEM（Block-Element-Modifier）处理支持，正是解决此类需求的标准方案——它无需手动编写复杂正则片段，即可让 . 语法自动识别并继承父级上下文，生成语义清晰、SCSS 友好的嵌套类名结构。
✅ 正确启用方式（现代 Emmet v2+）
⚠️ 注意：旧版 Emmet 文档中提到的 bem 过滤器（如 |bem）已废弃；当前主流编辑器（VS Code、WebStorm、Sublime Text 等）均通过 配置项启用 BEM 模式，而非自定义 snippet。
1. VS Code 中启用 BEM 支持
在 settings.json 中添加：
"emerald.emmet.bem": true, // 或（取决于 Emmet 插件版本） "emerald.emmet.bemEnabled": true
? 推荐使用官方 Emmet 插件（已内置），无需额外安装扩展。若未生效，请确认插件为最新版（v2.0+）。
2. 使用方法：零配置即用
输入以下任意写法，回车即可生成对应 BEM 结构：
| 输入 | 输出 HTML | 说明 |
|---|---|---|
| .parent | 基础块（Block） | |
| .parent__child | 自动推导父块名为 parent，生成元素（Element） | |
| .parent__child--hover | 同时支持修饰符（Modifier） | |
| .parent>.parent__child | 显式父子关系，确保上下文准确 |
✅ 示例工作流（SCSS + HTML 协同）：
// styles.scss
.parent {
&__child { color: blue; }
&__child--hover { color: red; }
}<!-- 在 .parent 元素内输入 .parent__child → 自动补全 --> <div class="parent"> <div class="parent__child"></div> <!-- ✅ 类名严格对齐 SCSS 嵌套 --> </div>
❗ 常见误区与注意事项
- 勿尝试正则 snippet 替代 BEM 模式：问题中提供的正则表达式依赖过时的 $TM_CURRENT_LINE 和不兼容的捕获语法，在现代 Emmet 中无法解析，且易出错、难维护。
- BEM 模式依赖上下文推断：Emmet 会自动向上查找最近的 .block-name 类名作为父块；若需强制指定父级，建议用显式嵌套（如 .block>.block__elem）。
- 命名一致性是前提：BEM 生效要求 HTML 类名严格遵循 block, block__element, block--modifier 格式，避免混合下划线/短横线或大小写混用。
✅ 总结
启用 Emmet 的原生 BEM 支持，是实现 SCSS 嵌套开发中 HTML 类名自动继承最稳定、最轻量、最符合工程规范的方案。它消除了手写冗余类名的负担，确保 HTML 与 SCSS 结构天然同步，是现代前端组件化工作流中不可或缺的一环。立即启用，让 .parent__child 成为你的下意识输入。
