自动完成
UnoCSS 的自动完成工具：@unocss/autocomplete。它嵌入在 游乐场 和 VS Code 扩展 中。
用法
静态规则
像这样的静态规则无需任何配置即可正常工作。
ts
rules: [
['flex', { display: 'flex' }]
]动态规则
对于动态规则，你可以为规则提供一个额外的 meta 对象并指定自动完成模板。
ts
rules: [
[
/^m-(\d)$/,
([, d]) => ({ margin: `${d / 4}rem` }),
{ autocomplete: 'm-<num>' }, // <-- this
],
]模板使用简单的 DSL 来指定自动完成建议。语法为
(...|...)：使用|作为分隔符的逻辑 OR 组。当部分组匹配时，它将用作建议。<...>：内置简写。目前支持<num>、<percent>和<directions>$...：主题推断。例如$colors将列出主题的colors对象的所有属性。
示例
示例 1
- 模板：
(border|b)-(solid|dashed|dotted|double|hidden|none) - 输入：
b-do - 建议：
b-dotted，b-double
示例 2
- 模板：
m-<num> - 输入：
m- - 建议：
m-1，m-2，m-3…
示例 3
- 模板：
text-$colors - 输入：
text-r - 建议：
text-red，text-rose…
示例 4
对于多个模板
- 模板：
['(border|b)-<num>', '(border|b)-<directions>-<num>'] - 输入：
b- - 建议：
b-x，b-y，b-1，b-2… - 输入：
b-x- - 建议：
b-x-1，b-x-2…
许可证
- MIT 许可证 © 2021-PRESENT Anthony Fu