Règles Musea et CSS

Chaque règle présente sur cette page son objectif, sa configuration et ses exemples complets Mauvais et Bon, accompagnés de leurs explications. Les lignes surlignées montrent les modifications ; le code copié conserve la source complète. Les limites de prise en charge actuelles sont précisées avant les exemples concernés.

Règle	Exemples	Objectif
`css/no-display-none`	Mauvais · Bon	Suggérer v-show plutôt que display: none
`css/no-hardcoded-values`	Mauvais · Bon	Suggérer des variables CSS plutôt que des valeurs codées en dur
`css/no-id-selectors`	Mauvais · Bon	Déconseiller les sélecteurs d’identifiant en CSS
`css/no-important`	Mauvais · Bon	Déconseiller !important en CSS
`css/no-utility-classes`	Mauvais · Bon	Déconseiller l’implémentation de classes utilitaires dans les styles des composants
`css/no-v-bind-performance`	Mauvais · Bon	Signaler le coût de performance de v-bind() en CSS
`css/prefer-logical-properties`	Mauvais · Bon	Recommander les propriétés logiques CSS pour mieux prendre en charge l’internationalisation
`css/prefer-nested-selectors`	Mauvais · Bon	Recommander l’imbrication CSS pour les sélecteurs de descendants
`css/prefer-slotted`	Mauvais · Bon	Recommander ::v-slotted() pour styliser le contenu des slots
`css/require-font-display`	Mauvais · Bon	Exiger font-display dans les règles @font-face
`musea/no-empty-variant`	Mauvais · Bon	Interdire les blocs <variant> vides
`musea/prefer-design-tokens`	Mauvais · Bon	Préférer les variables CSS de design tokens aux valeurs primitives codées en dur
`musea/require-component`	Mauvais · Bon	Exiger l’attribut component dans le bloc <art>
`musea/require-title`	Mauvais · Bon	Exiger l’attribut title dans le bloc <art>
`musea/unique-variant-names`	Mauvais · Bon	Exiger des noms de variants uniques
`musea/valid-variant`	Mauvais · Bon	Exiger un attribut name dans les blocs <variant>

Toutes les règles · Options des règles · Correspondance de migration ESLint · Vérifications du projet · Attributs entre composants

`css/no-display-none`

Suggérer v-show plutôt que display: none

Gravité par défaut: warning
Préréglages: opinionated, nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs style en CSS standard (les blocs scss, sass, less et stylus sont ignorés)
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-display-none": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La déclaration .message masque le paragraphe local au moyen du CSS plutôt que d’une condition de visibilité dans le template.

<template>
  <p class="message">Saved</p>
</template>

<style scoped>
.message {
  display: none;
}
</style>

Bon

v-show="isSaved" rend la condition de visibilité explicite sur le paragraphe local et supprime display: none.

<template>
  <p v-show="isSaved" class="message">Saved</p>
</template>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`css/no-hardcoded-values`

Suggérer des variables CSS plutôt que des valeurs codées en dur

Gravité par défaut: warning
Préréglages: opinionated, nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs style en CSS standard (les blocs scss, sass, less et stylus sont ignorés)
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-hardcoded-values": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le bouton place directement des nombres d’espacement et une couleur hexadécimale dans les déclarations.

<style scoped>
.button {
  padding: 12px 16px;
  color: #174ea6;
}
</style>

Bon

Les déclarations référencent des propriétés personnalisées d’espacement et de couleur nommées, afin que ces valeurs puissent être maintenues sous forme de tokens.

<style scoped>
.button {
  padding: var(--space-3) var(--space-4);
  color: var(--color-action-text);
}
</style>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`css/no-id-selectors`

Déconseiller les sélecteurs d’identifiant en CSS

Gravité par défaut: warning
Préréglages: opinionated, nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs style en CSS standard (les blocs scss, sass, less et stylus sont ignorés)
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-id-selectors": "warn"
      }
    },
  },
});

vp run lint

Mauvais

#submit lie la règle de style à un sélecteur d’identifiant.

<style scoped>
#submit {
  font-weight: 600;
}
</style>

Bon

La classe .submit fournit un point d’accroche de style réutilisable sans sélecteur d’identifiant.

