Autocomplete

UnoCSS用のオートコンプリートユーティリティ：@unocss/autocomplete。これはプレイグラウンドとVS Code拡張機能に組み込まれています。

使用方法

静的ルール

このような静的ルールは設定なしで動作します。

ts

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

動的ルール

動的ルールの場合、ルールに追加のmetaオブジェクトを提供し、オートコンプリートテンプレートを指定できます。

ts

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

テンプレートはシンプルなDSLを使用してオートコンプリートの候補を指定します。構文は以下の通りです：

(...|...): |を区切り文字として使用する論理ORグループ。グループの一部がマッチした場合に候補として使用されます。
<...>: 組み込みの省略形。現在は<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 License © 2021-PRESENT Anthony Fu