ESLint Config

UnoCSS için ESLint yapılandırması: @unocss/eslint-config.

Installation

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'da:

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

export default [
  unocss,
  // diğer yapılandırmalar
]

Eski .eslintrc stilinde:

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

Rules

• @unocss/order - Sınıf seçicileri için belirli bir sırayı zorunlu kıl.
• @unocss/order-attributify - Attributify seçicileri için belirli bir sırayı zorunlu kıl.
• @unocss/blocklist - Belirli sınıf seçicilerini yasakla [İsteğe bağlı].
• @unocss/enforce-class-compile - Sınıf derlemeyi zorunlu kıl [İsteğe bağlı].

Optional rules

Bu kurallar varsayılan olarak etkin değildir. Etkinleştirmek için .eslintrc'nize aşağıdakileri ekleyin:

{
  "extends": [
    "@unocss"
  ],
  "rules": {
    "@unocss/<rule-name>": "warn", // veya "error",
    "@unocss/<another-rule-name>": ["warn" /* veya "error" */, { /* seçenekler */ }]
  }
}

@unocss/blocklist

blocklist'te listelenen yardımcı programlar eşleştiğinde uyarı veya hata ver.

Yasaklanan kurallar için meta nesnenin message özelliğini kullanarak daha bilgilendirici ve bağlama özgü hale getirmek için mesajları özelleştirebilirsiniz:

export default defineConfig({
  blocklist: [
    ['bg-red-500', { message: 'Bunun yerine bg-red-600 kullanın' }],
    [/-auto$/, { message: s => `Bunun yerine ${s.replace(/-auto$/, '-a')} kullanın` }], // -> "my-auto" blocklist'tedir: Bunun yerine "my-a" kullanın
  ],
})

@unocss/enforce-class-compile 🔧

Bu kural compile class transformer ile birlikte çalışmak üzere tasarlanmıştır.

Sınıf özniteliği veya yönergesi :uno: ile başlamadığında uyarı veya hata ver.

🔧 tüm sınıf özniteliklerine ve yönergelerine otomatik olarak :uno: öneki ekler.

Seçenekler:

• prefix (string) - özel önek ile birlikte kullanılabilir. Varsayılan: :uno:
• enableFix (boolean) - false olduğunda kademeli geçiş için kullanılabilir. Varsayılan: true

Not: şu anda yalnızca Vue desteklenir. Bunu JSX'te istiyorsanız bir PR gönderin. Svelte'de bunu arıyorsanız, svelte-scoped moduna bakın.

Prior Arts

@devunt tarafından eslint-plugin-unocss'e teşekkürler.