CSS BEM命名在VS Code里如何实现自动补全

可以实现，但前提是同时满足三个关键条件：插件装对、设置开启、样式路径配置正确。大多数自动补全失效的原因，并不是 VS Code 本身有问题，而是 editor.suggest.showClasses、editor.quickSuggestions.strings 没有设置为 true，或者 css.styleSheets 没有明确指定扫描路径。

答案是可以，但必须同时满足三个硬性前提：安装正确的插件、开启对应的编辑器设置、配置好样式文件路径，这三项缺一不可。

为什么装了 IntelliSense for CSS class names in HTML 还没有提示？

出现补全失效，通常不是插件本身的问题，而是配置项遗漏导致：

• editor.suggest.showClasses 没有设为 true → CSS 类名不会出现在 VS Code 的补全候选列表中
• editor.quickSuggestions.strings 没有设为 true → 在 class="" 双引号内部输入时不会自动弹出建议（注意：这是 editor.quickSuggestions 对象下的子字段，不能直接把 editor.quickSuggestions 设置成布尔值）
• css.styleSheets 没有在 settings.json 中显式声明 → 插件无法识别去哪里扫描 CSS/SCSS 类名，例如："css.styleSheets": ["src/**/*.scss", "styles/**/*.css"]

为什么输入 card 不会提示 card__header？

这是因为该插件并不支持前缀级的模糊联想，而是基于完整类名进行索引匹配：

• 输入 card → 不会触发任何 BEM 类名补全
• 输入 card__ → 才会列出所有以 card__ 开头的元素类，比如 card__header、card__body
• 输入 card-- → 会显示所有以 card-- 开头的修饰符类，比如 card--featured
• SCSS 里的 &__header 写法不会被直接解析，插件只能识别编译后实际存在于 CSS 中的类名字串

Emmet 的 BEM 模式和 class 补全不是一回事

不要以为开启 Emmet 后，就能在 class="" 中自动补全 BEM 命名类：

• Emmet 的 "emerald.emmet.bem": true 配置只影响缩写展开，例如 .card>div.__title →

• 它不会参与 HTML 属性里现有 class 值的智能提示或自动补全
• Emmet 的 BEM 解析依赖当前光标上下文：只有在 .card 元素内部输入 .__item，才可能推导出 card__item；如果在顶层直接输入，则不会生效
• 旧版的正则触发片段（例如 & 触发）已经废弃，匹配效果不稳定，不建议继续使用

从实际使用来看，VS Code 里 BEM 类名自动补全的核心难点，始终集中在样式路径配置和上下文识别上。尤其是在 monorepo 项目中，css.styleSheets 往往需要写成绝对路径，或者通过符号链接补齐引用关系，否则插件根本无法扫描到跨包的 CSS 或 SCSS 样式文件。