Config ESLint

Config ESLint pour UnoCSS : @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

En Flat Config Style :

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

export default [
  unocss,
  // autres configs
]

En style .eslintrc classique :

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

Règles

• @unocss/order - Imposer un ordre spécifique pour les sélecteurs de classes.
• @unocss/order-attributify - Imposer un ordre spécifique pour les sélecteurs attributify.
• @unocss/blocklist - Interdire certains sélecteurs de classes [Optionnel].
• @unocss/enforce-class-compile - Imposer la compilation des classes [Optionnel].

Règles optionnelles

Ces règles ne sont pas activées par défaut. Pour les activer, ajoutez ce qui suit à votre .eslintrc :

{
  "extends": [
    "@unocss"
  ],
  "rules": {
    "@unocss/<nom-de-la-règle>": "warn", // ou "error",
    "@unocss/<autre-nom-de-règle>": ["warn" /* ou "error" */, { /* options */ }]
  }
}

@unocss/blocklist

Lance un avertissement ou une erreur lors de l'utilisation d'utilitaires listés dans blocklist.

Vous pouvez personnaliser les messages pour les règles bloquées afin de les rendre plus informatifs et spécifiques au contexte en utilisant la propriété message de l'objet meta :

export default defineConfig({
  blocklist: [
    ['bg-red-500', { message: 'Utilisez bg-red-600 à la place' }],
    [/-auto$/, { message: s => `Utilisez ${s.replace(/-auto$/, '-a')} à la place` }], // -> "my-auto" est dans la blocklist : Utilisez "my-a" à la place
  ],
})

@unocss/enforce-class-compile 🔧

Cette règle est conçue pour fonctionner en combinaison avec le transformateur de compilation de classes.

Lance un avertissement ou une erreur lorsque l'attribut ou la directive de classe ne commence pas par :uno:.

🔧 ajoute automatiquement le préfixe :uno: à tous les attributs et directives de classe.

Options :

• prefix (string) - peut être utilisé avec un préfixe personnalisé. Par défaut : :uno:
• enableFix (boolean) - peut être utilisé pour une migration progressive lorsque false. Par défaut : true

Note : actuellement, seul Vue est supporté. Contribuez une PR si vous souhaitez cela pour JSX. Si vous cherchez cela pour Svelte, vous cherchez peut-être le mode svelte-scoped.

Inspirations

Merci à eslint-plugin-unocss par @devunt.