Règles Vue

Chaque règle Vue présente son objectif, sa configuration et ses mauvais et bons exemples sur cette page. Les lignes surlignées indiquent les modifications ; le code copié conserve la source complète.

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

vue/a11y-img-alt

Exiger un attribut alt sur les images pour les rendre accessibles

Mauvais · Bon

Gravité par défaut: warning
Préréglages: none
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": {
        "vue/a11y-img-alt": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Ni l’image statique ni l’image dont la source est dynamique ne fournit d’attribut alt.

<template>
<img src="/photo.jpg" />
<img :src="photo" />
</template>

Bon

Les images informatives reçoivent un texte alt descriptif, les images décoratives un alt vide, et l’image dynamique lie sa description.

<template>
<!-- Informative image -->
<img src="/photo.jpg" alt="Team photo from company retreat" />

<!-- Decorative image (empty alt) -->
<img src="/decoration.svg" alt="" />

<!-- Dynamic alt -->
<img :src="photo" :alt="photoDescription" />
</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

vue/attribute-hyphenation

Imposer un style de nommage des attributs sur les composants personnalisés

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/attribute-hyphenation": "warn"
      }
    },
  },
});

vp run lint

Mauvais

L’attribut du composant utilise la graphie camelCase firstName.

<template>
<UserCard firstName="Ada" />
</template>

Bon

La graphie first-name respecte la convention configurée qui sépare les mots des attributs de composants par des tirets.

<template>
<UserCard first-name="Ada" />
</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

vue/attribute-order

Imposer un ordre cohérent des attributs

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/attribute-order": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le gestionnaire d’événement apparaît avant la directive structurelle v-if et l’attribut ordinaire id.

<template>
  <div @click="onClick" v-if="show" id="main"></div>
</template>

Bon

v-if vient en premier, suivi de id puis du gestionnaire d’événement, conformément à l’ordre défini par la règle.

<template>
  <div v-if="show" id="main" @click="onClick"></div>
</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

vue/component-definition-name-casing

Imposer PascalCase ou kebab-case aux noms de définition des composants

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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.

Le nom de fichier du composant est contrôlé. PascalCase et kebab-case sont acceptés ; une casse mixte est signalée.

Configuration (Vite+)

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

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

vp run lint

Mauvais

Le nom de fichier myComponent.vue combine une initiale minuscule et une majuscule interne au lieu d’utiliser PascalCase ou kebab-case.

myComponent.vue

<template><p>Content</p></template>

Bon

Renommer le fichier en MyComponent.vue adopte PascalCase ; le contenu de son template reste inchangé.

MyComponent.vue

<template><p>Content</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

vue/component-name-in-template-casing

Imposer une casse précise aux noms de composants dans les templates

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/component-name-in-template-casing": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le composant est écrit en kebab-case et en camelCase alors que la convention impose PascalCase.

<script setup>
import MyComponent from "./MyComponent.vue";
</script>
<template>
  <my-component />
  <myComponent />
</template>

Bon

MyComponent utilise PascalCase ; la syntaxe native slot reste en minuscules.

<script setup>
import MyComponent from "./MyComponent.vue";
</script>
<template>
  <MyComponent />
  <RouterView />
  <slot />
</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

vue/html-button-has-type

Exiger un type explicite et valide sur les éléments button

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/html-button-has-type": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Un bouton omet type et un autre fournit le type foo, qui n’est pas pris en charge.

<template>
<button>Click</button>
<button type="foo">Click</button>
</template>

Bon

Les boutons précisent button, submit ou reset ; un type lié est considéré comme dynamique.

<template>
<button type="button">Click</button>
<button type="submit">Save</button>
<button type="reset">Reset</button>
<button :type="dynamicType">Click</button>
</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

vue/html-quotes

Imposer un style de guillemets pour les attributs HTML

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/html-quotes": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Les attributs utilisent des apostrophes ou aucun guillemet au lieu des guillemets doubles exigés par la convention.

<template>
  <div class='foo'></div>
  <div class=foo></div>
  <div v-if='ready'></div>
</template>

Bon

Les attributs ordinaires et les expressions des directives utilisent des guillemets doubles.

<template>
  <div class="foo"></div>
  <div v-if="ready"></div>
</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

vue/html-self-closing

Imposer un style de fermeture automatique des balises

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/html-self-closing": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le composant vide utilise une paire de balises, tandis que les éléments vides img et br omettent la syntaxe autofermante configurée.

<template>
  <MyComponent></MyComponent>
  <img>
  <br>
</template>

Bon

Le composant et les éléments vides utilisent une syntaxe autofermante ; un div contenant du contenu conserve sa balise de fermeture.

<template>
  <MyComponent />
  <div></div>
  <div />
  <img />
  <br />
  <div>content</div>
</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

vue/max-template-complexity

Limiter la complexité propre du template d’un composant, cyclomatique et cognitive

Mauvais · Bon

Gravité par défaut: warning
Préréglages: none
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.

L’exemple Mauvais a une complexité cyclomatique de 13 et une complexité cognitive de 25 (limites : 11 et 16). Chaque composant est mesuré séparément ; seuls les templates HTML intégrés sont pris en charge.

Consultez le calcul de la complexité et les limites des composants pour connaître les contributions aux deux scores de l’exemple.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/max-template-complexity": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Les branches, la boucle, le contenu des slots et les décisions dans les expressions écrits dans le parent produisent des scores de 13 et 25, supérieurs aux limites par défaut de 11 et 16.

<script setup lang="ts">
defineProps<{ rows: Row[] }>();
</script>
<template>
  <section>
    <h1>{{ user ? user.name : 'Guest' }}</h1>
    <DataTable :rows="rows">
      <template #cell="{ row, column }">
        <span v-if="column.key === 'status'" :class="row.active ? 'on' : 'off'">{{ row.status ?? 'unknown' }}</span>
        <a v-else-if="column.key === 'link' && row.url" :href="row.url">{{ row.label }}</a>
        <template v-else>
          <em v-for="tag in row.tags" :key="tag">
            <b v-if="tag.pinned || tag.starred">{{ tag.hot ? '!' : '' }}</b>
          </em>
        </template>
      </template>
    </DataTable>
    <p v-if="!rows.length && !loading">No data</p>
  </section>
</template>

Bon

Le template parent délègue le rendu à RowList et conserve un seul v-if ; ses propres scores sont de 2 et 1.

<template>
  <RowList v-if="ready" :rows="rows" />
</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

vue/multi-word-component-names

Exiger des noms de composants composés de plusieurs mots

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, nuxt, opinionated
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.

Le diagnostic concerne le nom de fichier. Renommez ce même composant ; modifier une balise enfant ne corrige pas le problème.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/multi-word-component-names": "error"
      }
    },
  },
});

vp run lint

Mauvais

Item.vue donne au composant un nom composé d’un seul mot.

Item.vue

<template><p>Item</p></template>

Bon

TodoItem.vue donne au même template un nom de composant composé de plusieurs mots.

TodoItem.vue

<template><p>Item</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

vue/mustache-interpolation-spacing

Imposer un espacement cohérent dans les interpolations à doubles accolades

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/mustache-interpolation-spacing": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Il manque un espace à une ou aux deux limites des délimiteurs de l’interpolation de texte.

<template>
  <div>{{text}}</div>
  <div>{{ text}}</div>
  <div>{{text }}</div>
</template>

Bon

Des espaces séparent l’expression des délimiteurs d’ouverture et de fermeture à doubles accolades.

<template>
  <div>{{ text }}</div>
  <div>{{ foo.bar }}</div>
  <div>{{ foo + bar }}</div>
</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

vue/no-array-index-key

Interdire l’utilisation directe de la variable d’index de v-for comme :key

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-array-index-key": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La clé de la liste est son index actuel ; l’identité de l’élément change donc lorsque la liste est réordonnée.

<template>
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
</template>

Bon

La clé provient de item.id, ce qui préserve l’identité de chaque élément lorsqu’il change de position.

<template>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</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

vue/no-bare-strings-in-template

Interdire le texte brut destiné aux utilisateurs dans les templates lorsqu’il devrait être internationalisé

Mauvais · Bon

Gravité par défaut: warning
Préréglages: none
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": {
        "vue/no-bare-strings-in-template": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le texte visible et les attributs de nommage contiennent des chaînes non traduites directement dans le template.

<template>
<div>hello</div>
<img alt="a cat" />
<input placeholder="Search" />
<button title="Close">x</button>
</template>

Bon

Le contenu traduisible appelle $t ; les exemples de ponctuation et de valeurs uniquement numériques sont des exceptions autorisées.

<template>
<div>{{ $t('hello') }}</div>
<img :alt="$t('cat')" />
<div>-</div>
<div>123</div>
<button :title="$t('close')">{{ $t('x') }}</button>
</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

vue/no-boolean-attr-value

Interdire les valeurs explicites des attributs HTML booléens

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
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": {
        "vue/no-boolean-attr-value": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Les attributs booléens disabled et checked contiennent inutilement des valeurs textuelles.

<template>
  <input disabled="disabled" />
  <input checked="checked" />
  <button disabled="true">Save</button>
</template>

Bon

La présence de chaque attribut booléen exprime le même état actif sans valeur.

<template>
  <input disabled />
  <input checked />
  <button disabled>Save</button>
</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

vue/no-child-content

Interdire le contenu enfant lors de l’utilisation de v-html ou v-text

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-child-content": "error"
      }
    },
  },
});

vp run lint

Mauvais

v-text remplace le contenu du paragraphe ; le texte de repli écrit dans le template ne peut donc pas être conservé avec cette directive.

<template>
  <p v-text="message">Fallback text</p>
</template>

Bon

Supprimer le texte enfant laisse v-text comme unique source du contenu du paragraphe.

<template>
  <p v-text="message" />
</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

vue/no-deprecated-filter

Interdire la syntaxe obsolète des filtres de Vue 2 utilisant l’opérateur pipe

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-filter": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le pipe utilise la syntaxe supprimée des filtres Vue pour appliquer capitalize.

<template>
{{ message | capitalize }}
</template>

Bon

L’appel capitalize(message) applique la transformation sous la forme d’une expression ordinaire.

<template>
{{ capitalize(message) }}
</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

vue/no-deprecated-functional-template

Interdire l’attribut functional sur le <template> d’un SFC

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-functional-template": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le template du SFC possède l’attribut functional supprimé et lit l’ancien contexte props.

<template functional>
  <div>{{ props.msg }}</div>
</template>

Bon

Le template ordinaire omet functional et lit directement la liaison msg du composant.

<template>
  <div>{{ msg }}</div>
</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

vue/no-deprecated-html-element-is

Interdire l’attribut is sur les éléments HTML natifs

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-html-element-is": "error"
      }
    },
  },
});

vp run lint

Mauvais

Un div natif utilise l’ancien attribut is sans préfixe pour demander un composant Vue.

<template>
  <div is="MyComponent" />
</template>

Bon

Un composant dynamique utilise :is ; la syntaxe sur un élément natif utilise explicitement le préfixe vue:.

<template>
  <component :is="MyComponent" />
  <div is="vue:MyComponent" />
</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

vue/no-deprecated-inline-template

Interdire l’attribut obsolète inline-template

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-inline-template": "error"
      }
    },
  },
});

vp run lint

Mauvais

Card utilise l’attribut obsolète inline-template pour le contenu qui lui est fourni.

<template>
<Card inline-template><p>Details</p></Card>
</template>

Bon

Le même contenu est transmis normalement, sans l’attribut inline-template.

<template>
<Card><p>Details</p></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

vue/no-deprecated-router-link-tag-prop

Interdire la prop tag sur <router-link>

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-router-link-tag-prop": "error"
      }
    },
  },
});

vp run lint

Mauvais

RouterLink utilise la prop tag supprimée pour demander un élément button.

<template>
  <router-link to="/home" tag="button">Home</router-link>
</template>

Bon

Le slot fournit navigate à un bouton explicitement écrit dans le template.

<template>
  <router-link to="/home" v-slot="{ navigate }">
    <button @click="navigate">Home</button>
  </router-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

vue/no-deprecated-scope-attribute

Interdire l’attribut obsolète scope sur <template>

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-scope-attribute": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le template du slot déclare props au moyen de l’attribut obsolète scope.

<template>
<Card><template scope="props">{{ props.name }}</template></Card>
</template>

Bon

La directive du slot par défaut déclare la même liaison props avec la syntaxe actuelle des slots.

<template>
<Card><template #default="props">{{ props.name }}</template></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

vue/no-deprecated-slot-attribute

Interdire l’attribut obsolète slot

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-slot-attribute": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le slot header est sélectionné au moyen de l’ancien attribut slot.

<template>
  <Foo>
    <template slot="header"><h1>Title</h1></template>
    <div :slot="name">Title</div>
  </Foo>
</template>

Bon

v-slot:header sélectionne explicitement le slot header avec la directive actuelle.

<template>
  <Foo>
    <template v-slot:header><h1>Title</h1></template>
  </Foo>
</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

vue/no-deprecated-slot-scope-attribute

Interdire l’attribut obsolète slot-scope

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-slot-scope-attribute": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le template reçoit les props du slot au moyen de l’attribut obsolète slot-scope.

<template>
<Card><template slot-scope="props">{{ props.name }}</template></Card>
</template>

Bon

La directive #default reçoit ces props sans slot-scope.

<template>
<Card><template #default="props">{{ props.name }}</template></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

vue/no-deprecated-v-bind-sync

Interdire le modificateur obsolète .sync sur v-bind

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-v-bind-sync": "error"
      }
    },
  },
});

vp run lint

Mauvais

Les liaisons utilisent le modificateur .sync supprimé, y compris en combinaison avec .camel.

<template>
<MyComponent :title.sync="title" />
<MyComponent v-bind:title.sync="title" />
<MyComponent :title.sync.camel="title" />
</template>

Bon

Utilisez une liaison title ordinaire à sens unique, ou v-model:title lorsqu’un canal de mise à jour est nécessaire.

<template>
<MyComponent :title="title" />
<MyComponent v-model:title="title" />
</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

vue/no-deprecated-v-is

Interdire la directive obsolète v-is

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-v-is": "error"
      }
    },
  },
});

vp run lint

Mauvais

v-is est obsolète depuis Vue 3.1 ; l’exemple l’utilise encore pour changer le composant affiché.

<template>
<tr v-is="'MyRow'"></tr>
</template>

Bon

L’attribut is avec le préfixe vue:, ou <component :is>, sélectionne le composant à la place.

<template>
<tr is="vue:MyRow"></tr>
<component :is="MyRow" />
</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

vue/no-deprecated-v-on-native-modifier

Interdire le modificateur obsolète .native sur v-on

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-deprecated-v-on-native-modifier": "error"
      }
    },
  },
});

vp run lint

Mauvais

Les gestionnaires du composant utilisent le modificateur d’événement .native supprimé.

<template>
<MyComponent @click.native="handler" />
<MyComponent v-on:click.native="handler" />
<MyComponent @click.native.stop="handler" />
</template>

Bon

Les gestionnaires omettent .native et conservent les autres modificateurs d’événement, tels que .stop.

<template>
<MyComponent @click="handler" />
<MyComponent @click.stop="handler" />
</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

vue/no-deprecated-v-on-number-modifiers

Interdire les modificateurs numériques obsolètes keyCode sur v-on

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
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.

Sélection des modificateurs numériques et corrections

Le premier modificateur numérique dont le nom commence par un entier décimal détermine le diagnostic. @keyup.13.27="submit" ne signale que 13 et propose @keyup.enter.27="submit" ; un autre passage de correction peut remplacer 27 par escape. @keyup.13suffix="submit" devient également @keyup.enter="submit". Les valeurs de 0 à 9 sont exemptées ; @keyup.0.13="submit" ne produit donc aucun diagnostic de cette règle. Les valeurs inconnues telles que 999 sont signalées sans correction. L’exemption existante pour Vue 2 et petite-vue reste en vigueur.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-deprecated-v-on-number-modifiers": "error"
      }
    },
  },
});

vp run lint

Mauvais

Les gestionnaires de clavier identifient les touches par les codes numériques supprimés 13 et 27.

<template>
<input @keyup.13="submit" />
<input v-on:keyup.27="cancel" />
<input @keyup.13.stop="submit" />
</template>

Bon

Les gestionnaires utilisent les modificateurs de touches nommés enter et esc.

<template>
<input @keyup.enter="submit" />
<input @keyup.esc="cancel" />
</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

vue/no-dupe-v-else-if

Interdire les conditions répétées dans les chaînes v-if / v-else-if

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-dupe-v-else-if": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le else-if répète la condition ready déjà testée par la première branche, ce qui rend cette branche suivante inaccessible.

<template>
  <p v-if="status === 'ready'">Ready</p>
  <p v-else-if="status === 'ready'">Still ready</p>
</template>

Bon

La deuxième branche teste loading, un état distinct qui permet d’atteindre le else-if.

<template>
  <p v-if="status === 'ready'">Ready</p>
  <p v-else-if="status === 'loading'">Loading</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

vue/no-duplicate-attributes

