Autovervollständigung

Autovervollständigungs-Utilities für UnoCSS: @unocss/autocomplete. Dies ist in der Playground und der VS Code Erweiterung eingebettet.

Verwendung

Statische Regeln

Statische Regeln wie diese funktionieren ohne jegliche Konfiguration.

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

Dynamische Regeln

Für dynamische Regeln können Sie ein zusätzliches meta Objekt zur Regel bereitstellen und die Autovervollständigungsvorlage angeben.

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

Die Vorlage verwendet eine einfache DSL, um die Autovervollständigungsvorschläge anzugeben. Die Syntax ist:

• (...|...): Logik-ODER-Gruppen mit | als Trennzeichen. Es wird als Vorschläge verwendet, wenn einige der Gruppen übereinstimmen.
• <...>: Eingebaute Kurzformen. Unterstützt derzeit <num>, <percent> und <directions>
• $...: Theme-Inferenz. Zum Beispiel listet $colors alle Eigenschaften des colors Objekts des Themes auf.

Beispiele

Beispiel 1

• Vorlage: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Eingabe: b-do
• Vorschläge: b-dotted, b-double

Beispiel 2

• Vorlage: m-<num>
• Eingabe: m-
• Vorschläge: m-1, m-2, m-3…

Beispiel 3

• Vorlage: text-$colors
• Eingabe: text-r
• Vorschläge: text-red, text-rose…

Beispiel 4

Für mehrere Vorlagen:

• Vorlage: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• Eingabe: b-
• Vorschläge: b-x, b-y, b-1, b-2…
• Eingabe: b-x-
• Vorschläge: b-x-1, b-x-2…

Lizenz

• MIT License © 2021-PRESENT Anthony Fu