免費(fèi)AI編程助手
Windi CSS VS Code
2023-02-16 17:59 更新
Windi CSS IntelliSense 通過(guò)為 Visual Studio Code 用戶提供自動(dòng)完成、語(yǔ)法突出顯示、代碼折疊和構(gòu)建等高級(jí)功能來(lái)增強(qiáng) Windi 開(kāi)發(fā)體驗(yàn)。
安裝
通過(guò) Visual Studio Code Marketplace 安裝 →
通過(guò) Open VSX Registry 安裝 →
本插件自帶windicss編譯器，無(wú)需安裝windicss即可使用，同時(shí)支持配置文件(tailwind|windi).config.(js|cjs|ts)。
特性
自動(dòng)完成
實(shí)用程序和變體的智能建議。實(shí)用程序和變體的智能建議。
懸停預(yù)覽
將鼠標(biāo)懸停在類名上可查看完整的 CSS。
語(yǔ)法高亮
突出顯示實(shí)用程序、變體和重要信息。
顏色預(yù)覽
預(yù)覽顏色和光譜。
代碼折疊
折疊過(guò)長(zhǎng)的類以增加可讀性。
編譯命令
內(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)容是否對(duì)您有幫助：
更多建議：