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

bun

bun add -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:

.eslintrc

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

Rules

The rule prefix depends on the ESLint configuration style:

• Flat config: unocss/<rule-name>
• Legacy .eslintrc: @unocss/<rule-name>

Available rules:

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

Rule options

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 them, add the following to your flat config or .eslintrc:

eslint.config.js

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

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

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

unocss.config.ts

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.