Autocompletar

Utilitários de autocompletar para UnoCSS: @unocss/autocomplete. Isso está incorporado no playground e na extensão do VS Code.

Uso

Regras estáticas

Regras estáticas como esta funcionarão sem nenhuma configuração.

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

Regras dinâmicas

Para regras dinâmicas, você pode fornecer um objeto meta extra à regra e especificar o template de autocompletar.

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

O template usa uma DSL simples para especificar as sugestões de autocompletar. A sintaxe é:

• (...|...): grupos lógicos OR usando | como separador. Será usado como sugestões quando alguns dos grupos corresponderem.
• <...>: atalhos incorporados. Atualmente suporta <num>, <percent> e <directions>
• $...: inferência de tema. Por exemplo $colors listará todas as propriedades do objeto colors do tema.

Exemplos

Exemplo 1

• Template: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Entrada: b-do
• Sugestões: b-dotted, b-double

Exemplo 2

• Template: m-<num>
• Entrada: m-
• Sugestões: m-1, m-2, m-3…

Exemplo 3

• Template: text-$colors
• Entrada: text-r
• Sugestões: text-red, text-rose…

Exemplo 4

Para múltiplos templates:

• Template: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• Entrada: b-
• Sugestões: b-x, b-y, b-1, b-2…
• Entrada: b-x-
• Sugestões: b-x-1, b-x-2…

Licença

• MIT License © 2021-PRESENT Anthony Fu