Configuración de ESLint

Configuración de ESLint para UnoCSS: @unocss/eslint-config.

Instalación

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 Estilo de Configuración Plana:

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

export default [
  unocss,
  // otras configuraciones
]

En estilo legacy .eslintrc:

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

Reglas

• @unocss/order - Hacer cumplir un orden específico para selectores de clase.
• @unocss/order-attributify - Hacer cumplir un orden específico para selectores attributify.
• @unocss/blocklist - Prohibir selectores de clase específicos [Opcional].
• @unocss/enforce-class-compile - Hacer cumplir la compilación de clase [Opcional].

Reglas opcionales

Estas reglas no están habilitadas por defecto. Para habilitarlas, agrega lo siguiente a tu .eslintrc:

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

@unocss/blocklist

Lanzar advertencia o error cuando se usen utilidades listadas en blocklist que coincidan.

Puedes personalizar mensajes para reglas bloqueadas para hacerlas más informativas y específicas del contexto usando la propiedad message del objeto meta:

export default defineConfig({
  blocklist: [
    ['bg-red-500', { message: 'Usa bg-red-600 en su lugar' }],
    [/-auto$/, { message: s => `Usa ${s.replace(/-auto$/, '-a')} en su lugar` }], // -> "my-auto" está en la lista de bloqueo: Usa "my-a" en su lugar
  ],
})

@unocss/enforce-class-compile 🔧

Esta regla está diseñada para trabajar en combinación con el transformador de compilación de clase.

Lanzar advertencia o error cuando el atributo o directiva de clase no comience con :uno:.

🔧 automáticamente agrega el prefijo :uno: a todos los atributos y directivas de clase.

Opciones:

• prefix (string) - puede usarse en combinación con prefijo personalizado. Por defecto: :uno:
• enableFix (boolean) - puede usarse para migración gradual cuando es false. Por defecto: true

Nota: actualmente solo Vue está soportado. Contribuye un PR si quieres esto en JSX. Si estás buscando esto en Svelte, podrías estar buscando el modo svelte-scoped.

Trabajos Previos

Gracias a eslint-plugin-unocss por @devunt.