PostCSS Language Support 是唯一能实时高亮识别 BEM 语法的插件，将 .card__header--dark 视为合法标识符高亮，拼错则灰显；Stylelint 官方插件 + stylelint-selector-bem-pattern 才能真正拦截违规类名；IntelliSense 补全严格按前缀匹配且需手动配置。
PostCSS Language Support 是唯一能实时高亮识别 BEM 语法的插件
它不报错、不补全，但把 .card__header--dark 当作合法标识符高亮，而拼错成 .card_header--dark 或 .card__header-dark 时会灰显——这是最轻量也最可靠的视觉反馈。其他插件要么只做字符串匹配（如 IntelliSense），要么依赖 lint 规则（如 Stylelint），唯独它靠语法解析直接响应 __ 和 -- 的语义边界。
必须注意：
- 它只作用于 CSS/SCSS/Less 文件中的静态类名声明，&__header 这类预处理器语法不会被识别
- 在 Vue/React 的模板或 JSX 中写 class="card__content" 可被高亮，但动态拼接如 :class="['card', `${base}__body`]" 就完全失效
- 不校验 block 是否真实存在，也不管 .card__footer 是否在 HTML 中出现过
Stylelint 官方插件 + stylelint-selector-bem-pattern 才能真正拦截违规类名
装了插件但没配规则等于白装。stylelint-selector-bem-pattern 必须在 .stylelintrc.js 中显式启用，并且三项参数缺一不可：preset: 'bem'、componentName: '[a-z][a-zA-Z0-9]+'、ignoreSelectors（至少排除 /^\..+:(hover|focus)$/ 和 /^\.js-/）。
常见失效场景：
- 漏掉 componentName，.BtnPrimary 或 .user-list 都不会报错
- 把 preset 写成 'suit' 或 'css-modules'，规则直接不加载
- 用 selector-class-pattern 替代它——那只匹配字符串，拦不住 .card-footer 这种连字符写法
- 在 CI 中漏掉 npx stylelint "**/*.{css,scss}"，本地报错对合并无约束力
IntelliSense for CSS class names in HTML 负责补全，但触发逻辑很具体
它不是输入 card 就弹出所有相关类，而是严格按前缀匹配：
- 输入 card__ → 列出所有 card__* 元素类
- 输入 card-- → 列出所有 card--* 修饰符类
- 输入 card → 默认不触发，除非你开了 editor.suggest.showClasses 并且项目里真有 .card 这个块名
关键设置必须手动加进 settings.json：
- "editor.suggest.showClasses": true
- "editor.quickSuggestions.strings": true（注意不是 editor.quickSuggestions: true）
- "css.styleSheets": ["src/**/*.scss", "styles/**/*.css"]，monorepo 中路径必须绝对或带符号链接
别碰“BEM 自动补全”类插件，它们制造假安全感
像 BEM Helper、BEM Tools 这类插件，会在你输 card__ 后自动补全 card__header--large，但它们：
- 完全不校验 card 是否已定义为 block
- 把 card__header__title 当作合法推荐，实际违反 BEM 不嵌套元素的原则
- 不识别 SCSS 的 &__header { &--large { } } 结构，只索引最终生成的 CSS 字符串
- 在 Vue/React 动态类名场景下彻底失能，比如 className={clsx('card', isLarge && 'card--large')}
真正安全的做法是把 block 名抽成常量：const BLOCK = 'card'，再写 ${BLOCK}__header——至少让 IDE 的重命名和搜索功能联动，而不是靠插件“猜”你想要什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
