vs code默认不补全bem类名，需装intellisense for css class names in html插件、开启editor.suggest.showclasses和editor.quicksuggestions.strings设置、并在settings.json中显式配置css.stylesheets路径三者缺一不可。
VS Code 默认不补全 BEM 类名，装插件 + 开设置 + 配路径，三步缺一不可。
为什么 card__header 在 class 属性里敲 card 不出提示？
BEM 类名不是靠“前缀匹配”触发的，IntelliSense for CSS class names in HTML 插件只做完整类名索引，不会把 card__header 拆成 card + __header 去联想。它只在你输入 card__ 时，才从已扫描的 CSS 文件中找以该字符串开头的类。
- 输入
card→ 不会列出card__header、card--active - 输入
card__→ 列出所有card__*element 类 - 输入
card--→ 列出所有card--*modifier 类 - 插件不解析 SCSS 的
&__header语法，只认最终生成的 CSS 类名（即编译后实际存在的字符串）
装哪个插件？只用 IntelliSense for CSS class names in HTML
别堆砌插件——Tailwind CSS IntelliSense 对 button__icon 这类 BEM 类完全无感；BEM Tools 或 BEM Helper 只负责生成模板，不参与 HTML class 补全；Auto Rename Tag 是改名用的，和补全无关。
- 必须装
IntelliSense for CSS class names in HTML（GitHub 星标超 3.5k，维护活跃） - 它支持
.css、.scss、.less，能正确处理@import和@use - 不支持 JS 动态生成的类（如
clsx("card", isHovered && "card--hovered")），只索引静态声明 - 如果项目混用 Tailwind，可以共存
Tailwind CSS IntelliSense，但不要让它接管 class 补全逻辑
关键设置必须手动开，否则插件等于没装
装完插件只是开始，以下三项设置漏掉任何一项，class="" 里都看不到提示：
-
editor.suggest.showClasses→ 设为true（让类名出现在补全候选列表） -
editor.quickSuggestions.strings→ 设为true（让双引号内自动触发建议，不是按 Ctrl+Space 才有） -
css.styleSheets→ 在settings.json中显式声明路径，例如："css.styleSheets": ["src/**/*.scss", "styles/**/*.css"]
，monorepo 中需写绝对路径或加符号链接
注意：editor.quickSuggestions 是对象，不能直接设布尔值；strings 是其子字段，单独控制 HTML 字符串上下文。
补全失效？先查这三件事
常见卡点不在插件本身，而在路径和上下文：
- CSS 文件没被
link引入，且未列入css.styleSheets路径 → 插件根本读不到类名 - HTML 文件后缀是
.htm或无后缀 → VS Code 识别为 Plain Text，跳过 HTML 语言服务 - 写了
class="button .button--primary"→ 点号非法，浏览器静默丢弃后面部分，插件也无从索引 - SCSS 中用了深度嵌套（如
.card { &__header { &:hover { ... } } }）→ 编译后类名存在，但插件只索引最终输出，不关心嵌套层级
BEM 补全真正难的不是“怎么让编辑器认出 __”，而是确保所有 card__header 确实存在于某个被扫描的 CSS 文件里——手写错一个下划线、大小写不一致、或者文件没保存，补全都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
