Vize

Regras de Musea e CSS

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
css/no-display-none Incorreto · Correto Sugerir v-show em vez de display: none
css/no-hardcoded-values Incorreto · Correto Sugerir variáveis CSS em vez de valores fixos escritos diretamente
css/no-id-selectors Incorreto · Correto Desencorajar o uso de seletores de ID no CSS
css/no-important Incorreto · Correto Desencorajar o uso de !important no CSS
css/no-utility-classes Incorreto · Correto Alertar sobre a implementação de classes utilitárias nos estilos de componentes
css/no-v-bind-performance Incorreto · Correto Alertar sobre o custo de desempenho do v-bind() no CSS
css/prefer-logical-properties Incorreto · Correto Recomendar propriedades lógicas de CSS para melhorar o suporte à internacionalização
css/prefer-nested-selectors Incorreto · Correto Recomendar o aninhamento de CSS para seletores de descendentes
css/prefer-slotted Incorreto · Correto Recomendar ::v-slotted() para estilizar o conteúdo de slots
css/require-font-display Incorreto · Correto Exigir font-display nas regras @font-face
musea/no-empty-variant Incorreto · Correto Proibir blocos <variant> vazios
musea/prefer-design-tokens Incorreto · Correto Preferir variáveis CSS de tokens de design a valores primitivos fixos escritos diretamente
musea/require-component Incorreto · Correto Exigir o atributo component no bloco <art>
musea/require-title Incorreto · Correto Exigir o atributo title no bloco <art>
musea/unique-variant-names Incorreto · Correto Exigir nomes de variante únicos
musea/valid-variant Incorreto · Correto Exigir o atributo name nos blocos <variant>

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

css/no-display-none

Sugerir v-show em vez de display: none

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos style em CSS puro (blocos scss, sass, less e stylus são ignorados)
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": {
        "css/no-display-none": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A declaração .message oculta o parágrafo local por meio de CSS, em vez de uma condição de visibilidade no template.

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

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

Correto

v-show="isSaved" torna explícita a condição de visibilidade no parágrafo local e remove display: none.

<template>
  <p v-show="isSaved" class="message">Saved</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

css/no-hardcoded-values

Sugerir variáveis CSS em vez de valores fixos escritos diretamente

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos style em CSS puro (blocos scss, sass, less e stylus são ignorados)
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": {
        "css/no-hardcoded-values": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O botão incorpora números de espaçamento e uma cor hexadecimal diretamente nas declarações.

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

Correto

As declarações fazem referência a propriedades personalizadas de espaçamento e cor com nomes, permitindo manter esses valores como tokens.

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

css/no-id-selectors

Desencorajar o uso de seletores de ID no CSS

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos style em CSS puro (blocos scss, sass, less e stylus são ignorados)
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": {
        "css/no-id-selectors": "warn"
      }
    },
  },
});

vp run lint

Incorreto

#submit vincula a regra de estilo a um seletor de ID.

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

Correto

A classe .submit fornece um ponto de aplicação de estilo reutilizável sem um seletor de ID.

<style scoped>
.submit {
  font-weight: 600;
}
</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

css/no-important

Desencorajar o uso de !important no CSS

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos style em CSS puro (blocos scss, sass, less e stylus são ignorados)
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": {
        "css/no-important": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A declaração de cor substitui a prioridade normal da cascata com !important.

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

Correto

A cor vem de uma propriedade personalizada sem uma declaração importante.

<style scoped>
.button {
  color: var(--button-color);
}
</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

css/no-utility-classes

Alertar sobre a implementação de classes utilitárias nos estilos de componentes

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos style em CSS puro (blocos scss, sass, less e stylus são ignorados)
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": {
        "css/no-utility-classes": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Os seletores definidos usam nomes típicos de utilitários, como .flex, .mt-4 e .text-center.

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

Correto

Um seletor .my-component específico do componente agrupa seus estilos sob um único nome semântico.

<style scoped>
.my-component { display: flex; margin-top: 1rem; }
</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

css/no-v-bind-performance

Alertar sobre o custo de desempenho do v-bind() no CSS

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos style em CSS puro (blocos scss, sass, less e stylus são ignorados)
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": {
        "css/no-v-bind-performance": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A folha de estilos lê o valor variável de offset por meio do mecanismo v-bind() do CSS de SFC.

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

Correto

O elemento recebe a transformação variável diretamente por meio da vinculação de estilo.

<template>
  <article :style="{ transform: `translateX(${offset}px)` }" class="card" />