Interdire les attributs en double sur un même élément

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-duplicate-attributes": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le même bouton déclare class deux fois au lieu de réunir les classes dans une seule valeur.

<template>
  <button class="primary" class="large">Save</button>
</template>

Bon

Les deux noms de classes figurent dans un unique attribut class.

<template>
  <button class="primary large">Save</button>
</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

vue/no-empty-component-block

Interdire les blocs SFC vides

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-empty-component-block": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Les blocs template, script et style ne contiennent aucun contenu significatif.

<template></template>

<script></script>

<style>
</style>

Bon

Chaque bloc conservé contient du balisage, des déclarations de script ou des déclarations de style effectifs.

<template>
  <div>Hello</div>
</template>

<script setup>
const message = "Hello";
</script>

<style scoped>
.button { 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

vue/no-inline-style

Déconseiller l’utilisation d’attributs de style en ligne

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-inline-style": "warn"
      }
    },
  },
});

vp run lint

Mauvais

L’attribut statique style place la déclaration de couleur dans l’élément.

<template>
  <div style="color: red">Text</div>
</template>

Bon

Les classes expriment la couleur fixe ; la largeur dépendant de ratio reste une liaison de style dynamique, hors du contrôle des attributs statiques.

<template>
  <div class="text-red">Text</div>
  <span :class="{ 'text-red': isRed }">Text</span>
  <div :style="{ width: `${ratio}%` }">Text</div>
</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

vue/no-invalid-html-attribute

Interdire les valeurs statiques invalides des attributs HTML

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-invalid-html-attribute": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le lien utilise stylesheet comme valeur de rel, alors que cette valeur appartient aux éléments link de feuilles de style.

<template>
<a href="/guide" rel="stylesheet">Guide</a>
</template>

Bon

Le lien utilise help, une valeur de rel adaptée à une ressource d’aide liée.

<template>
<a href="/guide" rel="help">Guide</a>
</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

vue/no-lone-template

Interdire les éléments <template> inutiles

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-lone-template": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le template interne n’a ni directive ni rôle de slot lui donnant une fonction structurelle.

<template>
<div><template><p>Details</p></template></div>
</template>

Bon

Supprimer l’enveloppe inutile laisse le paragraphe directement à l’intérieur de div.

<template>
<div><p>Details</p></div>
</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

vue/no-multi-spaces

Interdire plusieurs espaces consécutifs

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
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": {
        "vue/no-multi-spaces": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Deux espaces séparent les attributs, ou le nom de l’élément et son premier attribut.

<template>
  <div  class="panel"></div>
  <div class="panel"  id="main"></div>
</template>

Bon

Un seul espace sépare les mêmes attributs.

<template>
  <div class="panel"></div>
  <div class="panel" id="main"></div>
</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

vue/no-multiple-objects-in-class

Interdire plusieurs objets littéraux dans une liaison :class sous forme de tableau

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-multiple-objects-in-class": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Un tableau de classes contient deux objets littéraux au premier niveau qui peuvent être fusionnés.

<template>
<div :class="[{ a }, { b }]"></div>
<div :class="[{ active: isActive }, { error: hasError }]"></div>
</template>

Bon

Un seul objet contient les conditions des classes ; les tableaux comprenant un objet et une chaîne, ou des entrées non littérales, restent autorisés.

<template>
<div :class="{ a, b }"></div>
<div :class="[{ active: isActive }, 'static']"></div>
<div :class="[foo, bar]"></div>
</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

vue/no-multiple-template-root

Interdire plusieurs nœuds racines dans un template

Mauvais · Bon

Gravité par défaut: error
Préréglages: none
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.

Activez cette règle uniquement pour un contrat à racine unique. Vue 3 prend normalement en charge les fragments.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-multiple-template-root": "error"
      }
    },
  },
});

vp run lint

Mauvais

La convention à racine unique, activée explicitement, trouve deux paragraphes frères à la racine du template.

<template>
<p>First</p>
<p>Second</p>
</template>

Bon

Un élément section enveloppe les paragraphes dans une seule racine ; activez cette convention uniquement lorsqu’un contrat à racine unique est souhaité.

<template>
<section><p>First</p><p>Second</p></section>
</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

vue/no-mutating-props

Interdire la modification des props d’un composant

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-mutating-props": "error"
      }
    },
  },
});

vp run lint

Mauvais

Incrémenter props.count modifie directement une valeur fournie par le parent.

<script setup lang="ts">
const props = defineProps<{ count: number }>();

props.count++;
</script>

Bon

Le composant émet update:count avec la nouvelle valeur et laisse au parent la responsabilité de mettre à jour la prop.

<script setup lang="ts">
const props = defineProps<{ count: number }>();
const emit = defineEmits<{ "update:count": [value: number] }>();

function increment() {
  emit("update:count", props.count + 1);
}
</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

vue/no-negated-v-if-condition

Interdire une condition v-if négative lorsque la chaîne comporte un v-else

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-negated-v-if-condition": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Les branches associées v-if et v-else commencent par une condition négative.

<template>
<div v-if="!ok">A</div>
<div v-else>B</div>
</template>

Bon

Une condition ok positive vient en premier ; lors de l’inversion d’une condition, placez d’abord la branche opposée d’origine. Un v-if négatif isolé et les comparaisons !== restent autorisés.

<template>
<div v-if="ok">B</div>
<div v-else>A</div>

<div v-if="!ok">A</div>

<div v-if="a !== b">A</div>
<div v-else>B</div>
</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

vue/no-non-component-keep-alive-child

Interdire les enveloppes d’éléments ordinaires directement sous <KeepAlive>

Mauvais · Bon

Gravité par défaut: warning
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-non-component-keep-alive-child": "warn"
      }
    },
  },
});

vp run lint

Mauvais

KeepAlive enveloppe conditionnellement un div natif au lieu de mettre directement UserCard en cache.

<template>
  <KeepAlive>
    <div v-if="ready">
      <UserCard />
    </div>
  </KeepAlive>
</template>

Bon

Le premier exemple fait de UserCard l’enfant conditionnel. L’enveloppe avec v-show illustre une structure hors du contrôle des enfants conditionnels et ne garantit pas la mise en cache de l’enveloppe native.

<template>
  <KeepAlive>
    <UserCard v-if="ready" />
  </KeepAlive>
  <KeepAlive>
    <div v-show="opened">
      <UserCard />
    </div>
  </KeepAlive>
</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

vue/no-preprocessor-lang

Déconseiller les préprocesseurs CSS au profit du CSS moderne

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-preprocessor-lang": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le bloc style sélectionne SCSS avec lang. Cela décrit la convention souhaitée sans préprocesseur ; le traitement SFC actuel n’émet pas de diagnostic pour cette règle.

<template><p>Notice</p></template>
<style lang="scss">
.notice { color: red; }
</style>

Bon

Les mêmes déclarations CSS omettent le lang du préprocesseur. C’est une correction de la convention, et non une différence de diagnostics Mauvais/Bon exécutable actuellement.

