为 VS Code 提供的 Windi CSS Intellisense

Windi CSS Intellisense 通过提供给 Visual Studio Code 用户一些特性的方式来提高 Windi 的开发体验,例如:自动补全、语法高亮、代码折叠和构建。

安装

通过 Visual Studio Code Marketplace 安装 →

通过 Open VSX Registry 安装 →

这个插件打包了一个 windicss 编译器,所以即使你不安装 windicss 也可以使用,支持配置文件 (tailwind|windi).config.(js|cjs|ts)

特性

自动补全

为工具类 (utilities) 和可变修饰 (variants) 提供智能建议。

Auto Complete

悬停预览

悬停于一个 class name 的上方时可以看到其完整的 CSS。

Hover Preview

语法高亮

高亮工具类、可变修饰和重要的部分。

Syntax Highlighting

颜色预览

预览颜色和色谱。

Color Preview

代码折叠

折叠超长的 classes 以提高可读性。

Code Folding

编译命令

内置编译命令,一键操作。

Compile Commands

扩展设置

设置类型默认值描述
windicss.enableColorDecoratorsbooleantrue启用颜色修饰符。
windicss.enableHoverPreviewbooleantrue启用悬停 className 展示 CSS 预览。
windicss.enableCodeCompletionbooleantrue启用/禁用所有的代码补全
windicss.enableUtilityCompletionbooleantrue启用工具类补全。
windicss.enableVariantCompletionbooleantrue启用可变修饰补全。
windicss.enableDynamicCompletionbooleantrue启用类似于 p-${int} 的动态工具类补全。
windicss.enableRemToPxPreviewbooleantrue允许 Rem 转化为 Px 预览。
windicss.enableCodeFoldingbooleantrue允许 ClassNames 代码折叠。
windicss.foldByLengthbooleanfalse由长度决定折叠代码。默认是关闭的,通过工具类的数量来折叠。
windicss.foldCountnumber3通过 foldByCount 使用。
windicss.foldLengthnumber25通过 foldByLength 使用。
windicss.hiddenTextstring ...占位符用于折叠代码之时。
windicss.hiddenTextColorstring#AED0A4占位符颜色。
windicss.sortOnSavebooleanfalse当文件保存时进行 class 排序。

了解更多