Configurazione ESLint

Configurazione ESLint per UnoCSS: @unocss/eslint-config.

Installazione

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

In stile Flat Config:

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

export default [
  unocss,
  // altre configurazioni
]

In stile legacy .eslintrc:

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

Regole

• @unocss/order - Impone un ordine specifico per i selettori di classe.
• @unocss/order-attributify - Impone un ordine specifico per i selettori attributify.
• @unocss/blocklist - Disabilita selettori di classe specifici [Opzionale].
• @unocss/enforce-class-compile - Impone la compilazione delle classi [Opzionale].

Regole opzionali

Queste regole non sono abilitate per impostazione predefinita. Per abilitarle, aggiungi quanto segue al tuo .eslintrc:

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

@unocss/blocklist

Lancia un avviso o un errore quando vengono utilizzate utility elencate in blocklist che vengono corrisposte.

Puoi personalizzare i messaggi per le regole bloccate per renderli più informativi e specifici del contesto usando la proprietà message dell'oggetto meta:

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

@unocss/enforce-class-compile 🔧

Questa regola è progettata per funzionare in combinazione con il trasformatore compile class.

Lancia un avviso o un errore quando l'attributo o la direttiva di classe non inizia con :uno:.

🔧 aggiunge automaticamente il prefisso :uno: a tutti gli attributi e direttive di classe.

Opzioni:

• prefix (string) - può essere usato in combinazione con prefisso personalizzato. Predefinito: :uno:
• enableFix (boolean) - può essere usato per migrazione graduale quando false. Predefinito: true

Nota: attualmente è supportato solo Vue. Contribuisci con un PR se vuoi questo in JSX. Se stai cercando questo in Svelte, potresti cercare la modalità svelte-scoped.

Lavori Precedenti

Grazie a eslint-plugin-unocss di @devunt.