<style scoped>
.submit {
  font-weight: 600;
}
</style>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`css/no-important`

Déconseiller !important en CSS

Gravité par défaut: warning
Préréglages: opinionated, nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs style en CSS standard (les blocs scss, sass, less et stylus sont ignorés)
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-important": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La déclaration de couleur remplace la priorité normale de la cascade avec !important.

<style scoped>
.button {
  color: red !important;
}
</style>

Bon

La couleur provient d’une propriété personnalisée sans déclaration important.

<style scoped>
.button {
  color: var(--button-color);
}
</style>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`css/no-utility-classes`

Déconseiller l’implémentation de classes utilitaires dans les styles des composants

Gravité par défaut: warning
Préréglages: opinionated, nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs style en CSS standard (les blocs scss, sass, less et stylus sont ignorés)
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-utility-classes": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Les sélecteurs écrits utilisent des noms de forme utilitaire, tels que .flex, .mt-4 et .text-center.

<style scoped>
.flex { display: flex; }
.mt-4 { margin-top: 1rem; }
.text-center { text-align: center; }
</style>

Bon

Un sélecteur .my-component propre au composant rassemble ses styles sous un nom sémantique unique.

<style scoped>
.my-component { display: flex; margin-top: 1rem; }
</style>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`css/no-v-bind-performance`

Signaler le coût de performance de v-bind() en CSS

Gravité par défaut: warning
Préréglages: opinionated, nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs style en CSS standard (les blocs scss, sass, less et stylus sont ignorés)
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/no-v-bind-performance": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La feuille de style lit la valeur changeante offset au moyen du mécanisme CSS v-bind() du SFC.

<style scoped>
.card {
  transform: translateX(v-bind(offset));
}
</style>

Bon

L’élément reçoit directement la transformation changeante via sa liaison de style.

<template>
  <article :style="{ transform: `translateX(${offset}px)` }" class="card" />
</template>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`css/prefer-logical-properties`

Recommander les propriétés logiques CSS pour mieux prendre en charge l’internationalisation

Gravité par défaut: warning
Préréglages: opinionated, nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs style en CSS standard (les blocs scss, sass, less et stylus sont ignorés)
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/prefer-logical-properties": "warn"
      }
    },
  },
});

vp run lint

Mauvais

margin-left fixe la marge sur un côté physique indépendamment du sens d’écriture.

<style scoped>
.panel {
  margin-left: 1rem;
}
</style>

Bon

margin-inline-start suit plutôt le début de la direction en ligne.

<style scoped>
.panel {
  margin-inline-start: 1rem;
}
</style>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`css/prefer-nested-selectors`

Recommander l’imbrication CSS pour les sélecteurs de descendants

Gravité par défaut: warning
Préréglages: opinionated, nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs style en CSS standard (les blocs scss, sass, less et stylus sont ignorés)
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/prefer-nested-selectors": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le sélecteur de descendant .card .title répète le sélecteur parent dans une règle à plat.

<style scoped>
.card .title { color: red; }
</style>

Bon

La règle .title est imbriquée dans .card, ce qui rassemble la relation de style parent-enfant.

<style scoped>
.card { .title { color: red; } }
</style>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`css/prefer-slotted`

Recommander ::v-slotted() pour styliser le contenu des slots

Gravité par défaut: warning
Préréglages: opinionated, nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs style en CSS standard (les blocs scss, sass, less et stylus sont ignorés)
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/prefer-slotted": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La feuille de style scoped cible le point d’insertion slot plutôt que les éléments fournis au slot.

<style scoped>
slot { color: red; }
</style>

Bon

:slotted(.label) cible l’élément label fourni au moyen du sélecteur de slot scoped.

<style scoped>
:slotted(.label) { color: red; }
</style>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`css/require-font-display`

Exiger font-display dans les règles @font-face

Gravité par défaut: warning
Préréglages: opinionated, nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs style en CSS standard (les blocs scss, sass, less et stylus sont ignorés)
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "css/require-font-display": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La déclaration font-face définit la source de la police, mais omet sa politique font-display.

<style>
@font-face {
  font-family: "Inter";
  src: url("/inter.woff2") format("woff2");
}
</style>

Bon

font-display: swap sélectionne explicitement la politique d’affichage passant d’une police de repli à la police chargée.