</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

css/prefer-logical-properties

Recomendar propriedades lógicas de CSS para melhorar o suporte à internacionalização

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos style em CSS puro (blocos scss, sass, less e stylus são ignorados)
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": {
        "css/prefer-logical-properties": "warn"
      }
    },
  },
});

vp run lint

Incorreto

margin-left fixa a margem em um lado físico, independentemente da direção de escrita.

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

Correto

margin-inline-start acompanha o início da direção em linha.

<style scoped>
.panel {
  margin-inline-start: 1rem;
}
</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

css/prefer-nested-selectors

Recomendar o aninhamento de CSS para seletores de descendentes

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos style em CSS puro (blocos scss, sass, less e stylus são ignorados)
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": {
        "css/prefer-nested-selectors": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O seletor de descendentes .card .title repete o seletor pai em uma regra sem aninhamento.

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

Correto

A regra .title é aninhada dentro de .card, mantendo junta a relação de estilo entre pai e filho.

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

css/prefer-slotted

Recomendar ::v-slotted() para estilizar o conteúdo de slots

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos style em CSS puro (blocos scss, sass, less e stylus são ignorados)
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": {
        "css/prefer-slotted": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A folha de estilos com escopo tem como alvo o ponto de inserção slot, em vez dos elementos fornecidos pelo slot.

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

Correto

:slotted(.label) tem como alvo o elemento de rótulo fornecido, por meio do seletor de slot com escopo.

<style scoped>
:slotted(.label) { color: red; }
</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

css/require-font-display

Exigir font-display nas regras @font-face

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos style em CSS puro (blocos scss, sass, less e stylus são ignorados)
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": {
        "css/require-font-display": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A declaração font-face define a origem da fonte, mas omite sua política font-display.

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

Correto

font-display: swap seleciona explicitamente a política de exibir uma fonte substituta e depois a fonte carregada.

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

musea/no-empty-variant

Proibir blocos <variant> vazios

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos art, variant e style de arquivos .art.vue do Musea
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": {
        "musea/no-empty-variant": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A variante chamada primary está vazia, então não fornece conteúdo para a prévia.

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

Correto

A variante renderiza um Button primary com seu conteúdo Save.

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

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

musea/prefer-design-tokens

Preferir variáveis CSS de tokens de design a valores primitivos fixos escritos diretamente

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos art, variant e style de arquivos .art.vue do Musea
Opções: Consulte as opções tipadas e os valores padrão.

Exige um arquivo .art.vue e o inventário de tokens mostrado abaixo. Não infere um token a partir de uma cor arbitrária.

Configuração (Vite+)

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

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

vp run lint

Incorreto

O exemplo art usa a cor azul literal, em vez do token de design primary configurado.

Button.art.vue

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

Correto

O estilo faz referência a --color-primary, o token configurado para este exemplo.

Button.art.vue

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

musea/require-component

Exigir o atributo component no bloco <art>

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos art, variant e style de arquivos .art.vue do Musea
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": {
        "musea/require-component": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O bloco art fornece um título, mas não identifica o componente exibido na prévia.

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

Correto

defineArt fornece ./Button.vue como o componente do bloco art.

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

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

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

musea/require-title

Exigir o atributo title no bloco <art>

Incorreto · Correto

Severidade padrão: error
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos art, variant e style de arquivos .art.vue do Musea
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": {
        "musea/require-title": "error"
      }
    },
  },
});

vp run lint

Incorreto

O bloco art identifica Button.vue, mas não fornece um título.

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

Correto

As opções de defineArt fornecem o título Button para o bloco art.

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

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

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

musea/unique-variant-names

Exigir nomes de variante únicos

Incorreto · Correto

Severidade padrão: error
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos art, variant e style de arquivos .art.vue do Musea
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": {
        "musea/unique-variant-names": "error"
      }
    },
  },
});

vp run lint

Incorreto

Duas variantes no mesmo bloco art usam o nome primary.

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

Correto

As variantes têm os nomes distintos primary e secondary.

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

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

musea/valid-variant

Exigir o atributo name nos blocos <variant>

Incorreto · Correto

Severidade padrão: error
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Blocos art, variant e style de arquivos .art.vue do Musea
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": {
        "musea/valid-variant": "error"
      }
    },
  },
});

vp run lint

Incorreto

A variante omite o nome necessário para identificar a prévia.

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

Correto

O nome primary identifica essa variante.

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

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

Released under the MIT License.

Copyright © 2024-2026 ubugeeei