---
url: https://unocss.dev/integrations/eslint.md
description: ESLint config for UnoCSS (@unocss/eslint-config).
---

# ESLint Config

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

## Installation

::: code-group

```bash [pnpm]
pnpm add -D @unocss/eslint-config
```

```bash [yarn]
yarn add -D @unocss/eslint-config
```

```bash [npm]
npm install -D @unocss/eslint-config
```

```bash [bun]
bun add -D @unocss/eslint-config
```

:::

In [Flat Config Style](https://eslint.org/docs/latest/use/configure/configuration-files-new):

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

export default [
  unocss,
  // other configs
]
```

In legacy `.eslintrc` style:

```json [.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].

`order-attributify` orders attributify attributes themselves. It does not sort utilities inside attributify values such as `un-before="text-center font-sans color-gray"`.

### 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`:

```js [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 */ }],
    },
  },
]
```

```json [.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:

```ts [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` :wrench:

*This rule is designed to work in combination with [compile class transformer](https://unocss.dev/transformers/compile-class).*

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](https://github.com/unocss/unocss/blob/main/packages-presets/transformer-compile-class/src/index.ts#L34). 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`](https://unocss.dev/integrations/svelte-scoped) mode.

## Prior Arts

Thanks to [eslint-plugin-unocss](https://github.com/devunt/eslint-plugin-unocss) by [@devunt](https://github.com/devunt).