Element Plus 变量助手
VSCode 插件，用于在编码过程中快速使用灵芽组件库设计系统的 CSS 变量（包括颜色、字体、阴影等）。
✨ 功能特点
- 🎯 智能补全：输入
-- 时自动显示所有 CSS 变量
- ⚡ 快捷替换：选中值后按
Shift+Enter 键快速替换为对应的 CSS 变量
- 🔍 模糊搜索：支持变量名和中文描述的模糊搜索
- 🎨 多文件支持：CSS、SCSS、Less、Vue、TS/JS 等多种文件格式
🚀 使用方法
方法 1：自动补全（输入 --）
在 CSS 属性值中输入 --，然后输入变量名的一部分，支持中文描述搜索：
.button {
/* 输入 --el-color-pri，选择后自动变为： */
background-color: var(--el-color-primary);
/* 输入 --el-font-size，选择后自动变为： */
font-size: var(--el-font-size-base);
}
方法 2：选中替换（按 Shift+Enter 键）
选中现有的值，然后按 Shift+Enter 键：
.text {
/* 选中 #6b57c7，按 Shift+Enter 后变为： */
color: var(--el-color-primary);
/* 选中 14px，按 Shift+Enter 后变为： */
font-size: var(--el-font-size-base);
/* 选中 #2b2b2b，按 Shift+Enter 后变为： */
color: var(--el-text-color-primary);
}
如果你想自定义快捷键，可以在 VSCode 中修改：
- 打开命令面板（
Ctrl/Cmd + Shift + P）
- 输入 "Preferences: Open Keyboard Shortcuts"
- 搜索
elementplus-var-helper.replaceWithTab
- 右键点击 → "更改键绑定"
- 输入你想要的快捷键
⚙️ 配置
在 VSCode 设置中可以配置：
elementplusVarHelper.enabled: 启用/禁用插件（默认：true）
| |