<template><p>Notice</p></template>
<style>
.notice { 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

vue/no-reserved-component-names

Interdire l’utilisation de noms réservés comme noms de composants

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-reserved-component-names": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le nom de composant button entre en conflit avec le nom d’un élément HTML natif.

<script>
export default {
  name: "button",
};
</script>

Bon

AppButton est un nom de composant applicatif qui ne réutilise pas le nom natif button.

<script setup lang="ts">
defineOptions({ name: "AppButton" });
</script>

<template>
  <Transition>
    <AppButton />
  </Transition>
</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

vue/no-root-v-if

Interdire v-if sur l’unique élément racine d’un template

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-root-v-if": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La racine du composant elle-même apparaît et disparaît sous le contrôle de v-if.

<template>
  <div v-if="show">content</div>
</template>

Bon

Un div externe stable reste la racine, tandis que le paragraphe imbriqué porte la condition de visibilité.

<template>
  <div>
    <p v-if="show">content</p>
  </div>
</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

vue/no-script-non-standard-lang

Déconseiller les valeurs lang non standard dans les scripts

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
Correction automatique: Non implémentée pour le lint des SFC
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.

Prise en charge actuelle: no-sfc-finding

Cette entrée du catalogue n’émet actuellement aucun diagnostic propre à cette règle lors du lint des SFC. La paire Mauvais/Bon décrit la convention souhaitée, et non un diagnostic exécutable. Activer l’identifiant ne fournit pas le contrôle SFC manquant.

ID configuré (aucun diagnostic SFC actuellement)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/no-script-non-standard-lang": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le script utilise la syntaxe CoffeeScript avec lang=coffee. Le traitement SFC actuel n’émet pas cette règle du catalogue pour ce langage.

<script lang="coffee">
count = 0
</script>
<template><p>Notice</p></template>

Bon

Le script utilise une déclaration TypeScript ordinaire avec lang=ts, illustrant la convention de langage souhaitée.

<script lang="ts">
const count = 0;
</script>
<template><p>Notice</p></template>

Le bon exemple illustre la convention visée ; le traitement actuel des SFC n’émet le diagnostic propre à cette règle pour aucun des deux exemples.

Implémentation · Toutes les règles

vue/no-src-attribute

Déconseiller l’attribut src sur les blocs SFC

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-src-attribute": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Les blocs du SFC délèguent leur contenu template, script et style aux fichiers désignés par src.

<template src="./template.html"></template>
<script src="./script.ts"></script>
<style src="./style.css"></style>

Bon

Chaque bloc SFC contient son propre contenu sans attribut src externe.

<template>
  <p>Hello</p>
</template>

<script setup lang="ts">
const label = "Hello";
</script>

<style scoped>
p {
  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

vue/no-static-inline-styles

Interdire les attributs de style en ligne statiques

Mauvais · Bon

Gravité par défaut: warning
Préréglages: none
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": {
        "vue/no-static-inline-styles": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le paragraphe porte la déclaration de couleur constante dans son attribut style.

<template>
<p style="color: red">Notice</p>
</template>

Bon

Une classe notice et une feuille de style scoped définissent la couleur constante en dehors de l’attribut du template.

<template><p class="notice">Notice</p></template>
<style scoped>.notice { 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

vue/no-template-key

Interdire l’attribut key sur <template>

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-template-key": "error"
      }
    },
  },
});

vp run lint

Mauvais

Une enveloppe template sans boucle possède une key, alors qu’elle ne constitue pas la limite d’une itération à clé.

<template>
<template :key="section"><div>Details</div></template>
</template>

Bon

La clé appartient à une itération template v-for, où elle identifie chaque fragment répété.

<template>
<template v-for="item in items" :key="item.id"><div>{{ item.name }}</div></template>
</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

vue/no-template-lang

Déconseiller l’attribut lang sur le bloc template

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-template-lang": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le template sélectionne Pug avec lang. Il s’agit d’une convention souhaitée limitant les templates au HTML ; le traitement SFC actuel n’émet pas de diagnostic pour cet identifiant du catalogue.

<template lang="pug">
p Notice
</template>

Bon

Un template HTML ordinaire omet lang et utilise directement le paragraphe. Cela illustre la convention sans prétendre qu’un diagnostic SFC est actuellement émis.

<template>
<p>Notice</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

vue/no-template-shadow

Interdire les noms de variables qui masquent des variables d’une portée externe

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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.

Le contrôle compare les liaisons v-for, v-slot (y compris #name) et les anciennes liaisons de slots à portée limitée au sein du template. Il signale l’identifiant qui masque une liaison précédente, y compris les déclarations du même élément dans l’ordre des attributs. Les éléments frères ont des portées indépendantes. Les clés de propriétés et les références dans les valeurs par défaut ne sont pas des déclarations, et v-pre rend son sous-arbre inerte.

Les noms du script et des propriétés du composant sont hors du champ du contrôle actuel : une liaison isolée du template ne produit pas d’avertissement simplement parce qu’une liaison du script porte le même nom. Les plages de diagnostic couvrent l’identifiant tel qu’il est écrit dans le code source, y compris les graphies échappées et les entités HTML.

Configuration (Vite+)

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

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

vp run lint

Mauvais

Le v-for interne déclare à nouveau item et masque la liaison item externe dans la boucle imbriquée.

<template>
<div v-for="item in items" :key="item.id"><span v-for="item in item.children" :key="item.id">{{ item.name }}</span></div>
</template>

Bon

La boucle interne déclare child, laissant item disponible pour la ligne externe et child pour la ligne imbriquée.

<template>
<div v-for="item in items" :key="item.id"><span v-for="child in item.children" :key="child.id">{{ child.name }}</span></div>
</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

vue/no-template-target-blank

Interdire target="_blank" sans rel="noopener noreferrer"

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-template-target-blank": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le lien externe ouvre un nouveau contexte de navigation sans la protection rel attendue.

<template>
<a href="https://example.com" target="_blank">x</a>
</template>

Bon

Le même lien inclut noopener noreferrer en plus de target=_blank.

<template>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">x</a>
</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

vue/no-textarea-mustache

Interdire l’interpolation à doubles accolades dans <textarea>

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-textarea-mustache": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le textarea place message dans une interpolation enfant au lieu de lier sa valeur.

<template>
  <textarea>{{ message }}</textarea>
</template>

Bon

v-model lie la valeur modifiable du textarea à message.

<template>
  <textarea v-model="message"></textarea>
</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

vue/no-undefined-refs

Interdire les références à des variables non définies dans les templates

Mauvais · Bon

Gravité par défaut: warning
Préréglages: none
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": {
        "vue/no-undefined-refs": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le template lit missing, alors que le script ne déclare que message.

<script setup>const message = "Hello";</script>
<template>{{ missing }}</template>

Bon

L’interpolation lit la liaison message existante.

<script setup>const message = "Hello";</script>
<template>{{ message }}</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

vue/no-unsafe-url

Signaler les liaisons d’URL potentiellement dangereuses

Mauvais · Bon

Gravité par défaut: warning
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-unsafe-url": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La destination du lien commence par le schéma exécutable javascript:.

<template>
<a href="javascript:alert(1)">Continue</a>
</template>

Bon

Le lien utilise la destination de navigation locale ordinaire /next.

<template>
<a href="/next">Continue</a>
</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

vue/no-unsandboxed-iframe

Exiger un attribut sandbox sur les éléments iframe

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-unsandboxed-iframe": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le cadre intégré n’a pas d’attribut sandbox limitant ses capacités.

<template>
<iframe src="/embed"></iframe>
</template>

Bon

sandbox applique des restrictions ; allow-scripts autorise explicitement cette seule capacité lorsque cela est nécessaire.

<template>
<iframe src="/embed" sandbox></iframe>
<iframe src="/embed" sandbox="allow-scripts"></iframe>
</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

vue/no-unused-components

Interdire l’enregistrement de composants inutilisés dans les templates

Mauvais · Bon

Gravité par défaut: warning
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-unused-components": "warn"
      }
    },
  },
});

vp run lint

Mauvais

UserAvatar est importé comme composant, mais le template ne l’affiche jamais.

<script setup lang="ts">
import UserAvatar from "./UserAvatar.vue";
</script>

<template>
  <p>{{ user.name }}</p>
</template>

Bon

Le template affiche le composant UserAvatar importé et lui transmet la liaison user.

<script setup lang="ts">
import UserAvatar from "./UserAvatar.vue";
</script>

<template>
  <UserAvatar :user="user" />
</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

vue/no-unused-properties

Interdire les propriétés inutilisées définies dans defineProps

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-unused-properties": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le composant déclare description comme prop, mais n’affiche que title.

<script setup lang="ts">
defineProps<{ title: string; description: string }>();
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Bon

Les deux props déclarées sont référencées par le template.

<script setup lang="ts">
defineProps<{ title: string; description: string }>();
</script>

<template>
  <h1>{{ title }}</h1>
  <p>{{ description }}</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

vue/no-unused-refs

Signaler les refs de template (ref="x") jamais référencées dans <script>

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-unused-refs": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le template déclare le nom de ref unused sans liaison de référence correspondante dans le script.

<template><input ref="unused" /></template>
<script setup>
const x = 1
</script>

Bon

La ref de template inputEl possède une liaison ref du même nom dans script setup.

<template><input ref="inputEl" /></template>
<script setup>
import { ref } from 'vue'
const inputEl = ref(null)
</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

vue/no-unused-setup-bindings

Interdire les liaisons script setup qui ne sont jamais lues

Mauvais · Bon

Gravité par défaut: warning
Préréglages: none
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": {
        "vue/no-unused-setup-bindings": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La liaison message de script setup n’est jamais lue par le template.

<script setup>const message = "Hello";</script>
<template><p>Welcome</p></template>

Bon

Le paragraphe interpole message et utilise ainsi la liaison déclarée.

<script setup>const message = "Hello";</script>
<template><p>{{ message }}</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

vue/no-unused-vars

Interdire les variables inutilisées définies dans les directives v-for et v-slot

Mauvais · Bon

Gravité par défaut: warning
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-unused-vars": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La boucle déclare un index inutilisé et le slot déclare foo sans y faire référence.

<template>
  <li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li>
  <template v-slot="{ foo }">
    <span>Hello</span>
  </template>
