Pistachio

使用自定义模板快速构建文件夹结构的 VS Code 扩展工具，同时提供主题 Token 智能提示功能。

主要功能

📁 模板创建功能

通过设置模板文件夹路径或配置环境变量，快速创建项目结构。

🎨 主题 Token 智能提示

提供设计 Token 的自动补全和悬停提示功能，支持 CSS、Less、TailwindCSS 等样式文件。

模板功能配置

Configure the following fields in the configuration

Use the context menu on the folder, and then click "Create Template Files"

主题 Token 功能

功能介绍

主题 Token 功能为 CSS、LESS、TailwindCSS 等样式文件提供智能提示和自动补全，支持设计系统的统一管理。

支持的语法

• CSS 变量语法：var(--token-name)
• Token 函数语法：token("token.name")

配置文件

在项目根目录创建 theme-token.config.js 配置文件：

module.exports = {
  tokens: [
    { name: "color.primary", value: "#3b82f6", description: "主色调" },
    { name: "spacing.4", value: "1rem", description: "间距 4 (16px)" },
    { name: "font.size.base", value: "1rem", description: "基础字体" }
  ],
  options: {
    caseSensitive: false,
    showDescriptions: true
  }
};

使用方法

1. 在项目根目录创建 theme-token.config.js 文件
2. 定义所需的 Token 列表
3. 在 CSS 文件中输入 var( 或 token( 触发自动补全
4. 悬停在 Token 上查看详细说明

命令

• 重载主题 Tokens：重新加载主题配置（Ctrl/Cmd + Shift + P → "重载主题 Tokens"）

支持的语言

• CSS
• LESS
• TailwindCSS

模板变量