Autocompletado

El autocompletado se puede personalizar para las sugerencias inteligentes de UnoCSS en el playground y la extensión de VS Code.

autocomplete: {
  templates: [
    // inferencia de tema
    'bg-$color/<opacity>',
    // abreviaturas
    'text-<font-size>',
    // grupos lógicos OR
    '(b|border)-(solid|dashed|dotted|double|hidden|none)',
    // constantes
    'w-half',
  ],
  shorthands: {
    // igual a `opacity: "(0|10|20|30|40|50|60|70|90|100)"`
    'opacity': Array.from({ length: 11 }, (_, i) => i * 10),
    'font-size': '(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)',
    // sobrescribir abreviaturas integradas
    'num': '(0|1|2|3|4|5|6|7|8|9)',
  },
  extractors: [
      // ...extractores
  ],
}

• templates usa un DSL simple para especificar las sugerencias de autocompletado.

• shorthands es un mapa de nombres de abreviaturas a sus plantillas. Si es un Array, será un grupo lógico OR.

• extractors para recoger posibles clases y transformar sugerencias de estilo de nombre de clase al formato correcto. Por ejemplo, puedes verificar cómo implementamos el extractor de autocompletado attributify

• Para ayuda adicional, consulta aquí.