Windi CSS VS Code
2023-02-16 17:59 更新
Windi CSS IntelliSense 通過為 Visual Studio Code 用戶提供自動完成、語法突出顯示、代碼折疊和構(gòu)建等高級功能來增強 Windi 開發(fā)體驗。
安裝
通過 Visual Studio Code Marketplace 安裝 →
本插件自帶windicss編譯器，無需安裝windicss即可使用，同時支持配置文件(tailwind|windi).config.(js|cjs|ts)。
特性
自動完成
實用程序和變體的智能建議。實用程序和變體的智能建議。
懸停預(yù)覽
將鼠標懸停在類名上可查看完整的 CSS。
語法高亮
突出顯示實用程序、變體和重要信息。
顏色預(yù)覽
預(yù)覽顏色和光譜。
代碼折疊
折疊過長的類以增加可讀性。
編譯命令
內(nèi)置命令，一鍵操作。
插件設(shè)置
| Settings | type | default | description |
|---|---|---|---|
windicss.enableColorDecorators
|
boolean | true | Enable Color Decorators. |
windicss.enableHoverPreview
|
boolean | true | Enable hover className to show preview of CSS. |
windicss.enableCodeCompletion
|
boolean | true | Enable/Disable all code completions. |
windicss.enableUtilityCompletion
|
boolean | true | Enable Utility Completion. |
windicss.enableVariantCompletion
|
boolean | true | Enable Variant Completion. |
windicss.enableDynamicCompletion
|
boolean | true | Enable Dynamic Utilities Completion like p-${int}. |
windicss.enableRemToPxPreview
|
boolean | true | Enable Rem to Px Preview. |
windicss.enableCodeFolding
|
boolean | true | Enable ClassNames Code Folding. |
windicss.foldByLength
|
boolean | false | Folding code by length. Default option is false, will fold by utility count. |
windicss.foldCount
|
number | 3 | Used by foldByCount. |
windicss.foldLength
|
number | 25 | Used by foldByLength |
windicss.hiddenText
|
string | ...
|
Placeholder used when folding code. |
windicss.hiddenTextColor
|
string | #AED0A4 | Placeholder Color. |
windicss.sortOnSave
|
boolean | false | Runs class sorting on file save. |
以上內(nèi)容是否對您有幫助：
更多建議：