Retour
Publié le Sep 5, 2024

Configurer Nuxt ESLint avec UnoCSS

Si vous utilisez UnoCSS avec Nuxt, et que vous êtes quelqu'un de bien, vous utilisez le module Nuxt ESLint pour maintenir un code propre et cohérent. Il peut être judicieux d'utiliser les 4 règles ESLint proposées par UnoCSS :

  • @unocss/order Applique un ordre spécifique aux classes.
  • @unocss/order-attributify Applique un ordre spécifique aux sélecteurs attributify.
  • @unocss/blocklist Interdit certains sélecteurs de classe. Optionnel.
  • @unocss/enforce-class-compile Applique la compilation des classes. Optionnel.

Voici donc une proposition de configuration ESLint utilisant les packages @nuxt/eslint1 et @unocss/eslint-config2 :

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

export default withNuxt(
  unocss,
  {
    rules: {
      // Vos règles personnalisées ici, par exemple :
      'no-console': ['warn'],
      'vue/block-order': ['warn', {
        order: ['script', 'template', 'style'],
      }],
    },
  },
)

Pour utiliser le format .mjs, assurez-vous d'utiliser Eslint >= v9.0.03 4 et de configurer votre package.json avec "type": "module" pour activer les modules ECMAScript5.

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

Si vous ajoutez le commentaire // ts-check sur la première ligne du ficher, vous obtiendrez une erreur de type TypeScript. Cela sera probablement corrigé dans une future version (les deux modules sont encore en v0.x.x à l'heure actuelle).

Bon à savoir : Le module Nuxt Eslint embarque ESLint Config Inspector6 et l'affiche directment dans Nuxt DevTools. Pratique pour peaufiner votre configuration !

Footnotes

  1. 1. Module Nuxt Eslint
  2. 2. Module ESlint Config de UnoCSS
  3. 3. Migrer vers Eslint v9.x
  4. 4. Migrer vers la Flat config d'ESLint
  5. 5. Node.js - Activer les modules ECMAScript
  6. 6. ESLint Config Inspector