vs code 中能实时提示 bem 错误的插件只有两类：postcss language support（高亮识别__/--语法，拼错即灰显）和 stylelint 官方插件（配合selector-class-pattern或stylelint-selector-bem-pattern规则实现报错定位），其余如 bem snippets、bem helper 等纯模板或自动补全类插件不校验合规性，无法防错。
VS Code 里哪些插件能实时提示 BEM 错误？
VS Code 自身不校验 BEM，必须靠语言服务器或 lint 插件介入。真正有用的只有两类：PostCSS 语法支持类（高亮识别 __ 和 --）、Stylelint 集成类（报错定位）。别装“BEM Snippets”这种纯模板插件——它只帮你打字快，不防错。
-
PostCSS Language Support：唯一值得开的语法插件。它把.card__header--dark当作合法标识符高亮，而不是当成普通字符串；拼错成.card_header--dark时会灰掉，一眼可见 -
Stylelint官方插件：必须配合.stylelintrc.js里的selector-class-pattern或stylelint-selector-bem-pattern规则才生效。没配规则，它只是个空壳 - 禁用所有“BEM 自动补全”类插件（如
BEM Helper），它们常把card__body__title当合法推荐，实际违反 BEM 嵌套原则
为什么 EditorConfig + Prettier 对 BEM 没用？
EditorConfig 管缩进和换行，Prettier 格式化 CSS 块顺序和空格——它们都不碰类名结构。你写 .btn-primary 还是 .button--primary，它们完全不管。指望它们 enforce BEM 是方向性错误。
-
editorconfig文件里加indent_style = space不会影响__是否被允许 -
prettier的cssDeclarationSorter插件只排属性顺序，不校验类名是否符合block__elem - 真要约束命名，唯一路径是 Stylelint 的
selector-class-pattern规则 + VS Code 的stylelint.showRuleDescription开启
Vue / React 单文件组件里怎么让 BEM 提示不失效？
在 <template></template> 或 JSX 里写 class="card__content" 能被 PostCSS 插件识别；但一旦写成动态拼接，比如 :class="['card', `card--${size}`]"，所有编辑器插件立刻失能——因为这是 JS 字符串运行时生成，不是静态 CSS 类名。
- Vue SFC 中，
<style scoped></style>内的.card__header可被 PostCSS 插件高亮，但<template></template>里的动态类名不会触发任何提示 - React 中
className={clsx('button', `${base}--${mod}`)}同样绕过所有 BEM 校验，Stylelint 插件只扫描.css/.scss文件，不解析 JS 字符串 - 安全做法：把块名提取为常量，例如
const BLOCK = 'card'，再用${BLOCK}__header，至少能让 IDE 的字符串搜索和重命名功能联动
别信“一键转换类名”的插件
市面上所谓“Convert to BEM”插件，基本是正则替换，比如把 btnPrimary → btn--primary。它无法判断这个 btn 是否真实存在 Block 定义，更不会检查 btn__icon 是否已在 CSS 中声明——结果就是生成一堆无意义、不可维护的类名，后续 Stylelint 报错反而更多。
- 真实项目里，BEM 结构必须和 DOM 组件边界对齐，这不是文本替换能解决的
- 批量改名请用
sed或 VS Code 多光标 + 正则查找，但务必先跑一遍npx stylelint "**/*.{css,scss}"确认旧类名范围 - 最易被忽略的一点：插件不会帮你补全缺失的 Block 基础类。比如你写了
.card__header--dark，但漏了.card基础样式，编辑器不会提醒——这得靠stylelint-selector-bem-pattern的上下文感知才能发现
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
