Skip to content

VS Code Extension

Install in Marketplace

  • Decoration and tooltip for matched utilities
  • Auto loading configs
  • Count of matched utilities

Commands

CommandTitle
unocss.reloadUnoCSS: Reload UnoCSS
unocss.insert-skip-annotationUnoCSS: Insert @unocss-skip for the selection

Configurations

KeyDescriptionTypeDefault
unocss.disableDisable the UnoCSS extensionbooleanfalse
unocss.languageIdsarray``
unocss.rootProject root that contains the UnoCSS configuration filearray,string``
unocss.includeDirectory of files to be detectedarray,string``
unocss.excludeDirectory of files not to be detectedarray,string``
unocss.underlineEnable/disable underline decoration for class namesbooleantrue
unocss.colorPreviewEnable/disable color preview decorationsbooleantrue
unocss.colorPreviewRadiusRadius for color previewstring"50%"
unocss.remToPxPreviewEnable/disable rem to px preview in hoverbooleantrue
unocss.remToPxRatioRatio of rem to pxnumber16
unocss.selectionStyleEnable/disable selection style decorationsbooleantrue
unocss.strictAnnotationMatchBe strict about where to show annotationsbooleanfalse
unocss.autocomplete.matchTypeThe matching type for autocompletestring"prefix"
unocss.autocomplete.strictBe strict about where to show autocompletebooleanfalse
unocss.autocomplete.maxItemsThe maximum number of items to show in autocompletenumber1000

Config

To get the best IDE experience, we recommend you to use a separate uno.config.ts file for configuring your UnoCSS.

The extension will try to find the UnoCSS configurations under your project. When there is no config found, the extension will be disabled.

Icons Preset

If you're using the Icons Preset, you can also install Iconify IntelliSense to get inlay preview, auto-completion, and hover information for your icons.

Released under the MIT License.