UnoT

UnoT

UnoT is short for unocss tools, to provide a better development experience using unocss in vscode. It integrated tounocss、 vscode uno magic

demo

🦸🏻 Ability

Provides hover style prompt css code corresponding to UnoCss
Turn on uno-magic to provide the ability to automatically process spaces and brackets
Provides shortcut keys to automatically convert the style copied by the browser to UnoCss
Right-click provides a website to quickly open UnoCss documents and Unot online edited conversion results

💡 Open uno-magic

text-[red,hover:pink,2xl,lg:hover:3xl] -> text-red hover:text-pink text-2xl lg:hover:text-3xl
class or className content like w-calc(100% - 20px) -> w-[calc(100%-20px)] 🔎detail
Provides code selection for unocss syntax 🔎detail
Provide the unocss hover to display the css code 🔎detail
bg#fff -> bg-#fff
maxw-100% -> max-w-[100%]
bg-[rgba(255, 255, 255, 0.5)] -> bg-[rgba(255,255,255,0.5)]
translatex--50% -> translate-x-[-50%]
hover:(text-red bg-blue) -> hover:text-red hover:bg-blue
!(text-red bg-blue) -> !text-red !bg-blue
h="[calc(100% - 20px)]" -> h="[calc(100%-20px)]"

Powered by

Feature

Support css in the design draft directly through the shortcut key Mac? cmd+alt+v : ctrl+alt+v is automatically converted to unocss, and will be automatically processed into in-line unocss format or class form according to your location.

Configuration

You can use config to control some matching rules, such as strict-splicing, or the generated calculation result is -[10px] or -10px

{
  "unot.classMode": {
    "type": "boolean",
    "default": true,
    "description": "Enable/disable class mode"
  },
  "unot.variantGroup": {
    "type": "boolean",
    "default": true,
    "description": "Enable/disable transform hover:(x1 x2) to hover:x1 hover:x2"
  },
  "unot.strictVariable": {
    "type": "boolean",
    "default": true,
    "description": "if true w10px or w-10px will transform w-[10px]"
  },
  "unot.strictHyphen": {
    "type": "boolean",
    "default": false,
    "description": "if true bg#fff or bgrgba(0,0,0,.0) will transform bg-[#fff] or bg-[rgba(0,0,0,.0)]"
  },
  "unot.switchMagic": {
    "type": "boolean",
    "default": true,
    "description": "switch magic"
  },
  "unot.useHex": {
    "type": "boolean",
    "default": false,
    "description": "use hex color transform #fff to hex-fff"
  },
  "unot.presets": {
    "type": "array",
    "default": [],
    "description": "unocss transform presets"
  },
  "unot.dark": {
    "type": "object",
    "default": {},
    "description": "unocss dark theme style"
  },
  "unot.light": {
    "type": "object",
    "default": {},
    "description": "unocss light theme style"
  }
}

:coffee:

buy me a cup of coffee

License

MIT

simonhe