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/eslint
1 et @unocss/eslint-config
2 :
// 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.0
3 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 !