Regras HTML

Cada regra desta categoria reúne nesta página sua finalidade, configuração e exemplos incorreto e correto completos. Os exemplos de projeto também incluem os arquivos compartilhados, que devem ser usados nos dois casos. As linhas destacadas mostram a alteração; o código copiado preserva o conteúdo completo. As notas de suporte distinguem os diagnósticos disponíveis das convenções ilustrativas e dos contratos sem produtor atual; ativar um ID não implementa uma verificação ausente.

Regra	Exemplos	Finalidade
`html/deprecated-attr`	Incorreto · Correto	Proibir atributos HTML obsoletos
`html/deprecated-element`	Incorreto · Correto	Proibir elementos HTML obsoletos
`html/id-duplication`	Incorreto · Correto	Proibir IDs de elementos duplicados
`html/no-consecutive-br`	Incorreto · Correto	Proibir elementos <br> consecutivos
`html/no-dupe-style-properties`	Incorreto · Correto	Proibir propriedades duplicadas em atributos de estilo em linha
`html/no-duplicate-class`	Incorreto · Correto	Proibir nomes de classe duplicados em um atributo class estático
`html/no-duplicate-dt`	Incorreto · Correto	Proibir nomes <dt> duplicados em <dl>
`html/no-empty-palpable-content`	Incorreto · Correto	Proibir elementos vazios que esperam conteúdo visível
`html/require-datetime`	Incorreto · Correto	Exigir o atributo datetime no elemento <time>

Todas as regras · Opções das regras · Mapa de migração do ESLint · Verificações do projeto · Atributos entre componentes

`html/deprecated-attr`

Proibir atributos HTML obsoletos

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

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

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

vp run lint

Incorreto

O parágrafo usa o atributo de apresentação obsoleto align.

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

Correto

A classe e a declaração text-align: center expressam o alinhamento por meio de CSS.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

`html/deprecated-element`

Proibir elementos HTML obsoletos

Incorreto · Correto

Configuração (Vite+)

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

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

vp run lint

Incorreto

O elemento center usa um elemento de apresentação HTML obsoleto.

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

Correto

Uma seção e uma classe de estilo substituem o elemento obsoleto, preservando o conteúdo.

<template>
  <section class="profile">Profile</section>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

`html/id-duplication`

Proibir IDs de elementos duplicados

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "html/id-duplication": "error"
      }
    },
  },
});

vp run lint

Incorreto

Tanto o campo quanto o parágrafo de ajuda declaram id="email", tornando ambíguo o destino do rótulo.

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

Correto

O campo mantém email; o parágrafo de ajuda usa email-help, e aria-describedby faz referência a esse ID distinto.

<template>
  <label for="email">Email</label>
  <input id="email" aria-describedby="email-help" />
  <p id="email-help">Required</p>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

`html/no-consecutive-br`

Proibir elementos <br> consecutivos

Incorreto · Correto

Configuração (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

Incorreto

Dois elementos de quebra consecutivos criam espaçamento entre blocos dentro de um único parágrafo.

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

Correto

Parágrafos separados expressam os dois blocos de conteúdo sem repetir elementos de quebra.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

`html/no-dupe-style-properties`

Proibir propriedades duplicadas em atributos de estilo em linha

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (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

Incorreto

Cada estilo estático repete uma propriedade; margin e MARGIN também contam como a mesma propriedade.

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

Correto

O estilo estático usa propriedades distintas de cor e plano de fundo. Vinculações dinâmicas de estilo ficam fora desta verificação de atributos estáticos.

<template>
  <div style="color: red; background: blue">text</div>
  <div :style="{ color: a, color: b }">text</div>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

`html/no-duplicate-class`

Proibir nomes de classe duplicados em um atributo class estático

Incorreto · Correto

Configuração (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

Incorreto

A lista de classes estática repete o token btn.

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

Correto

A lista de classes mantém um token btn e o token distinto primary.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

`html/no-duplicate-dt`

Proibir nomes <dt> duplicados em <dl>

Incorreto · Correto

Configuração (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

Incorreto

A mesma lista de definições repete o termo API para duas descrições.

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

Correto

Um único termo API é seguido pelas duas descrições, evitando a repetição do termo.

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

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

`html/no-empty-palpable-content`

Proibir elementos vazios que esperam conteúdo visível

Incorreto · Correto

Configuração (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

Incorreto

O parágrafo, o item de lista e a célula da tabela têm conteúdo perceptível vazio.

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

Correto

O texto preenche o parágrafo, a interpolação fornece o conteúdo do item de lista e aria-label dá um nome explícito à célula que, de outra forma, estaria vazia.

<template>
  <p>Overview</p>
  <li>{{ item.label }}</li>
  <td aria-label="No value"></td>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

`html/require-datetime`

Exigir o atributo datetime no elemento <time>

Incorreto · Correto

Configuração (Vite+)

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

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

vp run lint

Incorreto

O elemento time contém uma data legível por pessoas, mas não tem um valor datetime legível por máquinas.

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

Correto

datetime="2026-05-13" fornece a data correspondente em um formato legível por máquinas.

<template>
  <time datetime="2026-05-13">May 13, 2026</time>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras