前言
在上一篇文章-Ant Design Token Lens：让 Ant Design Token 在 VS Code 中「可视化」，拒绝抽象，所见即所得中，我们介绍了 Ant Design Token Lens ------ 一个致力于解决在编写 CSS/Less 或使用 Tailwind CSS 时，Ant Design Token 过于抽象、难以记忆的 VS Code 插件。
然而，还有些问题：
"虽然写 CSS 时很爽，但在组件里用
const { token } = theme.useToken();提取 Design Token 时，看着满屏的token.colorPrimary、token.colorBgContainer，还是两眼一抹黑啊！"
确实，在真实的业务场景下，我们通常会在 .tsx 或 .ts 文件中直接使用 Design Token，而不是像在 CSS 里那样使用 --ant- 前缀的 CSS 变量。如果代码编辑器不能解析这部分的变量值，开发体验就不算完美闭环。
现在，Ant Design Token Lens 迎来了一次重磅更新！
核心新特性速览
1. 突破语言壁垒，JS/TS 全面支持
现在，插件的超强透视能力不再局限于样式文件！在任何 JavaScript 或 TypeScript 代码中，你所使用的 Design Token 同样"可见、可写、可查"。
-
真正的所见即所得 (Color Decorator) ：当你使用
token.colorPrimaryBg配置样式属性时，代码背景会自动附上该 Token 代表的真实色彩。再也不用猜背景色究竟多浅或多深了。 -
Hover 深层剖析 ：鼠标悬停在
token.xxx上，熟悉的透视框依然在。快速对比光暗双主题下的 HEX/RGB 值，了解官方针对该属性提供的标准用法。
- 丝滑的无界补全 (Auto-complete) ：无需死记硬背驼峰命名规范，只需在 JS/TS 中输入
token.（甚至是你解构出来的别名，比如myToken.），即可瞬间唤起全量 Token 提示列表。列表中不仅有名称，同样带有颜色预览和中文语义描述。
（支持开关控制：该功能默认开启，也可通过设置项 antdToken.enableJsSupport 随时关闭。）
2. 与时俱进，拥抱 Tailwind CSS V4 生态
很多喜欢 Tailwind 的朋友发现，在全新的 Tailwind CSS 项目中，以往的 bg-[var(--ant-color-primary)] 显得过于冗长繁琐。
Tailwind 新版支持了一种更直接的、原生 CSS 变量友好的语法。我们也第一时间完成了兼容：
现在，输入诸如 bg-(--ant-color-primary) 、text-(--ant-color-error) 的现代写法时，插件能够完美识别，并为你提供零延迟的颜色展示和自动补全！
为什么推荐你必须要更新/下载？
如果你是 Ant Design 的重度用户：
- 还在打开官网页面
Ctrl+F搜 Token 名字？ - 还在浏览器的 Elements tab 里艰难审查某一个变量是什么颜色？
- 还在为切换主题时各种 Token 对应颜色对不对齐而抓狂？
有了 Ant Design Token Lens ，这些损耗精力的动作统统可以省去。 它完美适配最新的 Ant Design v5/v6 新一代定制主题方案 ，并且随着本次更新，完美契合了 React useToken() 的 JS-in-JS 开发习惯。
立即体验
- 打开你的 VS Code。
- 进入扩展市场页面，搜索 "Ant Design Token Lens"（如果你已经安装，可能已经自动更新）。
- 安装并享受这份被极简主义武装到牙齿的开发体验。
点我直达 VS Code 插件市场进行安装
如果你是Cursor或者TRAE用户，在插件市场搜不到该插件，可以点击这里下载vsix包来安装
如果你觉得好用，请向身边的前端同事激情安利，或者到 GitHub 仓库 给我点亮一颗 🌟 Star！
当然，如果大家有更好的想法或遇到了问题，我们 Issue 区见！期待与你们共同将这款插件打磨至完美。