Configurare ESLint

Configurare ESLint pentru UnoCSS: @unocss/eslint-config.

Instalare

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

În Stil Configurare Flat:

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

export default [
  unocss,
  // alte configurări
]

În stilul legacy .eslintrc:

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

Reguli

• @unocss/order - Impune o ordine specifică pentru selectorii de clasă.
• @unocss/order-attributify - Impune o ordine specifică pentru selectorii attributify.
• @unocss/blocklist - Interzice selectorii de clasă specifici [Opțional].
• @unocss/enforce-class-compile - Impune compilarea clasei [Opțional].

Reguli opționale

Aceste reguli nu sunt activate implicit. Pentru a le activa, adăugați următoarele în .eslintrc:

{
  "extends": [
    "@unocss"
  ],
  "rules": {
    "@unocss/<rule-name>": "warn", // sau "error",
    "@unocss/<another-rule-name>": ["warn" /* sau "error" */, { /* opțiuni */ }]
  }
}

@unocss/blocklist

Aruncă avertizare sau eroare când se utilizează utilitățile listate în blocklist.

Puteți personaliza mesajele pentru regulile blocate pentru a le face mai informative și specifice contextului folosind proprietatea message a obiectului meta:

export default defineConfig({
  blocklist: [
    ['bg-red-500', { message: 'Folosește bg-red-600 în schimb' }],
    [/-auto$/, { message: s => `Folosește ${s.replace(/-auto$/, '-a')} în schimb` }], // -> "my-auto" este în blocklist: Folosește "my-a" în schimb
  ],
})

@unocss/enforce-class-compile 🔧

Această regulă este concepută pentru a funcționa în combinație cu transformatorul de compilare a claselor.

Aruncă avertizare sau eroare când atributul clasei sau directiva nu începe cu :uno:.

🔧 adaugă automat prefixul :uno: la toate atributelor și directele clasivele.

Opțiuni: