VSCode 的 Toggle antd/element class 插件可一键切换 Ant Design 与 Element UI 组件类名，解决项目迁移、多库协作时手动替换易错且低效的问题；支持光标定位后快捷键调用，精准映射 BEM 类名变体，不改动标签、props 或样式逻辑。
vscode 的 toggle antd/element class 插件，是专为使用 ant design 或 element ui 的前端开发者设计的轻量级效率工具——它能一键切换组件类名写法，省去手动查文档、改命名、补前缀的重复劳动。
解决什么实际问题
Ant Design 和 Element UI 的组件类名有明显风格差异：Ant Design 偏好 ant-btn 这类带前缀的 BEM 风格，Element UI 则用 el-button；而项目迁移、协作或同时维护多套 UI 时，频繁手动替换不仅易出错，还打断编码节奏。
- 从 Ant Design 项目快速适配 Element UI 主题（比如改
ant-table→el-table） - 在已有 Element 项目中临时引入 Ant 组件，保持类名风格统一
- 写 demo 或技术分享时，快速生成双库对照代码片段
怎么用最顺手
安装插件后，光标停在类名上（如 ant-input），按快捷键 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 Toggle Antd/Element Class 回车即可自动转换；也支持右键菜单调用。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
- 支持常见变体：
ant-btn-primary↔el-button--primary，ant-modal-title↔el-dialog__title - 不破坏原有结构：只改类名，保留绑定语法（如
:class、v-bind:class、模板字符串等） - 可配置默认目标库，在设置里指定「优先转成 antd」还是「element」，减少每次选目标的步骤
不是万能，但很精准
它不处理组件标签名（如 <abutton></abutton> → <elbutton></elbutton>）、不改 props、也不做样式逻辑映射。专注在「类名层面」做语义对齐，所以轻、快、稳。
- 遇到自定义类名（如
my-custom-btn）或非标准写法（如漏掉前缀的button），会跳过不处理 - 嵌套类名（如
ant-card-head-title）支持逐级映射，不是简单字符串替换 - 对 Vue SFC、React JSX、纯 HTML 文件都生效，无需额外配置
基本上就这些。不需要重构、不依赖构建流程、不侵入业务代码——一个插件，两秒切换，UI 库开发者真能少写几百次 Ctrl+H。
