自動完成

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