如果你是一名使用 Ant Design (v5/v6) 进行开发的前端工程师，尤其是当你结合 Tailwind CSS 或编写 CSS/Less/Sass 样式时，你是否遇到过以下痛点：

• Token 是抽象的：看到 var(--ant-color-primary) 时，不知道是什么颜色。
• 盲人摸象：为了找一个合适的 Token，不得不在 Ant Design 官网和代码之间来回切换。
• Tailwind 的尴尬：想在 Tailwind 中使用 Ant Design Token，用 ${token.colorPrimary} 却发现样式不生效，只能退化回行内样式。
• 记忆负担：Token 数量庞大，需要记住 Token 的名字和作用。

Ant Design Token Lens 就是为了解决这些痛点而生的 VS Code 插件。它的核心理念是让 Ant Design CSS Token 在编辑器中变得可见、可理解、可操作。

💡 一句话推荐：它就像是给你的 VS Code 装上了一副“Ant Design 透视镜”，让你在写代码时能直接看到 Token 背后的真实颜色和含义。

---

为什么会需要这个插件

Ant Design 提供了 useToken 和 getDesignToken 来获取 Design Token，但仅限于 React 运行时环境。在 .css、.less 等样式文件中，或者结合 Tailwind CSS 开发时，直接使用这些 JS 变量往往存在限制。

特别是 Design Token 在 Tailwind CSS 中通常不生效，只能退化为行内样式使用。

作为一名 Tailwind CSS 使用者，我希望能直观地看到 Token 的实际效果，而不是面对抽象的变量名。为了解决这一痛点，让 Token 在 VS Code 中真实“可见”，本插件应运而生。

❌ 常见的错误做法：

// 😭 Tailwind 无法解析动态变量，导致样式丢失
<div className={`text-[${token.colorPrimary}]`}>Hello</div>

Tailwind 是在构建时（Build Time）工作的，它需要扫描静态字符串来生成 CSS。动态的 JavaScript 变量在构建阶段是未知的，因此 Tailwind 会直接忽略它。

✅ 最佳实践：

// 😎 使用 CSS 变量，Tailwind 可以直接识别并生成工具类
<div className="text-[var(--ant-color-primary)]">Hello</div>

核心区别：静态字符串 vs 动态插值

text-[var(--ant-color-primary)] 为什么可行？

• 构建阶段：Tailwind 扫描器在源码中看到了 text-[var(--ant-color-primary)] 这个完整的静态字符串。它不需要执行 JS，就知道你要一个任意值工具类。
• 生成 CSS：它提取中括号里的内容，直接生成如下 CSS 规则：
• 运行阶段：浏览器读取这行 CSS。此时 Ant Design 已经（通过 JS）把 --ant-color-primary 注入到了 html 或 body 标签上，浏览器成功解析了变量，颜色生效。

text-[${token.colorPrimary}] 为什么不可行？

• 构建阶段：Tailwind 扫描器看到的是 text-[${token.colorPrimary}]。这是一个包含变量的模板字符串。
• 无法预测：Tailwind 只进行静态文本分析，它不执行 JavaScript。它无法预知 token.colorPrimary 到底会变成 #1677ff 还是 red。
• 结果：因为无法确定类名，Tailwind 放弃生成任何 CSS。
• 运行阶段：虽然 React 把类名渲染成了 text-[#1677ff]，但对应的 CSS 规则根本不存在，所以颜色不生效。

---

核心功能亮点

1. 颜色可视化

拒绝抽象，所见即所得。插件会自动扫描你代码中的 var(--ant-*) 格式 Token，并直接在代码显示对应的颜色装饰器。

• 实时反馈：当你修改 Token 名时，颜色块立即更新。
• 主题感知：支持自动检测或手动切换 Light/Dark 主题，查看 Token 在不同模式下的表现。
• 多语言支持：完美支持 .css, .less, .scss, .ts, .tsx, .vue, .html, markdown 等文件。

2. 智能自动补全

忘记 Token 的具体拼写？没关系。

• 极速触发：输入 var(-- 或 --ant 即可唤起补全列表。
• 富交互列表：补全列表中不仅有 Token 名称，还直接展示颜色预览、中文描述和当前值。

3. 深度信息透视

鼠标悬停在 Token 上，仿佛拥有了透视眼。Hover 提示框将为你展示：

• 双主题对比：同时列出该 Token 在 Light 和 Dark 模式下的色值 (HEX/RGB)。
• 语义说明：显示官方的中文语义描述（如：ColorError - “错误色”）。
• 一键操作：支持复制 Token 值、查找引用等快捷操作。

---

快速开始

1. 打开 VS Code 扩展市场。
2. 搜索 “Ant Design Token Lens”。
3. 点击安装。

或者直接访问Ant Design Token Lens进行安装。

无需繁琐配置，安装即用。

结语

从今天开始，告别在文档和编辑器之间反复横跳的日子。让 Ant Design Token Lens 成为你开发 Ant Design 应用的得力助手，体验精准、直观、高效的样式开发流程。

• 如对你有所帮助，欢迎给GitHub仓库点一个Star🌟噢！
• 或者说有什么更好的想法，欢迎提issue