<style>
@font-face {
  font-family: "Inter";
  src: url("/inter.woff2") format("woff2");
  font-display: swap;
}
</style>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`musea/no-empty-variant`

Interdire les blocs <variant> vides

Gravité par défaut: warning
Préréglages: none
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs art, variant et style des fichiers .art.vue de Musea
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/no-empty-variant": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le variant nommé primary est vide et ne fournit donc aucun contenu d’aperçu.

<art title="Button" component="./Button.vue">
  <variant name="primary" />
</art>

Bon

Le variant affiche un Button primary avec son contenu Save.

<art title="Button" component="./Button.vue">
  <variant name="primary">
    <Button tone="primary">Save</Button>
  </variant>
</art>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`musea/prefer-design-tokens`

Préférer les variables CSS de design tokens aux valeurs primitives codées en dur

Gravité par défaut: warning
Préréglages: none
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs art, variant et style des fichiers .art.vue de Musea
Options: Consultez les options typées et leurs valeurs par défaut.

Nécessite un fichier .art.vue et l’inventaire des tokens présenté ci-dessous. Aucun token n’est déduit d’une couleur arbitraire.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/prefer-design-tokens": "warn"
      },
      "ruleOptions": {
        "musea/prefer-design-tokens": {
          "tokens": [
            {
              "path": "color.primary",
              "value": "#3b82f6",
              "tier": "semantic"
            }
          ]
        }
      }
    },
  },
});

vp run lint

Mauvais

L’exemple art utilise la couleur bleue littérale au lieu du design token primaire configuré.

Button.art.vue

<art title="Button" component="Button">
<variant name="Primary"><Button /></variant>
</art>
<style scoped>
.button {
  color: #3b82f6;
}
</style>

Bon

Le style référence --color-primary, le token configuré pour cet exemple.

Button.art.vue

<art title="Button" component="Button">
<variant name="Primary"><Button /></variant>
</art>
<style scoped>
.button {
  color: var(--color-primary);
}
</style>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`musea/require-component`

Exiger l’attribut component dans le bloc <art>

Gravité par défaut: warning
Préréglages: none
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs art, variant et style des fichiers .art.vue de Musea
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/require-component": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le bloc art fournit un titre, mais n’identifie pas le composant dont il présente l’aperçu.

<art title="Button">
  <variant name="primary" />
</art>

Bon

defineArt fournit ./Button.vue comme composant du bloc art.

<script setup>
defineArt("./Button.vue", { title: "Button" });
</script>

<art>
  <variant name="primary" />
</art>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`musea/require-title`

Exiger l’attribut title dans le bloc <art>

Gravité par défaut: error
Préréglages: none
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs art, variant et style des fichiers .art.vue de Musea
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/require-title": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le bloc art identifie Button.vue, mais ne fournit aucun titre.

<art component="./Button.vue">
  <variant name="primary" />
</art>

Bon

Les options de defineArt fournissent le titre Button pour le bloc art.

<script setup>
defineArt("./Button.vue", { title: "Button" });
</script>

<art>
  <variant name="primary" />
</art>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`musea/unique-variant-names`

Exiger des noms de variants uniques

Gravité par défaut: error
Préréglages: none
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs art, variant et style des fichiers .art.vue de Musea
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/unique-variant-names": "error"
      }
    },
  },
});

vp run lint

Mauvais

Deux variants du même bloc art utilisent tous deux le nom primary.

<art title="Button" component="./Button.vue">
  <variant name="primary" />
  <variant name="primary" />
</art>

Bon

Les variants possèdent les noms distincts primary et secondary.

<art title="Button" component="./Button.vue">
  <variant name="primary" />
  <variant name="secondary" />
</art>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

`musea/valid-variant`

Exiger un attribut name dans les blocs <variant>

Gravité par défaut: error
Préréglages: none
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Blocs art, variant et style des fichiers .art.vue de Musea
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "musea/valid-variant": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le variant omet le nom nécessaire pour identifier l’aperçu.

<art title="Button" component="./Button.vue">
  <variant />
</art>

Bon

Le nom primary identifie ce variant.

<art title="Button" component="./Button.vue">
  <variant name="primary" />
</art>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles