Автодополнение

Утилиты автодополнения для UnoCSS: @unocss/autocomplete. Они встроены в песочницу и расширение VS Code.

Использование

Статические правила

Статические правила, подобные этим, будут работать без какой-либо конфигурации.

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

Динамические правила

Для динамических правил вы можете предоставить дополнительный объект meta в правиле и указать шаблон автодополнения:

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

Шаблон использует простой DSL для указания предложений автодополнения. Синтаксис:

• (...|...): логические группы «ИЛИ», использующие | в качестве разделителя. Будут использоваться в качестве предложений, когда совпадают некоторые из групп.
• <...>: встроенные сокращения. В настоящее время поддерживаются <num>, <percent> и <directions>.
• $...: вывод из темы. Например, $colors перечислит все свойства объекта colors темы.

Примеры

Пример 1

• Шаблон: (border|b)-(solid|dashed|dotted|double|hidden|none)
• Ввод: b-do
• Предложения: b-dotted, b-double

Пример 2

• Шаблон: m-<num>
• Ввод: m-
• Предложения: m-1, m-2, m-3…

Пример 3

• Шаблон: text-$colors
• Ввод: text-r
• Предложения: text-red, text-rose…

Пример 4

Для нескольких шаблонов:

• Шаблон: ['(border|b)-<num>', '(border|b)-<directions>-<num>']
• Ввод: b-
• Предложения: b-x, b-y, b-1, b-2…
• Ввод: b-x-
• Предложения: b-x-1, b-x-2…

Лицензия

• Лицензия MIT © 2021-настоящее время Anthony Fu