Règles de l’écosystème

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.

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

ecosystem/nuxt-prefer-nuxt-link

Préférer NuxtLink pour les liens internes à l’application

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
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": {
        "ecosystem/nuxt-prefer-nuxt-link": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La destination interne des paramètres utilise un lien ordinaire dans une application Nuxt.

<template>
  <a href="/settings">Settings</a>
</template>

Bon

NuxtLink gère la même destination interne au moyen du routeur Nuxt.

<template>
  <NuxtLink to="/settings">Settings</NuxtLink>
</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

ecosystem/pinia-prefer-store-to-refs

Préférer storeToRefs() lors de la déstructuration des stores Pinia

Mauvais · Bon

Gravité par défaut: warning
Préréglages: ecosystem
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Scripts JS/TS des SFC Vue ; les exemples montrent la forme concernée de l’Options API ou de script setup
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": {
        "ecosystem/pinia-prefer-store-to-refs": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Déstructurer name directement depuis le store sépare la valeur de son accès réactif au store.

<script setup lang="ts">
const { name } = useUserStore();
</script>

Bon

Le store reste intact et storeToRefs crée une référence réactive pour name.

<script setup lang="ts">
const store = useUserStore();
const { name } = storeToRefs(store);
</script>

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

ecosystem/router-link-require-to

Exiger une destination to sur les composants RouterLink et NuxtLink

Mauvais · Bon

Gravité par défaut: error
Préréglages: ecosystem
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Un lien constituant l’unique racine d’un SFC peut hériter de sa destination via les attributs du parent. Cet exemple utilise un lien imbriqué, dont la destination doit être explicite.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ecosystem/router-link-require-to": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le RouterLink imbriqué n’a pas de destination to ; il ne peut pas compter sur la transmission automatique des attributs racines.

<template>
<nav><RouterLink>Settings</RouterLink></nav>
</template>

Bon

to="/settings" fournit explicitement la destination du lien imbriqué.

<template>
<nav><RouterLink to="/settings">Settings</RouterLink></nav>
</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

ecosystem/void-link-require-href

Exiger href sur les composants Link de Void Vue

Mauvais · Bon

Gravité par défaut: error
Préréglages: ecosystem
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
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": {
        "ecosystem/void-link-require-href": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le Link importé depuis @void/vue omet sa destination href.

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link>Settings</Link>
</template>

Bon

Le même Link importé reçoit la destination des paramètres via href.

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link href="/settings">Settings</Link>
</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

ecosystem/void-link-valid-method

Valider les props method statiques des composants Link de Void Vue

Mauvais · Bon

Gravité par défaut: warning
Préréglages: ecosystem
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
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": {
        "ecosystem/void-link-valid-method": "warn"
      }
    },
  },
});

vp run lint

Mauvais

L’action DELETE demande un préchargement, alors que prefetch est destiné aux requêtes de navigation.

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link href="/posts/1" method="DELETE" prefetch>Delete</Link>
</template>

Bon

Supprimer prefetch conserve l’action DELETE sans précharger cette requête non GET.

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link href="/posts/1" method="DELETE">Delete</Link>
</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

ecosystem/vue-i18n-no-missing-key

Signaler les clés vue-i18n statiques absentes des messages locaux du SFC

Mauvais · Bon

Gravité par défaut: warning
Préréglages: ecosystem
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
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": {
        "ecosystem/vue-i18n-no-missing-key": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le template demande auth.missing, mais les messages anglais locaux ne déclarent que auth.login.

<template>{{ $t("auth.missing") }}</template>

<i18n lang="json">
{ "en": { "auth": { "login": "Log in" } } }
</i18n>

Bon

Le template demande la clé auth.login qui existe dans les messages locaux.

<template>{{ $t("auth.login") }}</template>

<i18n lang="json">
{ "en": { "auth": { "login": "Log in" } } }
</i18n>

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

ecosystem/vue-router-prefer-named-link

Préférer les objets de routes nommées aux chaînes de chemin statiques dans RouterLink

Mauvais · Bon

Gravité par défaut: warning
Préréglages: ecosystem
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
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": {
        "ecosystem/vue-router-prefer-named-link": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La destination de RouterLink est un chemin littéral plutôt qu’une route nommée.

<template>
  <RouterLink to="/settings">Settings</RouterLink>
</template>

Bon

L’objet de route lié identifie la destination par son nom de route settings.

<template>
  <RouterLink :to="{ name: 'settings' }">Settings</RouterLink>
</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

ecosystem/vue-router-prefer-named-push

Préférer les objets de routes nommées pour la navigation programmatique de Vue Router

Mauvais · Bon

Gravité par défaut: warning
Préréglages: ecosystem
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Scripts JS/TS des SFC Vue ; les exemples montrent la forme concernée de l’Options API ou de script setup
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": {
        "ecosystem/vue-router-prefer-named-push": "warn"
      }
    },
  },
});

