Regras do Ecossistema

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.

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

ecosystem/nuxt-prefer-nuxt-link

Preferir NuxtLink para links internos da aplicação

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt
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": {
        "ecosystem/nuxt-prefer-nuxt-link": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O destino interno de configurações usa uma âncora comum em uma aplicação Nuxt.

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

Correto

NuxtLink trata o mesmo destino interno por meio do roteador do Nuxt.

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

ecosystem/pinia-prefer-store-to-refs

Preferir storeToRefs() ao desestruturar stores do Pinia

Incorreto · Correto

Severidade padrão: warning
Predefinições: ecosystem
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Scripts JS/TS em SFCs Vue; os exemplos mostram a forma relevante de Options API ou script setup
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": {
        "ecosystem/pinia-prefer-store-to-refs": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Desestruturar name diretamente do store separa o valor de seu acesso reativo ao store.

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

Correto

O store permanece intacto e storeToRefs cria uma referência reativa para name.

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

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

ecosystem/router-link-require-to

Exigir um destino to nos componentes RouterLink e NuxtLink

Incorreto · Correto

Severidade padrão: error
Predefinições: ecosystem
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.

Um link que seja a única raiz de um SFC pode herdar seu target dos atributos do pai. Este exemplo usa um link aninhado, cujo target deve ser explícito.

Configuração (Vite+)

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

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

vp run lint

Incorreto

O RouterLink aninhado não tem um destino to; ele não pode depender da propagação de atributos do elemento raiz.

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

Correto

to="/settings" fornece explicitamente o destino do link aninhado.

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

ecosystem/void-link-require-href

Exigir href nos componentes Link do Void Vue

Incorreto · Correto

Severidade padrão: error
Predefinições: ecosystem
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": {
        "ecosystem/void-link-require-href": "error"
      }
    },
  },
});

vp run lint

Incorreto

O Link importado de @void/vue omite seu destino href.

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

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

Correto

O mesmo Link importado recebe o destino de configurações por meio de href.

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

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

ecosystem/void-link-valid-method

Validar props method estáticas do Link do Void Vue

Incorreto · Correto

Severidade padrão: warning
Predefinições: ecosystem
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": {
        "ecosystem/void-link-valid-method": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A ação DELETE solicita pré-busca, embora a pré-busca seja destinada a solicitações de navegação.

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

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

Correto

Remover prefetch mantém a ação DELETE sem fazer a pré-busca dessa solicitação que não é GET.

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

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

ecosystem/vue-i18n-no-missing-key

Relatar chaves estáticas do vue-i18n ausentes nas mensagens locais do SFC

Incorreto · Correto

Severidade padrão: warning
Predefinições: ecosystem
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": {
        "ecosystem/vue-i18n-no-missing-key": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O template solicita auth.missing, mas as mensagens locais em inglês declaram apenas auth.login.

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

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

Correto

O template solicita a chave auth.login, que existe nas mensagens locais.

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

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

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

ecosystem/vue-router-prefer-named-link

Preferir objetos de rotas nomeadas a strings de caminho estáticas no RouterLink

Incorreto · Correto

Severidade padrão: warning
Predefinições: ecosystem
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": {
        "ecosystem/vue-router-prefer-named-link": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O destino do RouterLink é um caminho literal, em vez de uma rota nomeada.

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

Correto

O objeto de rota vinculado identifica o destino pelo nome de rota settings.

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

ecosystem/vue-router-prefer-named-push

Preferir objetos de rotas nomeadas para navegação programática com Vue Router

Incorreto · Correto

Severidade padrão: warning
Predefinições: ecosystem
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Scripts JS/TS em SFCs Vue; os exemplos mostram a forma relevante de Options API ou script setup
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": {
        "ecosystem/vue-router-prefer-named-push": "warn"
      }
    },
  },
});

vp run lint

Incorreto

router.push recebe uma string de caminho vinculada à grafia atual da URL.

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

Correto

router.push recebe um objeto de rota com o nome estável settings.

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

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

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

Evitar snapshots de wrapper.html() nos testes com Vue Test Utils

Incorreto · Correto

Severidade padrão: warning
Predefinições: ecosystem
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Scripts JS/TS em SFCs Vue; os exemplos mostram a forma relevante de Options API ou script setup
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": {
        "ecosystem/vue-test-utils-no-html-snapshot": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A asserção registra um snapshot de todo o HTML do wrapper, em vez de verificar o comportamento esperado.

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

Correto

A asserção verifica se o texto renderizado contém Saved.

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

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

nuxt/no-nuxt-config-test-key

Proibir a definição da chave test na configuração do Nuxt

Incorreto · Correto

Severidade padrão: error
Predefinições: nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Arquivos de configuração do Nuxt (nuxt.config.ts)
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": {
        "nuxt/no-nuxt-config-test-key": "error"
      }
    },
  },
});

vp run lint

Incorreto

A configuração exportada do Nuxt define a chave identificadora test como o booleano true, a estrutura de configuração obsoleta que esta regra rejeita.

nuxt.config.ts

export default defineNuxtConfig({ test: true });

Correto

A configuração vazia remove essa propriedade booleana test. Este exemplo não proíbe um objeto de configuração de testes.

nuxt.config.ts

export default defineNuxtConfig({});

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

nuxt/no-page-meta-runtime-values

Proibir valores do contexto de execução no nível de avaliação imediata de definePageMeta, que é extraído para um fragmento separado durante a compilação e executado antes do setup do componente

Incorreto · Correto

Severidade padrão: error
Predefinições: nuxt
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Scripts JS/TS em SFCs Vue; os exemplos mostram a forma relevante de Options API ou script setup
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": {
        "nuxt/no-page-meta-runtime-values": "error"
      }
    },
  },
});

vp run lint

Incorreto

useRoute() é avaliado imediatamente durante a construção do objeto definePageMeta, embora a macro eleve esses metadados para fora do contexto de execução de setup.

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

Correto

validate recebe uma função de callback, então o acesso a useRoute().params.id é adiado até a execução dessa função. A regra distingue corpos de funções com execução adiada de valores de metadados avaliados imediatamente.

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

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

nuxt/nuxt-config-keys-order

Preferir a ordem recomendada das propriedades de configuração do Nuxt

Incorreto · Correto

Severidade padrão: error
Predefinições: nuxt
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Arquivos de configuração do Nuxt (nuxt.config.ts)
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": {
        "nuxt/nuxt-config-keys-order": "error"
      }
    },
  },
});

vp run lint

Incorreto

A configuração coloca ssr antes de modules, invertendo sua ordem na sequência de chaves de configuração do Nuxt recomendada pela regra.

nuxt.config.ts

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

Correto

Colocar modules antes de ssr preserva os dois valores e atende à ordem prescrita; a correção muda a disposição, sem alterar o significado de nenhuma das opções.

nuxt.config.ts

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

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

nuxt/prefer-import-meta

Preferir import.meta.* a process.*

Incorreto · Correto

Severidade padrão: error
Predefinições: nuxt
Correção automática: Disponível para os diagnósticos compatíveis
Aplicável a: Scripts JS/TS em SFCs Vue; os exemplos mostram a forma relevante de Options API ou script setup
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": {
        "nuxt/prefer-import-meta": "error"
      }
    },
  },
});

vp run lint

Incorreto

process.client usa um indicador de ambiente legado do Nuxt que a regra pede para migrar para import.meta.

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

Correto

import.meta.client mantém explícito o ramo exclusivo do navegador usando o indicador de ambiente substituto.

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

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