generate css tree 插件可将选中html结构自动转换为语义化css类名树，需先安装插件，再选中代码按ctrl+shift+p执行命令，生成bem风格规则，默认输出scss但可切换为css格式。
选中HTML后直接生成CSS类名，靠的是 Generate CSS Tree 插件
VSCode 原生不支持从 HTML 片段反向生成 CSS 类名。所谓“提取 HTML 自动生成类”，本质是：选中一段结构 → 插件解析标签、属性、嵌套关系 → 按规则拼出语义化类名（如 header-nav-list-item）→ 插入到 CSS 文件或剪贴板。
目前唯一稳定可用的方案是安装 Generate CSS Tree 扩展（作者 xiaojimeng，2020 年发布，仍兼容 2026 年版 VSCode）。它默认适配 SCSS，但可手动切换为 CSS 输出格式。
- 安装后，用鼠标选中任意 HTML 片段（比如
<div class="old"> <h2>Title</h2> <p>Text</p> </div>） - 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）打开命令面板 - 输入
Generate CSS tree并回车，插件会弹出预览窗口，显示生成的类名层级（如.old > h2,.old > p） - 点击确认，它会把带 BEM 风格的 CSS 规则插入到当前打开的
.css或.scss文件光标处
注意：它不读取现有 CSS 文件做去重校验，也不检查类名是否已存在——生成的类名全靠内部规则拼接，容易和项目已有类冲突。建议只在重构初期、小范围模块中使用。
为什么 Tailwind / Bootstrap 类名不会被这个插件生成
Generate CSS Tree 的设计目标是「基于 HTML 结构推导语义类」，不是补全框架工具类。它完全不依赖 tailwind.config.js，也不扫描 node_modules 或 CDN 链接。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
如果你写的是 <button class="bg-blue-500 hover:bg-blue-700 text-white"></button>，插件不会识别这些字符串，更不会反向生成 .bg-blue-500 对应的 CSS 规则——它只处理你没写 class 的原始结构。
- Tailwind 类名补全必须用
Tailwind CSS IntelliSense插件，配合本地tailwind.config.js - Bootstrap 等外部库类名提示，需把 CSS 文件下载到项目源码目录（如
src/assets/bootstrap.css），再靠IntelliSense for CSS class names in HTML扫描 - 二者和
Generate CSS Tree是互补关系，不是替代关系
生成的类名能直接用吗？得看命名规范和作用域
插件输出的类名默认采用小写 + 连字符风格（nav-main-item-link），符合 BEM 推荐，但不自动加命名空间前缀。如果项目用了 CSS Modules 或 scoped style，这些类名可能全局污染。
- 它不分析父容器上下文，所以
<article><h1></h1></article>和<section><h1></h1></section>都可能生成h1规则，容易覆盖 - 嵌套过深时（如 4 层以上），生成的类名会变长且难维护，比如
card-header-content-text-span - 若 HTML 中已有
class属性，插件会忽略该标签，只处理无 class 的裸标签——这点常被误以为“失效”
真正安全的做法是：先删掉原 HTML 中所有 class，再选中结构生成；生成后手动检查层级深度和命名重复性，别直接复制进生产 CSS。
比自动生成更可靠的 CSS 提取方式：CSS Peek + 全局搜索
当 HTML 已有大量 class，你想知道某段结构实际对应哪些 CSS 规则，Generate CSS Tree 就完全不适用了。这时候要换思路：
- 装
CSS Peek插件，在 HTML 的class="xxx"上悬停，立刻看到匹配的 CSS 声明块 - 想查某个类名在全项目中被哪些 HTML 引用？关掉 VSCode 搜索面板的
matchWholeWord（点 αβ 图标），直接搜xxx，别加引号 - 要精准锁定
class="xxx"出现在class属性里？开正则模式（.* 图标），搜：class=["'][^"']*xxx[^"']*["']
自动生成类名只是辅助，真正重构时最耗时间的从来不是“怎么起名”，而是“这个样式到底影响了哪几处”。别让插件替你做决定，它连你项目里用的是 CSS Modules 还是 vanilla CSS 都不知道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
