自动完成

UnoCSS 的自动完成实用工具：@unocss/autocomplete。这已嵌入到在线playground和 VS Code 扩展中。

用法

静态规则

像这样的静态规则将在没有任何配置的情况下正常工作。

rules: [
  ['flex', { display: 'flex' }]
]

动态规则

对于动态规则，您可以为规则提供一个额外的meta对象，并指定自动完成模板。

rules: [
  [
    /^m-(\d)$/,
    ([, d]) => ({ margin: `${d / 4}rem` }),
    { autocomplete: 'm-<num>' }, // <-- 这里
  ],
]

该模板使用一个简单的领域特定语言（DSL）来指定自动完成建议。语法为：

• (...|...): 使用 | 作为分隔符的逻辑或组。当某些组匹配时，它将用作建议。
• <...>: 内置简写。目前支持 <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-现在 Anthony Fu