Konfiguracja ESLint

Konfiguracja ESLint dla UnoCSS: @unocss/eslint-config.

Instalacja

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

W stylu Flat Config:

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

export default [
  unocss,
  // inne konfiguracje
]

W stylu legacy .eslintrc:

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

Reguły

• @unocss/order - Wymusza określoną kolejność dla selektorów klas.
• @unocss/order-attributify - Wymusza określoną kolejność dla selektorów attributify.
• @unocss/blocklist - Zabrania określonych selektorów klas [Opcjonalne].
• @unocss/enforce-class-compile - Wymusza kompilację klas [Opcjonalne].

Optional rules

These rules are not enabled by default. To enable it, add the following to your .eslintrc:

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

@unocss/blocklist

Throw warning or error when using utilities listed in blocklist get matched.

You can customize messages for blocked rules to make them more informative and context-specific by using the message property of the meta object:

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

@unocss/enforce-class-compile 🔧

This rule is designed to work in combination with compile class transformer.

Throw warning or error when class attribute or directive doesn't start with :uno:.

🔧 automatically adds prefix :uno: to all class attributes and directives.

Options:

• prefix (string) - can be used in combination with custom prefix. Default: :uno:
• enableFix (boolean) - can be used for gradual migration when false. Default: true

Note: currently only Vue supported. Contribute a PR if you want this in JSX. If you're looking for this in Svelte, you might be looking for svelte-scoped mode.

Prior Arts

Thanks to eslint-plugin-unocss by @devunt.