Ant Design Color Extension
一个为 VSCode 设计的扩展，专门用于为 Ant Design 颜色变量提供颜色预览和装饰功能。
功能特性
🎨 颜色预览
- 在编辑器中直接显示 Ant Design 颜色变量的实际颜色
- 支持多种颜色格式：HEX、RGB、RGBA、HSL、HSLA、命名颜色
- 为颜色值添加视觉装饰，包括颜色块和变量标识
🔍 智能识别
- 自动识别 Ant Design Less 变量（如
@primary-color）
- 支持 CSS 自定义属性（如
var(--ant-primary-color)）
- 识别 JavaScript/TypeScript 中的主题对象属性
- 支持颜色变量引用和直接颜色值
📝 悬停信息
- 鼠标悬停在颜色上时显示详细信息
- 包含颜色值、RGB 值、颜色描述等
- 显示 Ant Design 变量的描述信息
⚡ 性能优化
- 使用防抖机制避免频繁更新
- 智能缓存解析结果
- 只处理可见区域的文本
支持的文件类型
- JavaScript (
.js, .jsx, .mjs, .cjs)
- TypeScript (
.ts, .tsx, .mts, .cts)
- CSS (
.css)
- SCSS (
.scss, .sass)
- Less (
.less)
- HTML (
.html)
- Vue (
.vue)
支持的 Ant Design 颜色变量
Less 变量
@primary-color: #1890ff;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #ff4d4f;
@info-color: #1890ff;
@text-color: rgba(0, 0, 0, 0.85);
@border-color-base: #d9d9d9;
@background-color-base: #f5f5f5;
CSS 变量
:root {
--ant-primary-color: #1890ff;
--ant-success-color: #52c41a;
--ant-warning-color: #faad14;
--ant-error-color: #ff4d4f;
}
JavaScript 主题对象
const theme = {
primaryColor: "#1890ff",
successColor: "#52c41a",
warningColor: "#faad14",
errorColor: "#ff4d4f",
};
安装和使用
安装
- 在 VSCode 扩展市场中搜索 "Ant Design Color"
- 点击安装按钮
- 重启 VSCode
使用
安装后，扩展会自动在支持的文件类型中工作：
- 自动识别：打开包含 Ant Design 颜色变量的文件
- 颜色预览：颜色变量旁边会显示颜色块
- 悬停信息：鼠标悬停查看详细信息
- 实时更新：编辑文件时颜色预览会实时更新
命令
Ant Design Color: 刷新颜色装饰 - 手动刷新颜色装饰Ant Design Color: 切换颜色高亮 - 启用/禁用颜色高亮Ant Design Color: 显示扩展信息 - 查看扩展状态信息
配置选项
在 VSCode 设置中可以配置以下选项：
{
"antd-color.enabled": true, // 启用颜色高亮功能
"antd-color.showDecorations": true, // 显示颜色装饰
"antd-color.showHover": true, // 显示悬停信息
"antd-color.debounceDelay": 300 // 防抖延迟时间（毫秒）
}
示例文件
项目包含以下测试文件，用于演示扩展功能：
test-example.js - JavaScript/TypeScript 示例test-example.css - CSS 示例test-example.less - Less 示例
技术实现
架构设计
- ColorParser: 颜色值解析和验证
- AntdColorMatcher: Ant Design 颜色变量识别
- DecorationProvider: 颜色装饰提供者
- HoverProvider: 悬停信息提供者
- DocumentWatcher: 文档变化监听器
核心特性
- 支持多种颜色格式解析
- 智能的 Ant Design 变量识别
- 高效的文档变化监听
- 优雅的颜色装饰显示
开发
构建
pnpm install
pnpm run compile
调试
- 按
F5 打开新的扩展开发主机窗口
- 在新窗口中打开包含 Ant Design 颜色变量的文件
- 查看颜色预览效果
测试
pnpm run test
贡献
欢迎提交 Issue 和 Pull Request！
许可证
MIT License
更新日志
1.0.0
- 初始版本发布
- 支持 Ant Design 颜色变量识别
- 支持多种颜色格式
- 提供颜色预览和悬停信息
- 支持多种文件类型
享受更好的 Ant Design 开发体验！ 🎨