vp run lint

Mauvais

router.push reçoit une chaîne de chemin liée à la graphie actuelle de l’URL.

<script setup lang="ts">
router.push("/settings");
</script>

Bon

router.push reçoit un objet de route possédant le nom stable settings.

<script setup lang="ts">
router.push({ name: "settings" });
</script>

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

ecosystem/vue-test-utils-no-html-snapshot

Éviter les instantanés de wrapper.html() dans les tests Vue Test Utils

Mauvais · Bon

Gravité par défaut: warning
Préréglages: ecosystem
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Scripts JS/TS des SFC Vue ; les exemples montrent la forme concernée de l’Options API ou de script setup
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": {
        "ecosystem/vue-test-utils-no-html-snapshot": "warn"
      }
    },
  },
});

vp run lint

Mauvais

L’assertion capture l’ensemble du HTML du wrapper au lieu de vérifier le comportement attendu.

<script setup lang="ts">
expect(wrapper.html()).toMatchSnapshot();
</script>

Bon

L’assertion vérifie que le texte affiché contient Saved.

<script setup lang="ts">
expect(wrapper.text()).toContain("Saved");
</script>

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

nuxt/no-nuxt-config-test-key

Interdire la clé test dans la configuration Nuxt

Mauvais · Bon

Gravité par défaut: error
Préréglages: nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Fichiers de configuration Nuxt (nuxt.config.ts)
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": {
        "nuxt/no-nuxt-config-test-key": "error"
      }
    },
  },
});

vp run lint

Mauvais

La configuration Nuxt exportée définit la clé d’identifiant test sur le booléen true, la forme de configuration obsolète rejetée par cette règle.

nuxt.config.ts

export default defineNuxtConfig({ test: true });

Bon

La configuration vide supprime cette propriété booléenne test. Cet exemple n’interdit pas un objet de configuration de test.

nuxt.config.ts

export default defineNuxtConfig({});

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

nuxt/no-page-meta-runtime-values

Interdire les valeurs du contexte d’exécution évaluées immédiatement dans definePageMeta, extrait dans un chunk séparé à la compilation et exécuté avant le setup du composant

Mauvais · Bon

Gravité par défaut: error
Préréglages: nuxt
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Scripts JS/TS des SFC Vue ; les exemples montrent la forme concernée de l’Options API ou de script setup
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": {
        "nuxt/no-page-meta-runtime-values": "error"
      }
    },
  },
});

vp run lint

Mauvais

useRoute() est évalué immédiatement lors de la construction de l’objet definePageMeta, alors que la macro déplace ces métadonnées hors du contexte d’exécution du setup.

<script setup lang="ts">
definePageMeta({ title: useRoute() });
</script>

Bon

validate reçoit un callback ; son accès à useRoute().params.id est donc différé jusqu’à l’exécution de ce callback. La règle distingue les corps de fonctions différés des valeurs de métadonnées évaluées immédiatement.

<script setup lang="ts">
definePageMeta({ validate: () => Boolean(useRoute().params.id) });
</script>

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

nuxt/nuxt-config-keys-order

Préférer l’ordre recommandé des propriétés de configuration Nuxt

Mauvais · Bon

Gravité par défaut: error
Préréglages: nuxt
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Fichiers de configuration Nuxt (nuxt.config.ts)
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": {
        "nuxt/nuxt-config-keys-order": "error"
      }
    },
  },
});

vp run lint

Mauvais

La configuration place ssr avant modules, inversant leur ordre dans la séquence de clés Nuxt recommandée par la règle.

nuxt.config.ts

export default defineNuxtConfig({ ssr: true, modules: [] });

Bon

Placer modules avant ssr préserve les deux valeurs tout en respectant l’ordre prescrit ; la correction change la disposition plutôt que le sens des options.

nuxt.config.ts

export default defineNuxtConfig({ modules: [], ssr: true });

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

nuxt/prefer-import-meta

Préférer import.meta.* à process.*

Mauvais · Bon

Gravité par défaut: error
Préréglages: nuxt
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Scripts JS/TS des SFC Vue ; les exemples montrent la forme concernée de l’Options API ou de script setup
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": {
        "nuxt/prefer-import-meta": "error"
      }
    },
  },
});

vp run lint

Mauvais

process.client utilise un ancien indicateur d’environnement Nuxt que la règle demande de migrer vers import.meta.

<script setup lang="ts">
if (process.client) console.log("browser");
</script>

Bon

import.meta.client conserve la branche réservée au navigateur de manière explicite avec l’indicateur d’environnement de remplacement.

<script setup lang="ts">
if (import.meta.client) console.log("browser");
</script>

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