自動完成

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