Autocomplete

Autocompleteは、playgroundやVS Code拡張機能でのUnoCSSのインテリジェントな提案をカスタマイズできます。

autocomplete: {
  templates: [
    // テーマ推論
    'bg-$color/<opacity>',
    // ショートハンド
    'text-<font-size>',
    // 論理ORグループ
    '(b|border)-(solid|dashed|dotted|double|hidden|none)',
    // 定数
    'w-half',
  ],
  shorthands: {
    // `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)',
    // 組み込みのショートハンドを上書き
    'num': '(0|1|2|3|4|5|6|7|8|9)',
  },
  extractors: [
      // ...extractors
  ],
}

• templatesは、オートコンプリートの提案を指定するためのシンプルなDSLを使用します。

• shorthandsは、ショートハンド名とそのテンプレートのマップです。Arrayの場合、論理ORグループになります。

• extractorsは、可能なクラスをピックアップし、クラス名スタイルの提案を正しい形式に変換します。例えば、attributify autocomplete extractorの実装方法を確認できます。

• 追加のヘルプについては、こちらを参照してください。