ESLint Config

ESLint config for UnoCSS: @unocss/eslint-config.

Installation

::: code-group

pnpm add -D @unocss/eslint-config

yarn add -D @unocss/eslint-config

npm install -D @unocss/eslint-config

bun add -D @unocss/eslint-config

:::

In Flat Config Style:

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

Rule options

@unocss/order

• unoFunctions (string[]) - mark function calls of matched names to enforce this rule. These are plain names, not patterns, case insensitive. Default: ['clsx', 'classnames'].
• unoVariables (string[]) - mark variable declarations of matched names to enforce this rule. These are regex patterns with flags i. Default: ['^cls', 'classNames?$']. for example will match variable names clsButton and buttonClassNames.

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 :wrench:

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

:wrench: 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.