</template>

Bon

Les exemples utilisent index ou indiquent qu’il est volontairement inutilisé en le nommant _index, et le slot affiche data. Les clés fondées sur l’index illustrent uniquement un usage ici, sans recommander cet index pour une identité stable des éléments.

<template>
  <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
  <li v-for="(item, _index) in items" :key="item.id">{{ item.name }}</li>
  <template v-slot="{ data }">
    <span>{{ data }}</span>
  </template>
</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

vue/no-use-v-else-with-v-for

Interdire v-else-if ou v-else sur le même élément que v-for

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-use-v-else-with-v-for": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La branche else et l’itération v-for sont attachées au même paragraphe.

<template>
<p v-if="ready">Ready</p>
<p v-else v-for="item in items" :key="item.id">{{ item.name }}</p>
</template>

Bon

Un template distinct porte v-else, et son paragraphe enfant porte v-for.

<template>
<p v-if="ready">Ready</p>
<template v-else><p v-for="item in items" :key="item.id">{{ item.name }}</p></template>
</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

vue/no-use-v-if-with-v-for

Interdire v-if sur le même élément que v-for

Mauvais · Bon

Gravité par défaut: warning
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-use-v-if-with-v-for": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le même élément de liste combine v-if et v-for et teste la visibilité au moyen de la liaison de la boucle.

<template>
  <li v-for="item in items" v-if="item.visible" :key="item.id">
    {{ item.name }}
  </li>
</template>

Bon

Une collection calculée filtre les éléments visibles avant que le template n’itère dessus.

<script setup lang="ts">
const visibleItems = computed(() => items.filter((item) => item.visible));
</script>

<template>
  <li v-for="item in visibleItems" :key="item.id">
    {{ item.name }}
  </li>
</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

vue/no-useless-mustaches

Interdire une interpolation à doubles accolades dont l’expression est une chaîne littérale constante

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-useless-mustaches": "warn"
      }
    },
  },
});

vp run lint

Mauvais

L’interpolation ne contient qu’une chaîne constante et ne nécessite pas d’évaluation d’expression.

<template>
<div>{{ 'x' }}</div>
<div>{{ "x" }}</div>
<div>{{ `x` }}</div>
</template>

Bon

Le texte littéral est écrit directement ; les expressions de variables, les chaînes de template avec interpolation et les espaces de séparation intentionnels restent des cas d’interpolation.

<template>
<div>x</div>
<div>{{ x }}</div>
<div>{{ `pre-${x}` }}</div>
<span>A</span> {{ " " }} <span>B</span>
</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

vue/no-useless-template-attributes

Interdire les attributs inutiles sur les éléments <template>

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-useless-template-attributes": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le template conditionnel possède une classe, mais cette enveloppe structurelle ne produit pas d’élément DOM qui puisse la recevoir.

<template>
<section><template v-if="ready" class="notice"><p>Ready</p></template></section>
</template>

Bon

La classe est déplacée vers le paragraphe qui est effectivement affiché, tandis que v-if reste sur le template structurel.

<template>
<section><template v-if="ready"><p class="notice">Ready</p></template></section>
</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

vue/no-useless-v-bind

Interdire un v-bind dont la valeur est une simple chaîne littérale

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-useless-v-bind": "warn"
      }
    },
  },
});

vp run lint

Mauvais

La liaison foo évalue une chaîne constante entre guillemets ou une chaîne de template sans interpolation.

<template>
<div :foo="'bar'"></div>
<div :foo="`bar`"></div>
</template>

Bon

La valeur constante devient un attribut statique ; les valeurs variables et interpolées conservent leur liaison.

<template>
<div foo="bar"></div>
<div :foo="bar"></div>
<div :foo="`pre-${bar}`"></div>
</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

vue/no-v-for-template-key-on-child

Interdire key sur l’enfant d’un <template v-for>

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-v-for-template-key-on-child": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le paragraphe enfant porte la clé, tandis que l’itération du template elle-même n’en possède pas.

<template>
<template v-for="item in items"><p :key="item.id">{{ item.name }}</p></template>
</template>

Bon

La clé est déplacée vers template v-for et identifie le fragment répété dans son ensemble.

<template>
<template v-for="item in items" :key="item.id"><p>{{ item.name }}</p></template>
</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

vue/no-v-html

Déconseiller v-html pour prévenir les vulnérabilités XSS

Mauvais · Bon

Gravité par défaut: warning
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-v-html": "warn"
      }
    },
  },
});

vp run lint

Mauvais

v-html interprète le contenu comme du HTML plutôt que comme du texte ordinaire.

<template>
  <article v-html="content" />
</template>

Bon

L’interpolation à doubles accolades affiche le contenu comme du texte échappé au lieu d’injecter du HTML.

<template>
  <article>{{ content }}</article>
</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

vue/no-v-text

Interdire la directive v-text ; préférer l’interpolation à doubles accolades

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/no-v-text": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le contenu du div est fourni par la directive v-text.

<template>
<div v-text="message"></div>
</template>

Bon

L’interpolation à doubles accolades exprime la même liaison de texte directement dans le contenu de l’élément.

<template>
<div>{{ message }}</div>
</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

vue/no-v-text-v-html-on-component

Interdire v-text / v-html sur les éléments de composants

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/no-v-text-v-html-on-component": "error"
      }
    },
  },
});

vp run lint

Mauvais

La balise du composant reçoit v-html ou v-text, qui remplace le contenu d’un élément au lieu de fournir les slots du composant.

<template>
  <MyComponent v-html="content" />
  <MyComponent v-text="content" />
</template>

Bon

Les cibles HTML natives peuvent recevoir les directives ; MyComponent reçoit son contenu via le slot par défaut.

<template>
  <div v-html="content"></div>
  <component is="div" v-html="content" />
  <MyComponent>{{ content }}</MyComponent>
</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

vue/permitted-contents

Faire respecter les règles du modèle de contenu HTML

Mauvais · Bon

Gravité par défaut: error
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/permitted-contents": "error"
      }
    },
  },
});

vp run lint

Mauvais

Les exemples placent du contenu de bloc dans p, omettent le corps du tableau, imbriquent des contrôles interactifs ou placent un div directement dans ul.

<template>
  <p><div>block in a paragraph</div></p>
  <table><tr><td>row without tbody</td></tr></table>
  <a href="#"><button type="button">nested control</button></a>
  <ul><div>not a list item</div></ul>
</template>

Bon

Les exemples utilisent du contenu en ligne dans le paragraphe, un tbody explicite et des enfants li. Le composant personnalisé MyItem n’est pas considéré comme un enfant natif connu de ul.

<template>
  <p><span>inline in a paragraph</span></p>
  <table><tbody><tr><td>cell</td></tr></tbody></table>
  <ul><li>list item</li><MyItem /></ul>
</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

vue/prefer-props-shorthand

Recommander la syntaxe abrégée des props (Vue 3.4+)

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
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": {
        "vue/prefer-props-shorthand": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Chaque liaison répète le nom de la variable correspondante, y compris l’équivalent camelCase d’un argument séparé par des tirets.

<template>
  <MyComponent :foo="foo" />
  <MyComponent :user-name="userName" />
  <span :style="style" />
  <div :aria-label="ariaLabel" />
</template>

Bon

La syntaxe abrégée des liaisons de même nom de Vue 3.4+ supprime les expressions répétées ; une variable source différente, telle que bar, reste explicite.

<template>
  <MyComponent :foo />
  <MyComponent :user-name />
  <span :style />
  <div :aria-label />
  <MyComponent :foo="bar" />
</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

vue/prefer-true-attribute-shorthand

Préférer la syntaxe abrégée pour un attribut booléen lié à true

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/prefer-true-attribute-shorthand": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Un attribut booléen natif disabled est lié à la valeur constante true.

<template>
<input :disabled="true" />
</template>

Bon

L’attribut natif utilise sa syntaxe booléenne abrégée. Les liaisons à false et les props de composants conservent leurs valeurs explicites.

<template>
<input disabled />
<input :disabled="false" />
<MyComponent :visible="true" />
<MyComponent :visible="isVisible" />
</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

vue/prop-name-casing

Imposer une casse aux noms des props déclarées

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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.

Contrôle les noms des props déclarées, et non la casse des attributs transmis à un enfant.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/prop-name-casing": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le nom de prop déclaré user_name utilise des mots séparés par des traits de soulignement.

<script setup lang="ts">
defineProps<{ user_name: string }>();
</script>
<template><p>{{ user_name }}</p></template>

Bon

La déclaration et sa référence dans le template utilisent le nom camelCase userName.

