Zelos CSS变量开发工具

这个 VSCode 插件为 Zelos 前端框架提供了 CSS 变量的智能提示和颜色预览功能，使开发者能够更高效地使用 Zelos 设计系统中的 CSS 变量。

功能特性

1. CSS变量自动补全

在CSS、LESS、SCSS、SASS文件以及 JSX/TSX 内联样式中，插件提供以下智能提示：

在属性值位置自动提示所有可用的Zelos CSS变量
在var(函数中自动提示CSS变量
在输入--时自动提示可用的变量
提示中包含变量的描述和值
支持JSX/TSX文件中的内联样式（style属性）

2. 颜色变量预览

插件在编辑器中提供颜色变量的可视化预览：

在代码中使用颜色变量时显示小色块预览
在自动补全提示中显示颜色预览
支持十六进制和rgba颜色格式
支持JSX/TSX文件中的内联样式中的颜色变量

功能展示

less 文件

内联样式

使用方法

配置 package.json

在 package.json 配置相关字段开启类型提示功能

"zelos": {
  "token": {}
}

token 信息可以被覆盖，默认 token 配置：

{
  token: {
    colorPrimary: "#3bcbbe",
    colorInfo: "#3bcbbe",
    colorTextBase: "#061632",
    borderRadius: 4,
    colorPrimaryBg: "#ecfaf9",
    colorPrimaryBgHover: "#ecfaf9",
    colorBorder: "#dadce0",
    colorBorderSecondary: "#f1f1f3",
    colorBgLayout: "#f5f6f7",
  },
}

安装插件后，它会自动在CSS、LESS、SCSS、SASS 以及 JSX/TSX 文件中启用。

输入--开始使用变量名称提示
输入var(获取变量列表
在CSS属性后面输入:后会自动提示可用的变量

在 JSX/TSX 中使用

在 JSX/TSX 文件中的内联样式中，也可以使用CSS变量：

// 在style属性中使用
<div style={{ color: 'var(--zelos-color-primary)' }}>文本</div>

命令

Zelos: 显示 CSS 变量信息: 显示插件信息

zelos-devtools

zelostech