Autocompletado

Utilidades de autocompletado para UnoCSS: @unocss/autocomplete. Esto está integrado en el playground y la extensión de VS Code.

Uso

Reglas estáticas

Las reglas estáticas como esta simplemente funcionarán sin ninguna configuración.

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

Reglas dinámicas

Para reglas dinámicas, puedes proporcionar un objeto meta extra a la regla y especificar la plantilla de autocompletado.

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

La plantilla usa un DSL simple para especificar las sugerencias de autocompletado. La sintaxis es:

• (...|...): grupos lógicos OR usando | como separador. Se usará como sugerencias cuando algunos de los grupos coincidan.
• <...>: abreviaturas integradas. Actualmente soporta <num>, <percent> y <directions>
• $...: inferencia de tema. Por ejemplo $colors listará todas las propiedades del objeto colors del tema.

Ejemplos

Ejemplo 1

• Plantilla: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Entrada: b-do
• Sugerencias: b-dotted, b-double

Ejemplo 2

• Plantilla: m-<num>
• Entrada: m-
• Sugerencias: m-1, m-2, m-3…

Ejemplo 3

• Plantilla: text-$colors
• Entrada: text-r
• Sugerencias: text-red, text-rose…

Ejemplo 4

Para múltiples plantillas:

• Plantilla: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• Entrada: b-
• Sugerencias: b-x, b-y, b-1, b-2…
• Entrada: b-x-
• Sugerencias: b-x-1, b-x-2…

Licencia

• Licencia MIT © 2021-PRESENT Anthony Fu