<script setup lang="ts">
defineProps<{ userName: string }>();
</script>
<template><p>{{ userName }}</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

vue/require-component-is

Exiger v-bind:is sur les éléments <component>

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/require-component-is": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le <component> dynamique n’a pas de cible is ; Vue ne peut donc pas choisir le composant à afficher.

<template>
  <component />
</template>

Bon

:is="currentComponent" fournit la sélection du composant ; la liaison peut changer à l’exécution.

<template>
  <component :is="currentComponent" />
</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

vue/require-component-registration

Exiger un import ou un enregistrement explicite des composants

Mauvais · Bon

Gravité par défaut: warning
Préréglages: opinionated
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: Consultez les options typées et leurs valeurs par défaut.

Listez les noms explicites des composants fournis par les plugins de l’application ou par previewSetup de Musea. Les graphies PascalCase et kebab-case sont acceptées ; les expressions régulières ne sont pas interprétées. Les options n’activent pas la règle. Les couches suivantes remplacent la liste ; une liste vide efface les noms hérités.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/require-component-registration": "warn"
      },
      "ruleOptions": {
        "vue/require-component-registration": {
          "globals": [
            "MyButton",
            "MyIcon"
          ]
        }
      }
    },
  },
});

vp run lint

Mauvais

MissingWidget n’est ni enregistré ni inclus dans la liste configurée des composants globaux autorisés.

<template>
<MissingWidget />
</template>

Bon

MyButton figure dans l’option globals de l’exemple. Cette option exempte un composant global connu ; elle ne l’enregistre ni ne l’importe.

<template>
<MyButton />
</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

vue/require-scoped-style

Exiger l’attribut scoped sur les balises style

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/require-scoped-style": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le style .button n’est pas scoped et peut affecter les éléments correspondants en dehors de ce composant.

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

Bon

Ajouter scoped applique la portée du composant Vue aux mêmes sélecteur et déclarations.

<style scoped>
.button {
  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

vue/require-toggle-inside-transition

Exiger un mécanisme de bascule sur l’élément enveloppé par <transition>

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/require-toggle-inside-transition": "error"
      }
    },
  },
});

vp run lint

Mauvais

L’enfant statique à l’intérieur de <Transition> n’a ni visibilité conditionnelle ni sélection dynamique pouvant déclencher une entrée ou une sortie.

<template>
<transition>
  <div>content</div>
</transition>
</template>

Bon

v-if="show" modifie la présence de l’enfant et fournit à la transition une limite d’entrée et de sortie.

<template>
<transition>
  <div v-if="show">content</div>
</transition>
</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

vue/require-v-for-key

Exiger v-bind:key avec les directives v-for

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/require-v-for-key": "error"
      }
    },
  },
});

vp run lint

Mauvais

Chaque <li> répété ne possède pas de clé identifiant l’élément correspondant lors des mises à jour de la liste.

<template>
  <li v-for="item in items">{{ item.name }}</li>
</template>

Bon

:key="item.id" donne à chaque nœud répété l’identité de son élément plutôt que sa position actuelle.

<template>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</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

vue/scoped-event-names

Recommander des noms d’événements préfixés par leur contexte au format context:event

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/scoped-event-names": "warn"
      }
    },
  },
});

vp run lint

Mauvais

playAudio, pauseAudio et reloadAudio encodent leur contexte sous forme de suffixes camelCase au lieu de la convention d’événements séparés par deux-points définie par la règle.

<template>
  <AudioPlayer
    @playAudio="play"
    @pauseAudio="pause"
    @reloadAudio="reload"
  />
</template>

Bon

audio:play, audio:pause et audio:reload partagent un contexte explicite audio:. Le composant émetteur doit utiliser les mêmes noms.

<template>
  <AudioPlayer
    @audio:play="play"
    @audio:pause="pause"
    @audio:reload="reload"
  />
</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

vue/sfc-element-order

Imposer un ordre cohérent des éléments de premier niveau d’un SFC

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/sfc-element-order": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le bloc style précède le bloc script, contrairement à l’ordre des blocs SFC configuré.

<style scoped>
.panel {
  color: red;
}
</style>
<script setup lang="ts">
const label = "Save";
</script>

Bon

Les blocs suivent l’ordre script → template → style. Les projets peuvent choisir un autre ordre avec l’option typée de cette règle.

<script setup lang="ts">
const label = "Save";
</script>

<template>
  <p>{{ label }}</p>
</template>

<style scoped>
p {
  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

vue/single-style-block

Recommander un seul bloc style

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/single-style-block": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le composant répartit ses styles scoped de panneau et de titre dans deux blocs style.

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

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

Bon

Les deux sélecteurs restent scoped dans un seul bloc style, respectant la convention du bloc unique sans supprimer aucun style.

<style scoped>
.panel {
  color: red;
}
.title {
  color: blue;
}
</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

vue/slot-name-casing

Imposer kebab-case aux slots nommés utilisés avec v-slot

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/slot-name-casing": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le slot nommé mySlot utilise camelCase là où la règle exige un nom séparé par des tirets.

<template>
<MyCard><template #mySlot>Content</template></MyCard>
</template>

Bon

#my-slot utilise kebab-case. Renommez le point d’insertion du slot correspondant avec le même nom.

<template>
<MyCard><template #my-slot>Content</template></MyCard>
</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

vue/this-in-template

Interdire this. dans les expressions des templates

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/this-in-template": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Les expressions du template accèdent explicitement à this.message, this.className et this.handleClick, alors que Vue expose directement ces liaisons.

<template>
<div>{{ this.message }}</div>
<div :class="this.className"></div>
<button @click="this.handleClick()"></button>
</template>

Bon

Utilisez directement message, className et handleClick. La chaîne littérale 'this.is.a.string' reste inchangée, car elle ne constitue pas un accès à un membre.

<template>
<div>{{ message }}</div>
<div :class="className"></div>
<button @click="handleClick()"></button>
<div>{{ 'this.is.a.string' }}</div>
</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

vue/use-unique-element-ids

Imposer des identifiants d’éléments uniques avec useId() plutôt que des littéraux statiques

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/use-unique-element-ids": "warn"
      }
    },
  },
});

vp run lint

Mauvais

L’identifiant littéral email est réutilisé par chaque instance de ce composant, ce qui peut faire pointer son label vers la mauvaise instance lorsque plusieurs sont affichées.

<template>
  <label for="email">Email</label>
  <input id="email" />
</template>

Bon

useId() produit l’emailId de l’instance ; liez la même valeur au for du label et à l’id de l’input.

<script setup>
import { useId } from "vue";

const emailId = useId();
</script>

<template>
  <label :for="emailId">Email</label>
  <input :id="emailId" />
</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

vue/use-v-on-exact

Imposer le modificateur .exact sur v-on en présence de gestionnaires utilisant des modificateurs

Mauvais · Bon

Gravité par défaut: warning
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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.

Quand les gestionnaires se chevauchent

La règle compare les écouteurs du même événement sur un élément natif. Elle ignore les événements des composants personnalisés, sauf si les deux écouteurs utilisent .native. Des noms d’événements différents et des filtres de touches sans touche commune n’entrent pas en conflit.

Les modificateurs système désignent des touches qui doivent être enfoncées ; @keydown.alt.shift accepte donc également Ctrl+Alt+Shift. Si un second gestionnaire utilise @keydown.alt.ctrl.shift, ajoutez .exact au gestionnaire le plus général pour séparer ces actions. .exact autorise les modificateurs système qu’il déclare et refuse toute touche Ctrl, Shift, Alt ou Meta supplémentaire.

Plusieurs modificateurs de touches représentent des alternatives : @keydown.up.down accepte l’une ou l’autre des deux touches fléchées. Il peut se chevaucher avec @keydown.ctrl.down sur Ctrl+FlècheBas. La règle signale la clé de directive qui nécessite .exact, sans inclure son expression de gestionnaire.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/use-v-on-exact": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le gestionnaire de clic ordinaire peut également s’exécuter lors d’un Ctrl-clic et chevaucher le gestionnaire .ctrl distinct.

<template>
  <button type="button" @click="handleClick" @click.ctrl="handleCtrlClick">
    Save
  </button>
</template>

Bon

.exact limite le gestionnaire de clic ordinaire aux clics sans touche modificatrice ; le gestionnaire propre à Ctrl reste distinct.

<template>
  <button
    type="button"
    @click.exact="handleClick"
    @click.ctrl="handleCtrlClick"
  >
    Save
  </button>
</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

vue/v-bind-style

Imposer un style de directive v-bind

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

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

vp run lint

Mauvais

v-bind:class utilise la forme longue alors que le style de liaison configuré exige la syntaxe abrégée avec deux-points.

