Regras de Vapor

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

script/no-get-current-instance

Proibir getCurrentInstance() no modo Vapor (retorna null)

Incorreto · Correto

Severidade padrão: error
Predefinições: opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Verificações de script voltadas ao Vapor; a ativação explícita também aplica a restrição a scripts comuns
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": {
        "script/no-get-current-instance": "error"
      }
    },
  },
});

vp run lint

Incorreto

O setup marcado como Vapor importa e chama getCurrentInstance, dependendo de uma API de instância que esta regra proíbe para componentes orientados a Vapor.

<script setup lang="ts" vapor>
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();
</script>

Correto

inject("app-config") obtém a configuração fornecida explicitamente sem importar nem chamar getCurrentInstance.

<script setup lang="ts" vapor>
import { inject } from "vue";
const appConfig = inject("app-config");
</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

script/no-next-tick

Proibir o uso de nextTick() em componentes orientados a Vapor

Incorreto · Correto

Severidade padrão: error
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Verificações de script voltadas ao Vapor; a ativação explícita também aplica a restrição a scripts comuns
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": {
        "script/no-next-tick": "error"
      }
    },
  },
});

vp run lint

Incorreto

O componente orientado a Vapor importa e aguarda nextTick, introduzindo a dependência do agendamento da atualização do DOM que esta regra de migração rejeita.

<script setup lang="ts" vapor>
import { nextTick } from "vue";
await nextTick();
</script>

Correto

O input é obtido por useTemplateRef e recebe foco em onMounted. O momento explícito de montagem substitui a dependência de nextTick do exemplo.

<script setup lang="ts" vapor>
import { onMounted, useTemplateRef } from "vue";
const input = useTemplateRef<HTMLInputElement>("input");
onMounted(() => { input.value?.focus(); });
</script>
<template><input ref="input"></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

script/no-options-api

Proibir padrões da Options API no modo Vapor

Incorreto · Correto

Severidade padrão: error
Predefinições: opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Verificações de script voltadas ao Vapor; a ativação explícita também aplica a restrição a scripts comuns
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": {
        "script/no-options-api": "error"
      }
    },
  },
});

vp run lint

Incorreto

O objeto da exportação padrão declara data() da Options API, uma forma de opção de componente proibida por esta regra.

<script lang="ts">
export default {
  data() {
    return { count: 0 };
  },
};
</script>

Correto

O estado do componente passa a ser um ref da Composition API em <script setup> com Vapor, removendo o objeto da Options API e sua opção data.

<script setup lang="ts" vapor>
const count = ref(0);
</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

vapor/no-inline-template

Proibir o atributo obsoleto inline-template

Incorreto · Correto

Severidade padrão: error
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": {
        "vapor/no-inline-template": "error"
      }
    },
  },
});

vp run lint

Incorreto

LegacyCard usa o atributo inline-template para a marcação de seu conteúdo filho.

<template>
  <LegacyCard inline-template>
    <p>Profile</p>
  </LegacyCard>
</template>

Correto

A marcação é passada pelo slot padrão em vez de um template inline.

<template>
  <LegacyCard>
    <template #default>
      <p>Profile</p>
    </template>
  </LegacyCard>
</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

vapor/no-vue-lifecycle-events

Proibir eventos de ciclo de vida @vue:xxx por elemento (não suportados em Vapor)

Incorreto · Correto

Severidade padrão: error
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": {
        "vapor/no-vue-lifecycle-events": "error"
      }
    },
  },
});

vp run lint

Incorreto

O input usa o evento de ciclo de vida de template @vue:mounted.

<template>
  <input @vue:mounted="focusInput" />
</template>

Correto

onMounted acessa a referência nomeada de template e coloca o foco no input por meio do hook de ciclo de vida de script suportado.

<script setup lang="ts" vapor>
const input = useTemplateRef<HTMLInputElement>("input");

onMounted(() => {
  input.value?.focus();
});
</script>

<template>
  <input ref="input" />
</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

vapor/prefer-static-class

Preferir class estática a uma vinculação dinâmica de class para literais de string

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Disponível para os diagnósticos compatíveis
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": {
        "vapor/prefer-static-class": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A vinculação de class avalia uma string constante, embora a classe não mude.

<template>
  <section :class="'panel panel-primary'">Profile</section>
</template>

Correto

Um atributo class estático expressa as mesmas classes do painel sem uma vinculação.

<template>
  <section class="panel panel-primary">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

vapor/require-vapor-attribute

Sugerir a adição do atributo vapor a script setup

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Não implementada no lint de SFC
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.

Suporte atual: no-sfc-finding

Esta regra é um marcador provisório com callback vazio. Adicionar vapor seleciona a compilação Vapor; o linter atual não reporta este ID do catálogo pela ausência desse atributo.

ID configurado (sem diagnóstico de SFC atualmente)

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

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

vp run lint

Incorreto

O bloco script setup não tem o atributo de compilação Vapor. Esta é uma convenção pretendida: a função de retorno atualmente vazia da regra não diagnostica sua ausência.

<script setup>
const count = 0;
</script>
<template><p>{{ count }}</p></template>

Correto

Adicionar vapor seleciona a compilação Vapor. Isso demonstra a correção pretendida e não implica que o linter atual emita esta regra do catálogo.

<script setup vapor>
const count = 0;
</script>
<template><p>{{ count }}</p></template>

O exemplo correto ilustra a convenção pretendida; o fluxo atual de SFC não emite o diagnóstico específico da regra para nenhum dos exemplos.

Implementação · Todas as regras