Configure Nuxt ESLint with UnoCSS

If you're using UnoCSS with Nuxt, and you're a good person, then you're using the Nuxt ESLint module to maintain clean and consistent code. It can be beneficial to use the 4 ESLint rules provided by UnoCSS:

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

Here's a proposed ESLint configuration using the @nuxt/eslint¹ and @unocss/eslint-config² packages:

// eslint.config.mjs
import unocss from '@unocss/eslint-config/flat'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  unocss,
  {
    rules: {
      // Your custom rules here, for example:
      'no-console': ['warn'],
      'vue/block-order': ['warn', {
        order: ['script', 'template', 'style'],
      }],
    },
  },
)

To use the .mjs format, make sure you're using Eslint >= v9.0.0^{3 4} and configure your package.json with "type": "module" to enable ECMAScript modules⁵.

// package.json
{
  "type": "module",
  // [...]
}

If you add the // ts-check comment on the first line of the file, you will get a TypeScript error. This will likely be fixed in a future version (both modules are still in v0.x.x at the moment).

Good to know: The Nuxt Eslint module includes ESLint Config Inspector⁶ and displays it directly in Nuxt DevTools. Handy for tweaking your configuration!