<template>
  <div v-bind:class="panelClass"></div>
</template>

Bon

:class conserve la même expression avec la syntaxe abrégée exigée ; cette règle concerne la graphie, pas le type de la valeur.

<template>
  <div :class="panelClass"></div>
</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

vue/v-on-event-hyphenation

Imposer des tirets dans les noms d’événements personnalisés de v-on sur les composants

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
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: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/v-on-event-hyphenation": "warn"
      }
    },
  },
});

vp run lint

Mauvais

L’écouteur du composant personnalisé utilise @myEvent au lieu d’un nom d’événement séparé par des tirets.

<template>
<MyComponent @myEvent="handler" />
<MyComponent v-on:myEvent="handler" />
</template>

Bon

@my-event utilise la graphie exigée pour les événements personnalisés. Les écouteurs d’éléments natifs et les arguments d’événements dynamiques montrés ci-dessous sont hors du champ de ce contrôle.

<template>
<MyComponent @my-event="handler" />
<div @myEvent="handler" />
<MyComponent @[dynamicEvent]="handler" />
</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

vue/v-on-handler-style

Imposer une référence de méthode ou une fonction en ligne pour les gestionnaires v-on

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/v-on-handler-style": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Les gestionnaires placent des modifications et plusieurs instructions directement dans l’attribut d’événement.

<template>
<button @click="count++"></button>
<button @click="doThis(); doThat()"></button>
<button @click="foo = bar"></button>
</template>

Bon

Utilisez une référence de gestionnaire, ou une expression de fonction fléchée ou classique lorsqu’une logique en ligne est nécessaire. La limite de la fonction rend la forme du gestionnaire explicite.

<template>
<button @click="handler"></button>
<button @click="foo.bar"></button>
<button @click="() => count++"></button>
<button @click="function () { count++ }"></button>
</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

vue/v-on-style

Imposer un style de directive v-on

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/v-on-style": "warn"
      }
    },
  },
});

vp run lint

Mauvais

v-on:click utilise la forme longue de l’écouteur d’événement alors que la règle exige la syntaxe abrégée.

<template>
  <div v-on:click="handleClick"></div>
</template>

Bon

@click conserve le même gestionnaire tout en utilisant la syntaxe abrégée configurée.

<template>
  <div @click="handleClick"></div>
</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

vue/v-slot-style

Imposer un style de directive v-slot

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/v-slot-style": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le composant utilise #default et le template utilise v-slot:header, contrairement aux styles définis par la règle pour chaque contexte.

<template>
  <MyComponent #default="props">{{ props.item }}</MyComponent>
  <MyComponent>
    <template v-slot:header>Header</template>
  </MyComponent>
</template>

Bon

Utilisez v-slot pour le slot par défaut du composant et #header pour le slot nommé du template.

<template>
  <MyComponent v-slot="props">{{ props.item }}</MyComponent>
  <MyComponent>
    <template #header>Header</template>
  </MyComponent>
</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

vue/valid-attribute-name

Exiger des noms d’attributs valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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.

Diagnostic du mauvais exemple: parser/template

Un nom d’attribut mal formé est diagnostiqué par parser/template avant que cette règle défensive ne voie un attribut. L’exemple Mauvais signale donc parser/template et ne garantit pas un diagnostic distinct de vue/valid-attribute-name.

Configuration (Vite+)

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

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

vp run lint

Mauvais

Le guillemet dans my"attr rend le nom d’attribut mal formé. Cet exemple produit le diagnostic parser/template de l’analyseur, sans garantir un diagnostic distinct de cette règle.

<template>
<div my"attr="value"></div>
</template>

Bon

my-attr est un nom d’attribut bien formé ; l’analyseur du template peut donc lire l’attribut et sa valeur.

<template>
<div my-attr="value"></div>
</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

vue/valid-template-root

Exiger une racine <template> valide selon la sémantique des fragments de Vue 3

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-template-root": "error"
      }
    },
  },
});

vp run lint

Mauvais

Un <template> imbriqué ordinaire occupe la racine du template sans directive lui donnant un rôle de rendu.

<template>
  <template>content</template>
</template>

Bon

Le <div> est un élément racine qui peut être affiché. Cet exemple n’impose pas de restriction universelle à une seule racine pour les fragments de Vue 3.

<template>
  <div>content</div>
</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

vue/valid-v-bind

Exiger des directives v-bind valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-bind": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le v-bind sans argument n’a pas d’expression objet, et la forme à argument vide n’a pas de nom d’attribut.

<template>
  <div v-bind></div>
  <div :></div>
</template>

Bon

Fournissez un attribut et une expression, liez un objet ou utilisez la syntaxe abrégée de même nom de Vue 3.4+, telle que :loading.

<template>
  <div :class="panelClass"></div>
  <div v-bind="{ class: panelClass }"></div>
  <div :loading></div>
</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

vue/valid-v-cloak

Exiger des directives v-cloak valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-cloak": "error"
      }
    },
  },
});

vp run lint

Mauvais

v-cloak reçoit une valeur, un argument ou un modificateur alors qu’il n’accepte aucun de ces éléments.

<template>
<div v-cloak="foo"></div>
<div v-cloak:arg></div>
<div v-cloak.mod></div>
</template>

Bon

Utilisez v-cloak seul ; le CSS peut masquer l’élément jusqu’à ce que Vue retire cet attribut après le montage.

<template>
<div v-cloak></div>
</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

vue/valid-v-else

Exiger des directives v-else valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
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": {
        "vue/valid-v-else": "error"
      }
    },
  },
});

vp run lint

Mauvais

Les exemples donnent une expression à v-else, le combinent avec v-if ou omettent la branche conditionnelle qui doit le précéder immédiatement.

<template>
  <div v-else="ready"></div>
  <div v-else v-if="ready"></div>
  <div v-else></div>
</template>

Bon

Placez v-else seul immédiatement après la branche v-if correspondante.

<template>
  <div v-if="ready"></div>
  <div v-else></div>
</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

vue/valid-v-else-if

Exiger des directives v-else-if valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-else-if": "error"
      }
    },
  },
});

vp run lint

Mauvais

Les exemples laissent v-else-if sans branche conditionnelle précédente ou sans condition, ou lui donnent un argument ou un modificateur.

<template>
<div v-else-if="foo"></div> <!-- without preceding v-if -->
<div v-if="foo"></div><div v-else-if></div>
<div v-if="foo"></div><div v-else-if:arg="bar"></div>
<div v-if="foo"></div><div v-else-if.mod="bar"></div>
</template>

Bon

Placez v-else-if avec une condition juste après la branche v-if ou v-else-if qu’il prolonge.

<template>
<div v-if="foo"></div>
<div v-else-if="bar"></div>
</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

vue/valid-v-for

Exiger des directives v-for valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-for": "error"
      }
    },
  },
});

vp run lint

Mauvais

Les boucles omettent leur expression d’itération ou ajoutent un modificateur .stop non pris en charge.

<template>
  <div v-for></div>
  <div v-for=""></div>
  <div v-for.stop="item in items"></div>
</template>

Bon

Utilisez item in items ou (item, index) of items avec une expression d’itération complète et les clés présentées.

<template>
  <div v-for="item in items" :key="item.id"></div>
  <div v-for="(item, index) of items" :key="index"></div>
</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

vue/valid-v-html

Exiger des directives v-html valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-html": "error"
      }
    },
  },
});

vp run lint

Mauvais

v-html n’a pas d’expression ou utilise un argument ou modificateur que cette directive ne prend pas en charge.

<template>
<div v-html></div>
<div v-html:arg="foo"></div>
<div v-html.mod="foo"></div>
</template>

Bon

v-html="html" fournit une expression valide. La validité de la syntaxe n’assainit pas le HTML et ne rend pas sûr un contenu non fiable.

<template>
<div v-html="html"></div>
</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

vue/valid-v-if

Exiger des directives v-if valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-if": "error"
      }
    },
  },
});

vp run lint

Mauvais

Les conditions omettent une expression ou combinent v-if avec une directive else sur le même nœud.

<template>
  <div v-if></div>
  <div v-if=""></div>
  <div v-if="ready" v-else></div>
</template>

Bon

Chaque v-if possède une condition non vide, telle que ready ou count > 0, sans directive else incompatible.

<template>
  <div v-if="ready"></div>
  <div v-if="count > 0"></div>
</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

vue/valid-v-is

Exiger des directives v-is valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-is": "error"
      }
    },
  },
});

vp run lint

Mauvais

v-is possède un argument ou un modificateur, n’a pas de valeur, ou est placé sur un composant plutôt que sur un élément HTML natif.

