ESLint Config

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

I Flat Config-stil:

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

export default [
  unocss,
  // andra konfigurationer
]

I legacy .eslintrc-stil:

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

Regler

• @unocss/order - Tvinga en specifik ordning för klass-selektorer.
• @unocss/order-attributify - Tvinga en specifik ordning för attributify-selektorer.
• @unocss/blocklist - Förbjud specifika klass-selektorer [Valfritt].
• @unocss/enforce-class-compile - Tvinga klass-kompilering [Valfritt].

Valfria regler

Dessa regler är inte aktiverade som standard. För att aktivera dem, lägg till följande i din .eslintrc:

{
  "extends": [
    "@unocss"
  ],
  "rules": {
    "@unocss/<regel-namn>": "warn", // eller "error",
    "@unocss/<annan-regel-namn>": ["warn" /* eller "error" */, { /* alternativ */ }]
  }
}

@unocss/blocklist

Kasta varning eller fel när verktyg som listas i blocklist matchas.

Du kan anpassa meddelanden för blockerade regler för att göra dem mer informativa och kontextspecifika genom att använda message-egenskapen i meta-objektet:

export default defineConfig({
  blocklist: [
    ['bg-red-500', { message: 'Använd bg-red-600 istället' }],
    [/-auto$/, { message: s => `Använd ${s.replace(/-auto$/, '-a')} istället` }], // -> "my-auto" är i blocklist: Använd "my-a" istället
  ],
})

@unocss/enforce-class-compile 🔧

Denna regel är designad för att fungera i kombination med compile class transformer.

Kasta varning eller fel när klass-attribut eller direktiv inte börjar med :uno:.

🔧 lägger automatiskt till prefix :uno: till alla klass-attribut och direktiv.

Alternativ:

• prefix (string) - kan användas i kombination med anpassat prefix. Standard: :uno:
• enableFix (boolean) - kan användas för gradvis migrering när false. Standard: true

Obs: för närvarande stöder endast Vue. Bidra med en PR om du vill ha detta i JSX. Om du letar efter detta i Svelte kan du titta på svelte-scoped läge.

Tidigare Arbeten

Tack till eslint-plugin-unocss av @devunt.