Règles HTML

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

Règle	Exemples	Objectif
`html/deprecated-attr`	Mauvais · Bon	Interdire les attributs HTML obsolètes
`html/deprecated-element`	Mauvais · Bon	Interdire les éléments HTML obsolètes
`html/id-duplication`	Mauvais · Bon	Interdire les identifiants d’éléments en double
`html/no-consecutive-br`	Mauvais · Bon	Interdire les éléments <br> consécutifs
`html/no-dupe-style-properties`	Mauvais · Bon	Interdire les propriétés en double dans les attributs de style en ligne
`html/no-duplicate-class`	Mauvais · Bon	Interdire les noms de classes en double dans un attribut class statique
`html/no-duplicate-dt`	Mauvais · Bon	Interdire les noms <dt> en double dans <dl>
`html/no-empty-palpable-content`	Mauvais · Bon	Interdire les éléments vides qui attendent un contenu visible
`html/require-datetime`	Mauvais · Bon	Exiger l’attribut datetime sur l’élément <time>

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

`html/deprecated-attr`

Interdire les attributs HTML obsolètes

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": {
        "html/deprecated-attr": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le paragraphe utilise l’attribut de présentation obsolète align.

<template>
<p align="center">Notice</p>
</template>

Bon

La classe et la déclaration text-align: center expriment l’alignement au moyen du CSS.

<template><p class="notice">Notice</p></template>
<style scoped>.notice { text-align: center; }</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

`html/deprecated-element`

Interdire les éléments HTML obsolètes

Mauvais · Bon

Configuration (Vite+)

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

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

vp run lint

Mauvais

L’élément center utilise un élément de présentation HTML obsolète.

<template>
  <center>Profile</center>
</template>

Bon

Une section et une classe de style remplacent l’élément obsolète tout en préservant le contenu.

<template>
  <section class="profile">Profile</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

`html/id-duplication`

Interdire les identifiants d’éléments en double

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": {
        "html/id-duplication": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le champ et le paragraphe d’aide déclarent tous deux id="email", rendant la cible du label ambiguë.

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

Bon

Le champ conserve email ; le paragraphe d’aide utilise email-help, et aria-describedby référence cet identifiant distinct.

<template>
  <label for="email">Email</label>
  <input id="email" aria-describedby="email-help" />
  <p id="email-help">Required</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

`html/no-consecutive-br`

Interdire les éléments <br> consécutifs

Mauvais · Bon

Configuration (Vite+)

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

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

vp run lint

Mauvais

Deux éléments de saut de ligne consécutifs créent un espacement entre des blocs au sein d’un seul paragraphe.

<template>
  <p>First line<br /><br />Second block</p>
</template>

Bon

Des paragraphes séparés expriment les deux blocs de contenu sans répéter les éléments de saut de ligne.

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

`html/no-dupe-style-properties`

Interdire les propriétés en double dans les 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": {
        "html/no-dupe-style-properties": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Chaque style statique répète une propriété ; margin et MARGIN sont également considérés comme la même propriété.

<template>
  <div style="color: red; color: blue">text</div>
  <div style="margin: 0; MARGIN: 1px">text</div>
</template>

Bon

Le style statique utilise des propriétés distinctes de couleur et d’arrière-plan. Les liaisons de style dynamiques sont hors du champ de ce contrôle des attributs statiques.

<template>
  <div style="color: red; background: blue">text</div>
  <div :style="{ color: a, color: b }">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

`html/no-duplicate-class`

Interdire les noms de classes en double dans un attribut class statique

Mauvais · Bon

Configuration (Vite+)

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

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

vp run lint

Mauvais

La liste de classes statique répète le nom btn.

<template>
  <div class="btn btn primary">click</div>
</template>

Bon

La liste de classes conserve une seule occurrence de btn et le nom distinct primary.

<template>
  <div class="btn primary">click</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

`html/no-duplicate-dt`

Interdire les noms <dt> en double dans <dl>

Mauvais · Bon

Configuration (Vite+)

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

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

vp run lint

Mauvais

La même liste de définitions répète le terme API pour deux descriptions.

<template>
  <dl>
    <dt>API</dt>
    <dd>Public interface</dd>
    <dt>API</dt>
    <dd>Internal service</dd>
  </dl>
</template>

Bon

Un seul terme API est suivi des deux descriptions, évitant de répéter le terme.

<template>
  <dl>
    <dt>API</dt>
    <dd>Public interface</dd>
    <dd>Internal service</dd>
  </dl>
</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

`html/no-empty-palpable-content`

Interdire les éléments vides qui attendent un contenu visible

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": {
        "html/no-empty-palpable-content": "warn"
      }
    },
  },
});

vp run lint

Mauvais

Le paragraphe, l’élément de liste et la cellule de tableau ont tous un contenu palpable vide.

<template>
  <p></p>
  <li></li>
  <td></td>
</template>

Bon

Du texte remplit le paragraphe, une interpolation fournit le contenu de l’élément de liste, et aria-label nomme explicitement la cellule autrement vide.

<template>
  <p>Overview</p>
  <li>{{ item.label }}</li>
  <td aria-label="No value"></td>
</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

`html/require-datetime`

Exiger l’attribut datetime sur l’élément <time>

Mauvais · Bon

Configuration (Vite+)

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

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

vp run lint

Mauvais

L’élément time contient une date lisible par une personne, mais aucune valeur datetime lisible par une machine.

<template>
  <time>May 13, 2026</time>
</template>

Bon

datetime="2026-05-13" fournit la date correspondante lisible par une machine.

<template>
  <time datetime="2026-05-13">May 13, 2026</time>
</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