자동완성

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