ESLint Config

UnoCSS용 ESLint 설정: @unocss/eslint-config.

설치

pnpm

pnpm add -D @unocss/eslint-config

yarn

yarn add -D @unocss/eslint-config

npm

npm install -D @unocss/eslint-config

bun

bun add -D @unocss/eslint-config

Flat Config Style에서:

import unocss from '@unocss/eslint-config/flat'

export default [
  unocss,
  // other configs
]

레거시 .eslintrc 스타일에서:

{
  "extends": [
    "@unocss"
  ]
}

규칙

• @unocss/order - 클래스 선택자에 대한 특정 순서 강제.
• @unocss/order-attributify - attributify 선택자에 대한 특정 순서 강제.
• @unocss/blocklist - 특정 클래스 선택자 금지 [선택사항].
• @unocss/enforce-class-compile - 클래스 컴파일 강제 [선택사항].

선택적 규칙

이러한 규칙은 기본적으로 활성화되지 않습니다. 활성화하려면 .eslintrc에 다음을 추가하세요:

{
  "extends": [
    "@unocss"
  ],
  "rules": {
    "@unocss/<rule-name>": "warn", // or "error",
    "@unocss/<another-rule-name>": ["warn" /* or "error" */, { /* options */ }]
  }
}

@unocss/blocklist

blocklist에 나열된 유틸리티가 매치될 때 경고 또는 오류를 발생시킵니다.

메타 객체의 message 속성을 사용하여 차단된 규칙에 대한 메시지를 사용자 정의하여 더 유익하고 컨텍스트별로 만들 수 있습니다:

export default defineConfig({
  blocklist: [
    ['bg-red-500', { message: 'Use bg-red-600 instead' }],
    [/-auto$/, { message: s => `Use ${s.replace(/-auto$/, '-a')} instead` }], // -> "my-auto" is in blocklist: Use "my-a" instead
  ],
})

@unocss/enforce-class-compile 🔧

이 규칙은 compile class transformer와 함께 작동하도록 설계되었습니다.

클래스 속성이나 지시문이 :uno:로 시작하지 않을 때 경고 또는 오류를 발생시킵니다.

🔧 모든 클래스 속성과 지시문에 자동으로 :uno: 접두사를 추가합니다.

옵션:

• prefix (string) - 사용자 정의 접두사와 함께 사용할 수 있습니다. 기본값: :uno:
• enableFix (boolean) - false일 때 점진적 마이그레이션에 사용할 수 있습니다. 기본값: true

참고: 현재 Vue만 지원됩니다. JSX에서 이것을 원한다면 PR을 기여해주세요. Svelte에서 이것을 찾고 있다면 svelte-scoped 모드를 찾고 있을 수 있습니다.

Prior Arts

@devunt의 eslint-plugin-unocss에 감사드립니다.