<template>
<tr v-is:arg="'MyRow'"></tr>
<tr v-is.mod="'MyRow'"></tr>
<tr v-is></tr>
<MyComponent v-is="'MyRow'" />
</template>

Bon

v-is avec une valeur sur un élément natif tel que <tr> désigne le composant à afficher à sa place.

<template>
<tr v-is="'MyRow'"></tr>
</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

vue/valid-v-memo

Exiger des directives v-memo valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-memo": "error"
      }
    },
  },
});

vp run lint

Mauvais

Un v-memo seul ne donne à Vue aucune expression de dépendances pour décider quand réutiliser le sous-arbre.

<template>
  <div v-memo></div>
</template>

Bon

v-memo="[valueA, valueB]" fournit le tableau de dépendances utilisé pour la mémoïsation.

<template>
  <div v-memo="[valueA, valueB]">{{ label }}</div>
</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

vue/valid-v-model

Exiger des directives v-model valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-model": "error"
      }
    },
  },
});

vp run lint

Mauvais

Un <div> natif ne peut pas utiliser v-model comme contrôle de formulaire, et une directive sans valeur sur input n’a pas d’expression cible modifiable.

<template>
  <div v-model="value"></div>
  <input v-model />
</template>

Bon

Liez l’input, le select, le textarea ou le composant personnalisé aux variables modifiables présentées.

<template>
  <input v-model="value" />
  <select v-model="selected"></select>
  <textarea v-model="text"></textarea>
  <MyInput v-model="value" />
</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

vue/valid-v-on

Exiger des directives v-on valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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: Consultez les options typées et leurs valeurs par défaut.

Validation des modificateurs

Les modificateurs non pris en charge sont signalés individuellement sur leur nom, y compris avec la forme longue v-on:click, les arguments d’événement dynamiques et la syntaxe objet des écouteurs. Les noms acceptés correspondent à ceux d’eslint-plugin-vue 10.9.2 : les modificateurs d’événement intégrés de Vue, la table complète des alias de touches, tout point de code Unicode unique et les noms ayant un préfixe entier décimal fini (selon la sémantique de Number.parseInt(name, 10) en JavaScript). Par exemple, cette règle accepte .13suffix. Les diagnostics concernant l’abandon des codes de touche numériques et la migration de .native relèvent de règles distinctes.

Seuls .stop et .prevent ont un effet sans gestionnaire. Un modificateur tel que .once, .enter ou un nom personnalisé configuré nécessite toujours une expression de gestionnaire.

Les projets ayant une gestion personnalisée des événements peuvent ajouter des noms sous vue.linter.ruleOptions :

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

export default defineConfig({}).withVue({
  linter: {
    rules: { "vue/valid-v-on": "error" },
    ruleOptions: { "vue/valid-v-on": { modifiers: ["custom"] } },
  },
});

Cela autorise @click.custom="handler". Les noms doivent correspondre exactement, en respectant la casse ; les options complètent les noms intégrés et n’activent pas une règle désactivée. Les entrées de configuration à portée limitée peuvent remplacer les noms hérités par une nouvelle liste ou les réinitialiser avec [].

La table des touches est adaptée des alias de touches d’eslint-plugin-vue, sous licence MIT. Son code source et sa licence sont conservés aux côtés de l’implémentation.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vue/valid-v-on": "error"
      },
      "ruleOptions": {
        "vue/valid-v-on": {
          "modifiers": [
            "custom"
          ]
        }
      }
    },
  },
});

vp run lint

Mauvais

Les formes d’écouteurs omettent un argument d’événement ou l’expression de gestionnaire ou d’objet nécessaire.

<template>
  <div v-on></div>
  <div @></div>
  <div @click></div>
  <div @click.sync="handleClick"></div>
  <div @click.nativeish="handleClick"></div>
  <div @click.once></div>
</template>

Bon

Utilisez un événement avec son gestionnaire, ou transmettez un objet d’écouteurs à v-on sans argument.

<template>
  <div @click="handleClick"></div>
  <form @submit.prevent></form>
  <input @keyup.page-down="handlePageDown" />
  <input @keyup.あ="handleKey" />
  <div v-on="{ click: handleClick }"></div>
</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

vue/valid-v-once

Exiger des directives v-once valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-once": "error"
      }
    },
  },
});

vp run lint

Mauvais

v-once possède une valeur, un argument ou un modificateur, alors que cette directive marque un rendu unique sans recevoir de valeur.

<template>
<div v-once="foo"></div>
<div v-once:arg></div>
<div v-once.mod></div>
</template>

Bon

v-once seul marque le sous-arbre pour un rendu unique sans syntaxe non prise en charge.

<template>
<div v-once></div>
</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

vue/valid-v-pre

Exiger des directives v-pre valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-pre": "error"
      }
    },
  },
});

vp run lint

Mauvais

v-pre possède un argument, un modificateur ou une valeur, alors que cette directive est un marqueur sans valeur qui ignore la compilation.

<template>
<div v-pre:arg></div>
<div v-pre.mod></div>
<div v-pre="foo"></div>
</template>

Bon

v-pre seul laisse le sous-arbre non compilé ; ses moustaches s’affichent telles qu’elles sont écrites.

<template>
<div v-pre>{{ raw }}</div>
</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

vue/valid-v-show

Exiger des directives v-show valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-show": "error"
      }
    },
  },
});

vp run lint

Mauvais

v-show n’a pas d’expression de visibilité ou est placé sur un <template> qui ne produit aucun élément DOM dont l’affichage puisse être modifié.

<template>
  <div v-show></div>
  <template v-show="ready"><div></div></template>
</template>

Bon

Appliquez l’expression de visibilité à un élément affiché, tel que <div>.

<template>
  <div v-show="ready"></div>
  <div v-show="count > 0"></div>
</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

vue/valid-v-slot

Exiger des directives v-slot valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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: Consultez les options typées et leurs valeurs par défaut.

Configuration (Vite+)

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

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

vp run lint

Mauvais

La directive de slot est placée sur un <div> natif ou entre en conflit avec d’autres déclarations de slots par défaut ou nommés.

<template>
  <div v-slot:header></div>
  <MyComponent v-slot v-slot:header />
  <template v-slot:header v-slot:footer />
</template>

Bon

Déclarez le slot par défaut d’un composant sur ce composant, ou son slot nommé sur un enfant <template #header>.

<template>
  <MyComponent v-slot="{ item }">{{ item }}</MyComponent>
  <MyComponent>
    <template #header>Header</template>
  </MyComponent>
</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

vue/valid-v-text

Exiger des directives v-text valides

Mauvais · Bon

Gravité par défaut: error
Préréglages: essential, happy-path, nuxt, ecosystem, opinionated
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": {
        "vue/valid-v-text": "error"
      }
    },
  },
});

vp run lint

Mauvais

v-text n’a pas d’expression de texte ou utilise un argument ou modificateur non pris en charge.

<template>
<div v-text></div>
<div v-text:arg="foo"></div>
<div v-text.mod="foo"></div>
</template>

Bon

v-text="msg" est syntaxiquement valide. La règle de style distincte vue/no-v-text peut toujours préférer l’interpolation.

<template>
<div v-text="msg"></div>
</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

vue/warn-custom-block

Signaler les blocs personnalisés dans les fichiers SFC

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/warn-custom-block": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le SFC contient un bloc personnalisé <i18n>, qui nécessite une intégration externe au-delà du traitement ordinaire de template, script et style.

<i18n>
{ "en": { "hello": "Hello" } }
</i18n>

<template>
  <p>{{ hello }}</p>
</template>

Bon

L’exemple utilise les blocs standard template et script-setup. Cet avertissement facultatif de portabilité ne signifie pas que tous les blocs personnalisés sont invalides en Vue.

<template>
  <p>{{ hello }}</p>
</template>

<script setup lang="ts">
const hello = "Hello";
</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

vue/warn-custom-directive

Signaler les directives personnalisées nécessitant un enregistrement

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
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": {
        "vue/warn-custom-directive": "warn"
      }
    },
  },
});

vp run lint

Mauvais

v-focus, v-mask et v-click-outside nécessitent des implémentations de directives propres au projet, signalées par cette convention facultative.

<template>
  <input v-focus />
  <input v-mask="'###-####'" />
  <div v-click-outside="handleClose"></div>
</template>

Bon

L’exemple utilise les directives intégrées v-if, v-model et v-on. Une directive personnalisée correctement enregistrée peut rester valide en Vue lorsque cette politique est désactivée.

<template>
  <div v-if="ready"></div>
  <input v-model="value" />
  <button type="button" @click="onClick">Save</button>
</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