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, including the values of prefixed attributify attributes (e.g. un-before="...").
• order-attributify - Enforce a specific order for attributify selectors.
• blocklist - Disallow specific class selectors [Optional].
• enforce-class-compile - Enforce class compile [Optional].

order-attributify orders attributify attributes themselves. The utilities inside the value of prefixed attributes, such as un-before="text-center font-sans color-gray", are sorted by order. The prefix is read from the prefix option of presetAttributify in your UnoCSS configuration, defaulting to un-. An empty prefix disables sorting of attribute values other than class. Other attributify values are not sorted yet.

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.

Usage with Oxlint

The plugin can also run in Oxlint through its JS plugins support. Install @unocss/eslint-plugin directly:

pnpm

pnpm add -D oxlint @unocss/eslint-plugin

yarn

yarn add -D oxlint @unocss/eslint-plugin

npm

npm install -D oxlint @unocss/eslint-plugin

bun

bun add -D oxlint @unocss/eslint-plugin

TIP

With Yarn Berry, set nodeLinker: node-modules in .yarnrc.yml. Oxlint can't load JS plugins under Yarn Plug'n'Play.

Then enable the rules in your Oxlint config. The rule prefix is unocss/:

.oxlintrc.json

{
  "jsPlugins": ["@unocss/eslint-plugin"],
  "rules": {
    "unocss/order": "warn",
    "unocss/blocklist": "error"
  }
}

To use a custom UnoCSS config path, set it in settings. The path is resolved from the directory where Oxlint runs, not from the config file:

.oxlintrc.json

{
  "jsPlugins": ["@unocss/eslint-plugin"],
  "settings": {
    "unocss": {
      "configPath": "./config/uno.config.ts"
    }
  }
}

WARNING

JS plugins in Oxlint are still experimental. Autofix with oxlint --fix is supported.

Only script code is linted: JS, TS, JSX and TSX files, plus <script> blocks in Vue and Svelte files and Astro frontmatter. Vue, Svelte and Astro templates are not linted yet, because Oxlint doesn't support custom parsers (oxc#15761).

Rule coverage in script code:

• unocss/order: class attributes, clsx()-like calls, and cls* and *className(s) variables (configurable through unoVariables). In those variables, strings and template literals are checked, including object values, function return values and call arguments, but not ternaries
• unocss/blocklist: string literals in JSX class and className attributes only
• unocss/order-attributify and unocss/enforce-class-compile: not supported, they only work in Vue templates

Prior Arts

Thanks to eslint-plugin-unocss by @devunt.