自動補完

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

使用方法

静的ルール

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

ts

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

動的ルール

動的ルールの場合、ルールにmetaオブジェクトを追加して、自動補完テンプレートを指定できます。

ts

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

テンプレートは、シンプルな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