Autocomplétion

Autocomplétion des utilitaires pour UnoCSS : @unocss/autocomplete. Ceci est intégré dans le playground et l'extension VS Code.

Utilisation

Règles statiques

Les règles statiques comme celle-ci fonctionneront simplement sans aucune configuration.

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

Règles dynamiques

Pour les règles dynamiques, vous pouvez fournir un objet meta supplémentaire à la règle et spécifier le template d'autocomplétion.

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

Le template utilise un DSL simple pour spécifier les suggestions d'autocomplétion. La syntaxe est :

• (...|...): groupes logiques OU utilisant | comme séparateur. Il sera utilisé comme suggestions quand certains des groupes correspondent.
• <...>: raccourcis intégrés. Supporte actuellement <num>, <percent> et <directions>
• $...: inférence de thème. Par exemple $colors listera toutes les propriétés de l'objet colors du thème.

Exemples

Exemple 1

• Template: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Entrée: b-do
• Suggestions: b-dotted, b-double

Exemple 2

• Template: m-<num>
• Entrée: m-
• Suggestions: m-1, m-2, m-3…

Exemple 3

• Template: text-$colors
• Entrée: text-r
• Suggestions: text-red, text-rose…

Exemple 4

Pour plusieurs templates :

• Template: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• Entrée: b-
• Suggestions: b-x, b-y, b-1, b-2…
• Entrée: b-x-
• Suggestions: b-x-1, b-x-2…

Licence

• Licence MIT © 2021-PRESENT Anthony Fu