ESLint Konfiguration

ESLint Konfiguration für 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

Im Flat Config Stil:

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

export default [
  unocss,
  // andere Konfigurationen
]

Im Legacy .eslintrc Stil:

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

Regeln

• @unocss/order - Erzwingt eine bestimmte Reihenfolge für Klassen-Selektoren.
• @unocss/order-attributify - Erzwingt eine bestimmte Reihenfolge für Attributify-Selektoren.
• @unocss/blocklist - Verbietet bestimmte Klassen-Selektoren [Optional].
• @unocss/enforce-class-compile - Erzwingt Klassen-Kompilierung [Optional].

Optionale Regeln

Diese Regeln sind standardmäßig nicht aktiviert. Um sie zu aktivieren, fügen Sie Folgendes zu Ihrer .eslintrc hinzu:

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

@unocss/blocklist

Wirft eine Warnung oder einen Fehler, wenn Utilities verwendet werden, die in der blocklist aufgeführt sind.

Sie können Nachrichten für blockierte Regeln anpassen, um sie informativer und kontextspezifischer zu machen, indem Sie die message Eigenschaft des Meta-Objekts verwenden:

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

@unocss/enforce-class-compile 🔧

Diese Regel ist darauf ausgelegt, in Kombination mit dem Compile Class Transformer zu arbeiten.

Wirft eine Warnung oder einen Fehler, wenn das Klassen-Attribut oder die Direktive nicht mit :uno: beginnt.

🔧 fügt automatisch das Präfix :uno: zu allen Klassen-Attributen und Direktiven hinzu.

Optionen:

• prefix (string) - kann in Kombination mit benutzerdefiniertem Präfix verwendet werden. Standard: :uno:
• enableFix (boolean) - kann für schrittweise Migration verwendet werden, wenn false. Standard: true

Hinweis: Derzeit wird nur Vue unterstützt. Erstellen Sie einen PR, wenn Sie dies in JSX möchten. Wenn Sie dies in Svelte suchen, suchen Sie möglicherweise nach dem svelte-scoped Modus.

Vorherige Arbeiten

Danke an eslint-plugin-unocss von @devunt.