可以实现,但前提是同时满足三个关键条件:插件装对、设置开启、样式路径配置正确。大多数自动补全失效的原因,并不是 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 样式文件。
