Autocomplete

자동완성은 playground 및 VS Code 확장에서 UnoCSS의 지능형 제안을 위해 커스터마이징할 수 있습니다.

autocomplete: {
  templates: [
    // theme inferring
    'bg-$color/<opacity>',
    // short hands
    'text-<font-size>',
    // logic OR groups
    '(b|border)-(solid|dashed|dotted|double|hidden|none)',
    // constants
    'w-half',
  ],
  shorthands: {
    // equal to `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)',
    // override built-in short hands
    'num': '(0|1|2|3|4|5|6|7|8|9)',
  },
  extractors: [
      // ...extractors
  ],
}

templates는 자동완성 제안을 지정하기 위해 간단한 DSL을 사용합니다.
shorthands는 단축 이름을 템플릿에 매핑한 것입니다. Array인 경우 논리 OR 그룹이 됩니다.
extractors는 가능한 클래스를 선택하고 클래스 이름 스타일 제안을 올바른 형식으로 변환합니다. 예를 들어, attributify 자동완성 extractor를 어떻게 구현하는지 확인할 수 있습니다.
추가 도움이 필요하면 여기를 참조하세요.

Autocomplete ​

Autocomplete