ESLint Config

ESLint config for 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

In Flat Config Style:

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

export default [
  unocss,
  // other configs
]

In legacy .eslintrc style:

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

Rules

• @unocss/order - Enforce a specific order for class selectors.
• @unocss/order-attributify - Enforce a specific order for attributify selectors.
• @unocss/blocklist - Disallow specific class selectors [Optional].
• @unocss/enforce-class-compile - Enforce class compile [Optional].

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.

@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.