Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simon-he95/unot
UnoCss tools ｜UnoCss全家桶 in vscode
https://github.com/simon-he95/unot
unocss unocss-tools unot vscode vscode-extension
Last synced: 10 days ago
JSON representation
UnoCss tools ｜UnoCss全家桶 in vscode
- Host: GitHub
- URL: https://github.com/simon-he95/unot
- Owner: Simon-He95
- License: mit
- Created: 2023-07-04T13:13:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-21T10:15:46.000Z (6 months ago)
- Last Synced: 2024-05-23T05:13:09.372Z (6 months ago)
- Topics: unocss, unocss-tools, unot, vscode, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=simonhe.unot&ssr=false#review-details
- Size: 11.6 MB
- Stars: 47
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
English | 简体中文
UnoT is short for unocss tools, to provide a better development experience using unocss in vscode. It integrated [tounocss](https://github.com/Simon-He95/tounocss)、 [vscode uno magic](https://github.com/Simon-He95/vscode-uno-magic)
## 🦸🏻 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](https://github.com/Simon-He95/vscode-uno-magic)
- Provides code selection for unocss syntax [🔎detail](https://github.com/Simon-He95/vscode-uno-magic)
- Provide the unocss hover to display the css code [🔎detail](https://github.com/Simon-He95/unocss-to-css)
- 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
- [transformToUnoCSS](https://github.com/Simon-He95/transformToUnoCSS)
- [transform-to-tailwindcss-core](https://github.com/Simon-He95/transform-to-tailwindcss-core)
## 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`
``` json
{
"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](https://github.com/Simon-He95/sponsor)
## License
[MIT](./license)