Regras de Tipo e Script

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/component-options-name-casing

Exigir PascalCase na opção name do componente

Incorreto · Correto

Severidade padrão: error
Predefinições: opinionated, 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": {
        "script/component-options-name-casing": "error"
      }
    },
  },
});

vp run lint

Incorreto

A opção de componente name: 'my-component' está em kebab-case, enquanto esta regra exige um nome de componente literal em PascalCase.

<script lang="ts">
export default {
  name: 'my-component' // kebab-case
}
</script>

Correto

MyComponent começa com uma letra maiúscula e contém apenas caracteres alfanuméricos, atendendo à verificação de nome.

<script lang="ts">
export default {
  name: 'MyComponent'
}
</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/custom-event-name-casing

Exigir camelCase nos nomes de eventos personalizados emitidos

Incorreto · Correto

Severidade padrão: error
Predefinições: opinionated, 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: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "script/custom-event-name-casing": "error"
      }
    },
  },
});

vp run lint

Incorreto

A string emitida my-event contém um hífen e viola a política padrão de nomes de eventos em camelCase.

<script setup lang="ts">
const emit = defineEmits(['my-event'])
emit('my-event')         // kebab-case → report
</script>

Correto

Tanto a declaração quanto a chamada usam myEvent, preservando a correspondência entre o nome do evento e sua emissão e atendendo à política padrão de maiúsculas e minúsculas. Uma política configurada de kebab-case tem uma expectativa diferente.

<script setup lang="ts">
const emit = defineEmits(['myEvent'])
emit('myEvent')
</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/define-emits-declaration

Exigir a forma de defineEmits<{}>() baseada em tipos em vez da forma em tempo de execução ou de array

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, 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": {
        "script/define-emits-declaration": "warn"
      }
    },
  },
});

vp run lint

Incorreto

defineEmits(["change"]) usa uma declaração de array em tempo de execução; esta regra de estilo prefere uma declaração baseada em tipos.

<script setup lang="ts">
const emit = defineEmits(["change"]);
emit("change", 1);
</script>

Correto

defineEmits<{ change: [id: number] }>() move a declaração de evento para um argumento de tipo e descreve explicitamente o dado numérico usado por emit("change", 1).

<script setup lang="ts">
const emit = defineEmits<{ change: [id: number] }>();
emit("change", 1);
</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/define-macros-order

Exigir uma ordem consistente para as macros do compilador Vue em <script setup>

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, 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: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "script/define-macros-order": "warn"
      }
    },
  },
});

vp run lint

Incorreto

defineEmits aparece antes de defineProps, mas defineProps e depois defineEmits devem ser as primeiras instruções de <script setup>.

<script setup lang="ts">
// defineEmits before defineProps
const emit = defineEmits<{ change: [value: string] }>()
const props = defineProps<{ count: number }>()
</script>

Correto

defineProps e depois defineEmits vêm logo após os imports, antes de qualquer outra instrução; as demais macros podem vir em qualquer ordem.

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps<{ count: number }>()
const emit = defineEmits<{ change: [value: string] }>()
const model = defineModel<string>()
const value = 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

script/define-props-declaration

Exigir defineProps<{ ... }>() baseado em tipos em vez da forma com objeto em tempo de execução

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, 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": {
        "script/define-props-declaration": "warn"
      }
    },
  },
});

vp run lint

Incorreto

defineProps({ title: String }) fornece um objeto em tempo de execução, contrariando a preferência desta regra por props baseadas em tipos.

<script setup lang="ts">
const props = defineProps({ title: String });
console.log(props.title);
</script>

Correto

defineProps<{ title: string }>() declara title no argumento de tipo e mantém o acesso a props.title sem um argumento de declaração em tempo de execução.

<script setup lang="ts">
const props = defineProps<{ title: string }>();
console.log(props.title);
</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/define-props-destructuring

Exigir um estilo consistente de desestruturação de defineProps em <script setup>

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
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: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "script/define-props-destructuring": "warn"
      }
    },
  },
});

vp run lint

Incorreto

defineProps é atribuído à variável única props em vez de ser desestruturado, contrariando a preferência padrão pela desestruturação.

<script setup lang="ts">
const props = defineProps<{ foo: string }>()
</script>

Correto

O padrão de objeto vincula foo e bar diretamente e fornece um valor padrão para o bar opcional. Isso depende da desestruturação reativa de props do Vue 3.5+; o modo configurável never prefere a forma oposta.

<script setup lang="ts">
const { foo, bar = 'default' } = defineProps<{ foo: string; bar?: string }>()
</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-arrow-functions-in-watch

Proibir funções de seta como manipuladores de watch na Options API

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-arrow-functions-in-watch": "error"
      }
    },
  },
});

vp run lint

Incorreto

O observador value da Options API e o other.handler aninhado são funções de seta. Uma função de seta captura o this do contexto ao redor em vez de receber a instância do componente.

<script lang="ts">
export default {
  watch: {
    // `this` is not the component instance inside an arrow function.
    value: () => {
      this.doSomething()
    },
    other: {
      handler: () => {}
    }
  }
}
</script>

Correto

Ambos os manipuladores passam a ser métodos comuns, permitindo que o Vue vincule this ao componente. A opção deep: true do observador continua compatível com a forma de objeto.

<script lang="ts">
export default {
  watch: {
    value(newValue, oldValue) {
      this.doSomething()
    },
    other: {
      handler(newValue) {},
      deep: true
    }
  }
}
</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-async-in-computed

Proibir funções assíncronas em propriedades computadas

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-async-in-computed": "error"
      }
    },
  },
});

vp run lint

Incorreto

O getter de computed é async, então a busca produz uma Promise em vez de um valor computado derivado de forma síncrona.

<script setup lang="ts">
import { computed } from "vue";
const data = computed(async () => {
  const response = await fetch("/api/data");
  return response.json();
});
</script>

Correto

A busca assíncrona é movida para watch e armazena seu resultado em data.value. A limpeza cancela a requisição anterior e impede que uma função de retorno inativa grave um resultado desatualizado; não resta nenhum getter computado assíncrono.

<script setup lang="ts">
import { ref, watch } from "vue";
const query = ref("");
const data = ref<unknown>(null);
watch(query, async (value, _oldValue, onCleanup) => {
  const controller = new AbortController();
  let active = true;
  onCleanup(() => { active = false; controller.abort(); });
  const response = await fetch(`/api/data?q=${encodeURIComponent(value)}`, { signal: controller.signal });
  const next: unknown = await response.json();
  if (active) data.value = next;
});
</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-boolean-default

Proibir um valor padrão em uma prop Boolean

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, 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": {
        "script/no-boolean-default": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Tanto disabled quanto checked declaram um default em uma prop cujo único construtor é Boolean; a regra rejeita até mesmo um valor padrão false explícito.

<script lang="ts">
export default {
  props: {
    // Boolean props already default to false; an explicit default is confusing.
    disabled: { type: Boolean, default: true },
    checked: { type: Boolean, default: false }
  }
}
</script>

Correto

As props exclusivamente Boolean omitem default, usando o valor false implícito do Vue. A união [Boolean, String] e a prop Number ilustram que esta verificação se limita ao construtor único Boolean.

<script lang="ts">
export default {
  props: {
    // No explicit default: defaults to false.
    disabled: { type: Boolean },
    disabled2: Boolean,
    // Union type may legitimately need a default.
    value: { type: [Boolean, String], default: '' },
    // Non-Boolean prop.
    count: { type: Number, default: 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

script/no-deep-destructure-in-props

Proibir desestruturação profundamente aninhada em defineProps

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, 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": {
        "script/no-deep-destructure-in-props": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O padrão de vinculação percorre user para desestruturar name, ultrapassando a profundidade rasa padrão da desestruturação de props.

<script setup lang="ts">
const { user: { name } } = defineProps<{ user: { name: string } }>();
</script>

Correto

O objeto de props permanece intacto, e um getter computado lê props.user.name. O acesso aninhado continua explícito sem um padrão de vinculação profundamente aninhado.

<script setup lang="ts">
import { computed } from "vue";
const props = defineProps<{ user: { name: string } }>();
const userName = computed(() => props.user.name);
</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-deprecated-data-object-declaration

Proibir um literal de objeto como opção data do componente (o Vue 3 exige uma função)

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-deprecated-data-object-declaration": "error"
      }
    },
  },
});

vp run lint

Incorreto

A opção data da Options API é um literal de objeto, uma forma do Vue 2 que o Vue 3 não aceita mais.

<script lang="ts">
export default {
  // `data` must be a function in Vue 3, not an object literal.
  data: {
    count: 0
  }
}
</script>

Correto

data() retorna um novo objeto { count: 0 }, fornecendo a declaração de data baseada em função exigida pelo Vue 3.

<script lang="ts">
export default {
  data() {
    return { count: 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

script/no-deprecated-destroyed-lifecycle

Proibir os hooks de ciclo de vida obsoletos destroyed e beforeDestroy

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-deprecated-destroyed-lifecycle": "error"
      }
    },
  },
});

vp run lint

Incorreto

beforeDestroy é a opção de ciclo de vida removida do Vue 2 usada para limpar o temporizador.

<script lang="ts">
export default { beforeDestroy() { clearTimeout(this.timer); } };
</script>

Correto

Renomear o hook para beforeUnmount preserva o corpo da limpeza com o nome de ciclo de vida do Vue 3.

<script lang="ts">
export default { beforeUnmount() { clearTimeout(this.timer); } };
</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-deprecated-dollar-listeners-api

Proibir a propriedade de instância $listeners removida no Vue 3 (incorporada a $attrs)

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-deprecated-dollar-listeners-api": "error"
      }
    },
  },
});

vp run lint

Incorreto

As leituras de membros e a referência direta no argumento usam $listeners, que o Vue 3 removeu após incorporar os ouvintes aos atributos.

<script>
export default {
  mounted() {
    const vm = this
    return vm.$listeners
  }
}
</script>
<template><Child v-on="$listeners" /></template>

Correto

As leituras passam a usar this.$attrs e ctx.attrs do contexto de setup. Essas formas substituem a API de ouvintes removida; os objetos receptores ilustrados precisam existir no contexto do componente ao redor.

<script>
export default {
  mounted() {
    return this.$attrs
  }
}
</script>
<template><Child v-bind="$attrs" /></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-deprecated-dollar-scopedslots-api

Proibir a propriedade de instância $scopedSlots removida no Vue 3 (usar $slots)

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-deprecated-dollar-scopedslots-api": "error"
      }
    },
  },
});

vp run lint

Incorreto

this.$scopedSlots, ctx.$scopedSlots e a referência direta a $scopedSlots usam a API de slots com escopo do Vue 2 removida no Vue 3.

<script setup lang="ts">
const header = this.$scopedSlots.header
const footer = ctx.$scopedSlots.footer
render($scopedSlots.default)
</script>

Correto

Substituir $scopedSlots por $slots usa a API unificada de slots. O exemplo remove a grafia obsoleta em vez de estabelecer um contexto de setup para os objetos receptores.

<script setup lang="ts">
const header = this.$slots.header
const footer = ctx.$slots.footer
render($slots.default)
</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-deprecated-events-api

Proibir a API de eventos do Vue 2 removida ($on / $off / $once)

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-deprecated-events-api": "error"
      }
    },
  },
});

vp run lint

Incorreto

As chamadas de $on, $once e $off usam os métodos de barramento de eventos da instância removidos no Vue 3.

<script>
export default {
  mounted() {
    this.$on('event', handler)
    const vm = this
    vm.$once('event', handler)
    this.$off('event', handler)
  }
}
</script>

Correto

$emit continua válido, enquanto a assinatura no barramento de eventos passa para o método on do emissor externo. A correção separa a emissão direcionada ao pai de um barramento de eventos externo.

<script>
import mitt from 'mitt'
const emitter = mitt()
export default {
  mounted() {
    this.$emit('event', payload)
    emitter.on('event', handler)
  }
}
</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-deprecated-props-default-this

Proibir this dentro de uma função de valor padrão ou validação de prop (removido no Vue 3)

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-deprecated-props-default-this": "error"
      }
    },
  },
});

vp run lint

Incorreto

O valor padrão e o validador da prop leem this, mas essas funções não podem depender da instância do componente no Vue 3.

<script lang="ts">
export default {
  props: {
    size: {
      type: Number,
      // `this` is not the component instance in Vue 3.
      default() {
        return this.defaultSize
      }
    },
    value: {
      type: Number,
      validator() {
        return this.value > 0
      }
    }
  }
}
</script>

Correto

A função de valor padrão lê props.baseSize de seu argumento, e o validador testa seu argumento value. Ambos deixam de depender de um objeto receptor de instância indisponível.

<script lang="ts">
export default {
  props: {
    size: {
      type: Number,
      // Vue 3 passes the raw props as the first argument instead.
      default(props) {
        return props.baseSize
      }
    },
    value: {
      type: Number,
      validator(value) {
        return value > 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

script/no-dupe-keys

Proibir chaves duplicadas entre props/data/computed/methods/setup/inject da Options API

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-dupe-keys": "error"
      }
    },
  },
});

vp run lint

Incorreto

foo é declarado tanto em props quanto em data, e bar tanto em computed quanto em methods. Essas declarações disputam as mesmas chaves na instância do componente.

<script lang="ts">
export default {
  props: ['foo'],
  data() {
    return { foo: 1 } // duplicate of prop `foo`
  },
  computed: {
    bar() { return 2 }
  },
  methods: {
    bar() {} // duplicate of computed `bar`
  }
}
</script>

Correto

As declarações de prop, data e computed usam nomes distintos (foo, bar e baz), eliminando ambas as colisões entre opções.

<script lang="ts">
export default {
  props: ['foo'],
  data() {
    return { bar: 1 }
  },
  computed: {
    baz() { return 2 }
  }
}
</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-duplicate-attr-inheritance

Sinalizar um componente que aplica duas vezes seus atributos repassados

Incorreto · Correto

Severidade padrão: warning
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-duplicate-attr-inheritance": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Os valores explícitos inheritAttrs: true repetem o padrão do Vue. Esta regra sinaliza esse literal redundante mesmo quando não há expansão de $attrs na raiz.

<script setup></script>
<template><div><button v-bind="$attrs">Save</button></div></template>

Correto

inheritAttrs: false expressa uma desativação efetiva, enquanto o objeto vazio de opções deixa implícita a herança padrão. Nenhuma das formas repete o valor redundante true.

<script setup>defineOptions({ inheritAttrs: false })</script>
<template><div><button v-bind="$attrs">Save</button></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

script/no-export-in-script-setup

Proibir instruções export dentro de <script setup>

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-export-in-script-setup": "error"
      }
    },
  },
});

vp run lint

Incorreto

export const count tenta expor uma exportação de módulo a partir de <script setup>, onde exportações em tempo de execução são proibidas.

<script setup lang="ts">
export const count = 1;
</script>

Correto

Remover export mantém count como uma variável de setup em vez de uma exportação de módulo.

<script setup lang="ts">
const count = 1;
</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-expose-after-await

Proibir expose() e defineExpose() após um await

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-expose-after-await": "error"
      }
    },
  },
});

vp run lint

Incorreto

defineExpose() roda depois de um await de nível superior, quando não há instância de componente atual, então nada é exposto.

<script setup lang="ts">
await loadData()
defineExpose({ reload })
</script>

Correto

defineExpose() roda antes do primeiro await, enquanto a instância do componente ainda é a atual.

<script setup lang="ts">
defineExpose({ reload })
await loadData()
</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-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-import-compiler-macros

Proibir a importação de macros do compilador Vue que são importadas automaticamente

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-import-compiler-macros": "error"
      }
    },
  },
});

vp run lint

Incorreto

A importação de vue inclui defineProps e defineEmits, embora sejam macros do compilador disponíveis diretamente em <script setup>.

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
const props = defineProps<{ title: string }>();
const emit = defineEmits<{ save: [id: number] }>();
</script>

Correto

Remover as importações das macros mantém ambas as chamadas tipadas intactas; nenhuma das declarações precisa de uma importação em tempo de execução.

<script setup lang="ts">
const props = defineProps<{ title: string }>();
const emit = defineEmits<{ save: [id: number] }>();
</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-internal-imports

Proibir importações de módulos internos do Vue

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-internal-imports": "error"
      }
    },
  },
});

vp run lint

Incorreto

Ambas as importações apontam para arquivos internos de dist em vez do ponto de entrada público do pacote Vue, vinculando o componente aos caminhos dos arquivos de compilação.

<script setup lang="ts">
import { foo } from '@vue/runtime-core/dist/runtime-core.esm-bundler'
import { bar } from 'vue/dist/vue.esm-bundler'
</script>

Correto

Importar as funções auxiliares necessárias de vue remove a dependência dos locais dos arquivos internos de distribuição.

<script setup lang="ts">
import { ref, computed } from 'vue'
</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-lifecycle-after-await

Proibir hooks de ciclo de vida registrados após um await em setup()

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-lifecycle-after-await": "error"
      }
    },
  },
});

vp run lint

Incorreto

setup() chama onMounted() depois de await loadData(); sem instância de componente atual nesse ponto, o hook nunca é registrado.

<script lang="ts">
import { onMounted } from 'vue'
export default {
  async setup() {
    await loadData()
    onMounted(() => {})
  },
}
</script>

Correto

onMounted() é registrado antes do primeiro await, enquanto setup() ainda roda de forma síncrona para o componente.

<script lang="ts">
import { onMounted } from 'vue'
export default {
  async setup() {
    onMounted(() => {})
    await loadData()
  },
}
</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-multiple-slot-args

Proibir passar mais de um argumento a uma chamada de função de slot com escopo

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-multiple-slot-args": "warn"
      }
    },
  },
});

vp run lint

Incorreto

As chamadas de slot passam vários argumentos posicionais ou expandem uma lista desconhecida de argumentos. Os slots do Vue recebem um único objeto de props, não uma lista de parâmetros posicionais.

<script setup lang="ts">
slots.default(foo, bar)
$slots.header(a, b)
this.$scopedSlots.item(x, y)
useSlots().default(a, b)
slots.default(...args)
</script>

Correto

{ foo, bar } combina os dados em um único argumento; slotProps e a chamada sem argumentos também respeitam a forma de chamada de slot suportada.

<script setup lang="ts">
slots.default({ foo, bar })
slots.default(slotProps)
slots.default()
</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

script/no-potential-component-option-typo

Sinalizar prováveis erros de digitação nos nomes de opções de componentes da Options API

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-potential-component-option-typo": "error"
      }
    },
  },
});

vp run lint

Incorreto

A opção está escrita como method, a uma edição de distância da opção reconhecida methods; o Vue não a trataria como a declaração de métodos pretendida.

<script lang="ts">
export default { method: { save() {} } };
</script>

Correto

Alterar a chave para methods coloca save() dentro da opção de componente reconhecida.

<script lang="ts">
export default { methods: { save() {} } };
</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-reactive-destructure

Proibir a desestruturação de objetos reativos que causa perda de reatividade

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
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": {
        "script/no-reactive-destructure": "warn"
      }
    },
  },
});

vp run lint

Incorreto

const { count, name } = state copia propriedades primitivas do objeto reactive, perdendo sua conexão com alterações posteriores nas propriedades.

<script setup lang="ts">
import { reactive } from "vue";
const state = reactive({ count: 0, name: "Ada" });
const { count, name } = state;
</script>

Correto

Desestruturar toRefs(state) cria refs para count e name, mantendo cada variável vinculada à propriedade reativa original.

<script setup lang="ts">
import { reactive, toRefs } from "vue";
const state = reactive({ count: 0, name: "Ada" });
const { count, name } = toRefs(state);
</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-ref-as-operand

Exigir que variáveis vinculadas a refs sejam acessadas por .value quando usadas como operandos

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-ref-as-operand": "error"
      }
    },
  },
});

vp run lint

Incorreto

count + 1 usa o próprio objeto ref como operando aritmético em vez do número que ele encapsula.

<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
const next = count + 1;
</script>

Correto

count.value + 1 lê o número encapsulado antes de somar um; a aritmética no script exige esse acesso explícito ao ref.

<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
const next = count.value + 1;
</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-required-prop-with-default

Proibir uma prop que tenha required: true e também um valor padrão

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-required-prop-with-default": "error"
      }
    },
  },
});

vp run lint

Incorreto

title é obrigatório e recebe o valor alternativo "Untitled", combinando um contrato de entrada obrigatória com um valor padrão destinado à ausência de entrada.

<script lang="ts">
export default { props: { title: { type: String, required: true, default: "Untitled" } } };
</script>

Correto

Remover required: true torna title opcional e mantém "Untitled" como seu valor alternativo coerente.

<script lang="ts">
export default { props: { title: { type: String, default: "Untitled" } } };
</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-reserved-identifiers

Proibir o uso de identificadores reservados pelo compilador Vue

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-reserved-identifiers": "error"
      }
    },
  },
});

vp run lint

Incorreto

As variáveis __props, __emit e __sfc__ usam identificadores reservados para código gerado pelo compilador Vue.

<script setup lang="ts">
const __props = { name: "Ada" };
const __emit = () => {};
const __sfc__ = {};
</script>

Correto

Os nomes comuns props, emit e componentData evitam esses identificadores gerados enquanto mantêm as declarações de props e emits.

<script setup lang="ts">
const props = defineProps<{ name: string }>();
const emit = defineEmits<{ save: [] }>();
const componentData = {};
</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-reserved-keys

Proibir nomes reservados pelo Vue como chaves de props/data/computed/methods/setup/inject na Options API

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-reserved-keys": "error"
      }
    },
  },
});

vp run lint

Incorreto

A chave de data retornada, $el, colide com a propriedade nativa da instância do componente Vue e também usa um prefixo $ reservado.

<script lang="ts">
export default { data() { return { $el: "custom" }; } };
</script>

Correto

Renomear o dado da aplicação para elementLabel evita a API nativa da instância e o prefixo reservado.

<script lang="ts">
export default { data() { return { elementLabel: "custom" }; } };
</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-reserved-props

Proibir nomes reservados na declaração de props de um componente

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-reserved-props": "error"
      }
    },
  },
});

vp run lint

Incorreto

ref e $foo na forma de objeto, além de key na forma de array, são nomes reservados de props. ref e key são controles do framework, e nomes com prefixo $ são rejeitados.

<script lang="ts">
export default {
  props: {
    ref: String,   // reserved
    $foo: Number    // `$`-prefixed names are reserved
  }
}

export default {
  props: ['key']    // reserved (array form)
}
</script>

Correto

Os nomes comuns de props name e refValue evitam os nomes reservados tanto na grafia quanto no prefixo.

<script lang="ts">
export default {
  props: {
    name: String,
    refValue: Number
  }
}
</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-restricted-globals

Proibir referências a variáveis globais do ambiente de execução que devem passar por um encapsulamento tipado

Incorreto · Correto

Severidade padrão: error
Predefinições: none
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: Consulte as opções tipadas e os valores padrão.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "script/no-restricted-globals": "error"
      }
    },
  },
});

vp run lint

Incorreto

O exemplo lê diretamente as variáveis globais restritas por padrão process, localStorage e sessionStorage, ignorando as funções auxiliares explícitas de configuração e armazenamento do projeto.

<script setup lang="ts">
const flag = process.env.FEATURE_FLAG
const token = localStorage.getItem('auth.token')
sessionStorage.setItem('view.scroll', String(window.scrollY))
</script>

Correto

useFeatureFlag, authStorage.read e viewStorage.write removem essas referências diretas às variáveis globais restritas. O window.scrollY restante não é uma restrição padrão desta regra; a segurança em SSR é uma questão separada.

<script setup lang="ts">
// Use a typed config helper that distinguishes server vs. client.
const flag = useFeatureFlag('FEATURE_FLAG')

// Use a typed wrapper that scopes keys and handles SSR / disabled storage.
const token = authStorage.read('auth.token')
viewStorage.write('view.scroll', String(window.scrollY))
</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-restricted-members

Proibir acessos a membros object.property configurados pelo projeto

Incorreto · Correto

Severidade padrão: error
Predefinições: none
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: Consulte as opções tipadas e os valores padrão.

Este exemplo configura window.localStorage. A regra não tem uma lista padrão de bloqueio; ativá-la sozinha não reporta um membro.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "script/no-restricted-members": "error"
      },
      "ruleOptions": {
        "script/no-restricted-members": {
          "members": [
            {
              "object": "window",
              "property": "localStorage"
            }
          ]
        }
      }
    },
  },
});

vp run lint

Incorreto

Com { object: "window", property: "localStorage" } configurado em ruleOptions, window.localStorage acessa o par objeto/membro proibido. Esta regra não tem membros proibidos por padrão.

<script setup lang="ts">
const token = window.localStorage.getItem("token");
</script>

Correto

authStorage.read("token") delega a leitura à função auxiliar de armazenamento da aplicação e deixa de acessar o membro configurado window.localStorage.

<script setup lang="ts">
const token = authStorage.read("token");
</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-side-effects-in-computed-properties

Proibir efeitos colaterais em getters computados da Options API

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-side-effects-in-computed-properties": "error"
      }
    },
  },
});

vp run lint

Incorreto

doubled atribui um valor a this.count, e reversed modifica this.items por meio de reverse(). Ambos os getters alteram o estado do qual deveriam derivar seus valores.

<script lang="ts">
export default {
  data() {
    return { count: 0, items: [] }
  },
  computed: {
    doubled() {
      this.count = this.count * 2 // side effect: assigns to data
      return this.count
    },
    reversed() {
      return this.items.reverse() // side effect: mutates the array
    }
  }
}
</script>

Correto

doubled retorna a multiplicação sem atribuição. reversed copia o array antes de invertê-lo, então o getter não altera o estado original do componente.

<script lang="ts">
export default {
  data() {
    return { count: 0, items: [] }
  },
  computed: {
    doubled() {
      return this.count * 2
    },
    reversed() {
      return [...this.items].reverse() // operate on a copy
    }
  }
}
</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-top-level-ref-in-script

Proibir ref/reactive no nível superior para evitar contaminação de estado entre requisições

Incorreto · Correto

Severidade padrão: error
Predefinições: none
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": {
        "script/no-top-level-ref-in-script": "error"
      }
    },
  },
});

vp run lint

Incorreto

O <script> comum inicializa count e user no escopo do módulo. Durante SSR, esses objetos de estado podem ser compartilhados entre instâncias de componentes e requisições.

<script>
// This state is shared across all requests in SSR!
const count = ref(0)
const user = reactive({ name: '' })

export default {
  setup() {
    return { count, user }
  }
}
</script>

Correto

O ref de setup é inicializado por instância de componente; o script comum mantém apenas uma constante, uma função que produz estado e um ref criado dentro de setup(). Nenhuma dessas formas cria estado reativo no escopo do módulo comum.

<script setup>
// Script setup creates fresh state per request
const count = ref(0)
</script>

<script>
// Constants are fine
const API_URL = 'https://api.example.com'

// Functions that create state are fine
function createState() {
  return reactive({ count: 0 })
}

export default {
  setup() {
    // Create state inside setup
    const count = ref(0)
    return { count }
  }
}
</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-unstable-nested-components

Proibir definições de componentes dentro de funções de setup ou renderização

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-unstable-nested-components": "warn"
      }
    },
  },
});

vp run lint

Incorreto

defineComponent é executado dentro do setup() do pai, criando uma nova definição do componente Child sempre que esse setup é executado.

<script lang="ts">
import { defineComponent } from "vue";
export default { setup() { const Child = defineComponent({ render() { return null; } }); return { Child }; } };
</script>

Correto

A definição de Child é movida para o escopo do módulo, e setup() retorna essa definição existente em vez de recriá-la.

<script lang="ts">
import { defineComponent } from "vue";
const Child = defineComponent({ render() { return null; } });
export default { setup() { return { Child }; } };
</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-unused-emit-declarations

Sinalizar eventos declarados que nunca são emitidos

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, 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": {
        "script/no-unused-emit-declarations": "warn"
      }
    },
  },
});

vp run lint

Incorreto

defineEmits declara tanto change quanto unused, mas a função emit capturada só emite o evento literal change.

<script setup lang="ts">
const emit = defineEmits(['change', 'unused'])
emit('change')
// `unused` is never emitted
</script>

Correto

Remover unused faz a lista de eventos declarados corresponder à emissão observada. O exemplo usa uma variável emit capturada que não escapa do escopo, permitindo essa conclusão sobre o uso local.

<script setup lang="ts">
const emit = defineEmits(['change'])
emit('change')
</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-use-computed-property-like-method

Proibir chamar uma propriedade computada da Options API como um método

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-use-computed-property-like-method": "error"
      }
    },
  },
});

vp run lint

Incorreto

this.total() chama o valor exposto pelo getter computado; o getter retorna 3, que não pode ser chamado.

<script lang="ts">
export default { computed: { total() { return 3; } }, methods: { log() { console.log(this.total()); } } };
</script>

Correto

this.total lê o valor computado sem parênteses de chamada, então log imprime o número derivado.

<script lang="ts">
export default { computed: { total() { return 3; } }, methods: { log() { console.log(this.total); } } };
</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-watch-after-await

Proibir watchers registrados após um await em setup() sem guardar a função de parada

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/no-watch-after-await": "error"
      }
    },
  },
});

vp run lint

Incorreto

watch() é criado depois de await loadData() e a função de parada é descartada, então o watcher nunca é parado junto com o componente.

<script lang="ts">
import { watch } from 'vue'
export default {
  async setup(props) {
    await loadData()
    watch(() => props.id, reload)
  },
}
</script>

Correto

O watcher é criado antes do primeiro await, então o Vue o para quando o componente é desmontado.

<script lang="ts">
import { watch } from 'vue'
export default {
  async setup(props) {
    watch(() => props.id, reload)
    await loadData()
  },
}
</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-with-defaults

Desencorajar withDefaults em favor de valores padrão na desestruturação (Vue 3.5+)

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated
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": {
        "script/no-with-defaults": "warn"
      }
    },
  },
});

vp run lint

Incorreto

withDefaults envolve a declaração tipada de props apenas para fornecer valores padrão a count e name, em vez do estilo de valores padrão na desestruturação do Vue 3.5+ preferido aqui.

<script setup lang="ts">
const props = withDefaults(defineProps<{ count?: number; name?: string }>(), { count: 0, name: "Ada" });
</script>

Correto

O padrão de desestruturação coloca count = 0 e name = "Ada" junto às suas variáveis e remove o encapsulamento de withDefaults.

<script setup lang="ts">
const { count = 0, name = "Ada" } = defineProps<{ count?: number; name?: string }>();
</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/prefer-computed

Preferir computed() para estado reativo derivado

Incorreto · Correto

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

O watcher deve apenas derivar o destino. Cópias editáveis e callbacks com outros efeitos colaterais são permitidos.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "script/prefer-computed": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O observador apenas copia uma derivação de count para um segundo ref, doubled, então o estado derivado é mantido por sincronização manual.

<script setup lang="ts">
import { ref, watch } from "vue";
const count = ref(0);
const doubled = ref(0);
watch(count, (value) => { doubled.value = value * 2; });
</script>

Correto

computed(() => count.value * 2) expressa a derivação diretamente e remove tanto o ref gravável adicional quanto seu observador de sincronização.

<script setup lang="ts">
import { ref, computed } from "vue";
const count = ref(0);
const doubled = computed(() => count.value * 2);
</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/prefer-define-options

Preferir defineOptions() a um <script> comum que só define name/inheritAttrs

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, 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": {
        "script/prefer-define-options": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A única instrução significativa do script comum exporta um objeto contendo apenas name e inheritAttrs; essas opções podem ser expressas por defineOptions.

<script lang="ts">
export default { name: 'MyComponent', inheritAttrs: false }
</script>

Correto

O método data() mostrado faz o script conter lógica efetiva da Options API, portanto ele fica fora da sugestão conservadora desta regra para scripts que contêm apenas opções. Este exemplo correto demonstra uma exceção permitida; a migração direta colocaria defineOptions({ name: 'MyComponent', inheritAttrs: false }) em <script setup>.

<script lang="ts">
// Real options logic — keep the plain script.
export default {
  name: 'MyComponent',
  data() { return { count: 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

script/prefer-import-from-vue

Preferir importar de 'vue' em vez de pacotes internos

Incorreto · Correto

Severidade padrão: warning
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/prefer-import-from-vue": "warn"
      }
    },
  },
});

vp run lint

Incorreto

ref e h são importados dos pacotes internos @vue/runtime-core e @vue/runtime-dom em vez do pacote público vue.

<script setup lang="ts">
import { ref } from '@vue/runtime-core'
import { h } from '@vue/runtime-dom'
</script>

Correto

As funções públicas são importadas de vue. A função privada isString mantém @vue/shared, pois vue não a exporta. Imports de namespace, padrão e mistos públicos/privados mantêm um aviso sem correção automática.

<script setup lang="ts">
import { ref, h } from 'vue'
import { isString } from '@vue/shared'
</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/prefer-ref-over-reactive

Recomendar o uso de ref() em vez de reactive() para gerenciar estado

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
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": {
        "script/prefer-ref-over-reactive": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O estado é criado com reactive, contrariando a preferência desta regra de convenção por refs. O exemplo ilustra uma preferência de estilo, não um objeto reativo inerentemente inválido.

<script setup lang="ts">
// reactive requires careful handling to avoid losing reactivity
const state = reactive({
  count: 0,
  name: 'foo'
})
</script>

Correto

Os exemplos criam tanto estado escalar quanto de objeto com ref; campos relacionados também podem ser separados em refs distintos. Isso atende à forma preferida de criação de estado.

<script setup lang="ts">
// ref is more explicit and safer
const count = ref(0)
const name = ref('foo')

// For objects, ref still works
const user = ref({ name: 'foo', age: 20 })

// Or use multiple refs for related data
const userName = ref('foo')
const userAge = ref(20)
</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/prefer-use-attrs

Recomendar o uso de useAttrs() em vez de context.attrs

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
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": {
        "script/prefer-use-attrs": "warn"
      }
    },
  },
});

vp run lint

Incorreto

setup obtém attrs desestruturando seu parâmetro de contexto, forma que esta regra pede para substituir pela função auxiliar da Composition API.

<script lang="ts">
export default { setup(_props, { attrs }) { console.log(attrs.class); } };
</script>

Correto

useAttrs() fornece attrs dentro de setup, mantendo a leitura de attrs.class sem depender do segundo parâmetro de setup.

<script lang="ts">
import { useAttrs } from "vue";
export default { setup() { const attrs = useAttrs(); console.log(attrs.class); } };
</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/prefer-use-id

Recomendar o uso de useId() para gerar IDs únicos (Vue 3.5+)

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
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": {
        "script/prefer-use-id": "warn"
      }
    },
  },
});

vp run lint

Incorreto

id contém Math.random(), então o identificador gerado para input/label pode diferir entre a renderização no servidor e no cliente. A variável com nome de ID é o contexto de geração reconhecido pela regra.

<script setup lang="ts">
const id = `input-${Math.random()}`;
</script>
<template><label :for="id">Name</label><input :id="id" /></template>

Correto

useId() do Vue 3.5+ gera o identificador, e tanto :for quanto :id continuam lendo a mesma variável em vez de gerar valores aleatórios de forma independente.

<script setup lang="ts">
import { useId } from "vue";
const id = useId();
</script>
<template><label :for="id">Name</label><input :id="id" /></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/prefer-use-slots

Recomendar o uso de useSlots() em vez de context.slots

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
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": {
        "script/prefer-use-slots": "warn"
      }
    },
  },
});

vp run lint

Incorreto

setup desestrutura slots de seu argumento de contexto, a forma de acesso que esta regra prefere substituir.

<script lang="ts">
import { defineComponent, h } from "vue";
export default defineComponent({
  setup(_props, { slots }) { return () => h("div", slots.default?.()); },
});
</script>

Correto

useSlots() obtém os slots dentro de setup, preservando a função de renderização e sua chamada opcional ao slot padrão sem um parâmetro de contexto.

<script lang="ts">
import { defineComponent, h, useSlots } from "vue";
export default defineComponent({
  setup() {
    const slots = useSlots();
    return () => h("div", slots.default?.());
  },
});
</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/prefer-use-template-ref

Recomendar useTemplateRef em vez de ref para referências de template (Vue 3.5+)

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, 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": {
        "script/prefer-use-template-ref": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O ref input, que aceita null, está associado ao literal ref="input" do template, identificando-o como uma referência de elemento em vez de um dado comum que aceita null.

<script setup lang="ts">
import { ref } from 'vue'
const input = ref<HTMLInputElement | null>(null)
</script>
<template>
  <input ref="input" />
</template>

Correto

useTemplateRef<HTMLInputElement>('input') do Vue 3.5+ torna essa referência de template explícita. O error = ref(null) sem associação permanece um dado comum e fica intencionalmente fora desta regra.

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'
// Paired with the template ref below.
const input = useTemplateRef<HTMLInputElement>('input')
// A nullable data ref the template never binds as a ref.
const error = ref(null)
</script>
<template>
  <input ref="input" />
  <p>{{ error }}</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

script/require-default-prop

Exigir um valor padrão para toda prop opcional que não seja Boolean

Incorreto · Correto

Severidade padrão: error
Predefinições: opinionated, 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": {
        "script/require-default-prop": "error"
      }
    },
  },
});

vp run lint

Incorreto

name e age são props opcionais de tempo de execução que não são Boolean e não têm valores padrão, deixando indefinidos seus valores quando a entrada é omitida.

<script lang="ts">
export default {
  props: {
    // optional, non-Boolean, no default
    name: String,
    age: { type: Number },
  }
}
</script>

Correto

name recebe default: ''. enabled usa o valor padrão false implícito de Boolean, e o id obrigatório não precisa de um valor alternativo, ilustrando ambas as exceções.

<script lang="ts">
export default {
  props: {
    name: { type: String, default: '' },
    enabled: Boolean,                 // Boolean defaults to false
    id: { type: Number, required: true },
  }
}
</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/require-explicit-emits

Exigir que os eventos emitidos sejam declarados em defineEmits ou na opção emits

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, ecosystem, nuxt, opinionated
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": {
        "script/require-explicit-emits": "warn"
      }
    },
  },
});

vp run lint

Incorreto

A função de emissão capturada emite save, mas defineEmits([]) não declara esse evento.

<script setup lang="ts">
const emit = defineEmits([]);
emit("save");
</script>

Correto

Adicionar "save" à declaração torna o evento literal emitido parte do contrato explícito de eventos do componente.

<script setup lang="ts">
const emit = defineEmits(["save"]);
emit("save");
</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/require-explicit-slots

Exigir que os slots consumidos por useSlots() sejam tipados explicitamente com defineSlots<...>()

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, 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": {
        "script/require-explicit-slots": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O defineProps<{ id: number }>() tipado estabelece a sintaxe TypeScript, mas setup usa useSlots() sem uma declaração de defineSlots. Assim, a regra encontra slots consumidos sem um contrato explícito de slots.

<script setup lang="ts">
const props = defineProps<{ id: number }>()
const slots = useSlots()
</script>

Correto

defineSlots declara um slot default cujas props incluem msg: string; useSlots() agora aparece junto de um contrato de slots explicitamente tipado.

<script setup lang="ts">
defineSlots<{ default(props: { msg: string }): unknown }>()
const slots = useSlots()
</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/require-function-return-type

Exigir anotações de tipo de retorno nas funções

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
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": {
        "script/require-function-return-type": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Tanto add quanto greet anotam seus parâmetros, mas omitem uma anotação de tipo de retorno; retornos inferidos não atendem a esta política de anotação explícita.

<script setup lang="ts">
const add = (a: number, b: number) => {
  return a + b
}

function greet(name: string) {
  return `Hello, ${name}`
}
</script>

Correto

add declara : number, e greet declara : string, tornando os contratos de retorno explícitos sem alterar nenhum dos corpos.

<script setup lang="ts">
const add = (a: number, b: number): number => {
  return a + b
}

function greet(name: string): string {
  return `Hello, ${name}`
}
</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/require-prop-type-constructor

Exigir que os valores de type de props sejam construtores em vez de literais de string

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/require-prop-type-constructor": "error"
      }
    },
  },
});

vp run lint

Incorreto

As declarações de props usam as strings "String" e "Number" como tipos de tempo de execução, inclusive dentro do array de construtores. Essas strings não são funções construtoras.

<script lang="ts">
export default {
  props: {
    // The type should be the `String` constructor, not the string "String".
    name: "String",
    age: { type: "Number" },
    id: { type: ["String", "Number"] }
  }
}
</script>

Correto

As declarações usam os identificadores reais String e Number, inclusive no array de união [String, Number].

<script lang="ts">
export default {
  props: {
    name: String,
    age: { type: Number },
    id: { type: [String, Number] }
  }
}
</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/require-prop-types

Exigir que toda prop declare um tipo

Incorreto · Correto

Severidade padrão: error
Predefinições: opinionated
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": {
        "script/require-prop-types": "error"
      }
    },
  },
});

vp run lint

Incorreto

A entrada do array declara apenas o nome status; o valor null e o descritor vazio também não declaram um tipo de prop em tempo de execução.

<script lang="ts">
export default {
  props: ['status']            // array form: no types
}

export default {
  props: {
    status: null,              // no type
    other: {}                  // empty descriptor: no type
  }
}
</script>

Correto

status: String fornece um construtor na forma abreviada, e other fornece type: Number dentro de seu descritor. Ambas as props agora têm declarações de tipo.

<script lang="ts">
export default {
  props: {
    status: String,
    other: { type: Number, default: 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

script/require-symbol-provide

Recomendar o uso de Symbol como chave de injeção para provide/inject

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
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": {
        "script/require-symbol-provide": "warn"
      }
    },
  },
});

vp run lint

Incorreto

provide e inject usam chaves de string literal como 'user' e 'theme', que podem colidir com outro provedor que use a mesma grafia.

<script setup lang="ts">
// String keys can collide
provide('user', user)
const user = inject('user')

// Magic strings are error-prone
provide('theme', { dark: true })
</script>

Correto

O UserKey compartilhado é criado com Symbol e anotado como InjectionKey<User>; ambas as chamadas passam essa chave em vez de uma string literal.

<script lang="ts">
// Define injection key with Symbol
export const UserKey: InjectionKey<User> = Symbol('user')

// Provide with Symbol
provide(UserKey, user)

// Inject with Symbol
const user = inject(UserKey)
</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/require-typed-object-prop

Exigir um tipo explícito em uma prop cujo tipo de tempo de execução seja Object ou Array

Incorreto · Correto

Severidade padrão: warning
Predefinições: opinionated, 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": {
        "script/require-typed-object-prop": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Os construtores simples Object e Array descrevem apenas categorias amplas de tempo de execução, então nem user nem a estrutura dos elementos de items têm um tipo estático explícito.

<script setup lang="ts">
const props = defineProps({ user: Object, items: { type: Array } });
</script>

Correto

PropType<User> e PropType<User[]> adicionam os tipos de objeto e de elemento enquanto mantêm os mesmos construtores de tempo de execução.

<script setup lang="ts">
import type { PropType } from "vue";
interface User { name: string }
const props = defineProps({
  user: Object as PropType<User>,
  items: { type: Array as PropType<User[]> },
});
</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/require-typed-ref

Exigir um argumento de tipo explícito em um ref() inicializado sem valor, com null ou com undefined

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
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": {
        "script/require-typed-ref": "warn"
      }
    },
  },
});

vp run lint

Incorreto

As chamadas do ref importado não têm um argumento de tipo nem um valor inicial útil: a ausência de argumento, null e undefined não permitem inferir o tipo pretendido para o valor futuro.

<script setup lang="ts">
import { ref } from 'vue'

const a = ref()           // Ref<undefined>
const b = ref(null)       // Ref<null>
const c = ref(undefined)  // Ref<undefined>
</script>

Correto

Os argumentos de tipo explícitos descrevem os refs de string e de User que aceita null. ref(0) já tem um inicializador numérico concreto e pode depender da inferência.

<script setup lang="ts">
import { ref } from 'vue'

const a = ref<string>()
const b = ref<User | null>(null)
const c = ref(0)          // inferred Ref<number>
</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/require-valid-default-prop

Exigir que o valor padrão de uma prop seja válido para seu tipo declarado

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/require-valid-default-prop": "error"
      }
    },
  },
});

vp run lint

Incorreto

As props Number e Boolean recebem valores padrão escalares incompatíveis, e as props Array e Object usam valores literais compartilhados em vez de funções de criação.

<script lang="ts">
export default {
  props: {
    count: { type: Number, default: '0' },     // string default for Number
    enabled: { type: Boolean, default: 1 },     // non-boolean default for Boolean
    items: { type: Array, default: [] },        // literal must be a factory
    config: { type: Object, default: {} }       // literal must be a factory
  }
}
</script>

Correto

Os valores padrão escalares passam a ser 0 e false; os valores padrão de array e objeto passam a ser funções que retornam novos valores. O exemplo [String, Number] aceita seu valor padrão de string porque ele corresponde a um dos tipos declarados.

<script lang="ts">
export default {
  props: {
    count: { type: Number, default: 0 },
    enabled: { type: Boolean, default: false },
    items: { type: Array, default: () => [] },
    config: { type: Object, default: () => ({}) },
    label: { type: [String, Number], default: '' }
  }
}
</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/return-in-computed-property

Exigir um valor de retorno em todo getter computado

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/return-in-computed-property": "error"
      }
    },
  },
});

vp run lint

Incorreto

O getter computado com corpo de bloco avalia 1 + 2, mas nunca retorna o resultado, deixando o valor computado undefined.

<script setup lang="ts">
import { computed } from "vue";
const total = computed(() => { 1 + 2; });
</script>

Correto

return 1 + 2 transforma a expressão no valor retornado pelo getter. A regra procura um return que retorne um valor no próprio getter, não apenas uma instrução de expressão.

<script setup lang="ts">
import { computed } from "vue";
const total = computed(() => { return 1 + 2; });
</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/return-in-emits-validator

Exigir um valor de retorno em todo validador de emits da Options API

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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.

Use uma função de seta com corpo em bloco para o filtro de SFC atualmente suportado. O validador subjacente também trata a sintaxe abreviada de métodos, mas o pré-filtro atual de SFC não encaminha essa forma de modo confiável.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "script/return-in-emits-validator": "error"
      }
    },
  },
});

vp run lint

Incorreto

O validador submit registra a carga útil, mas não retorna um resultado de validação, então seu corpo de bloco produz undefined.

<script lang="ts">
export default { emits: { submit: (payload: unknown) => { console.log(payload); } } };
</script>

Correto

return payload != null fornece um resultado booleano de validação para a carga útil enviada em vez de encerrar sem um valor retornado.

<script lang="ts">
export default { emits: { submit: (payload: unknown) => { return payload != null; } } };
</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/valid-define-emits

Exigir uso válido de defineEmits() (sem argumentos de tipo e de tempo de execução juntos, sem referências locais, uma única chamada)

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/valid-define-emits": "error"
      }
    },
  },
});

vp run lint

Incorreto

A mesma chamada de defineEmits fornece tanto um argumento de tipo quanto o array de tempo de execução ["save"], misturando duas declarações mutuamente exclusivas.

<script setup lang="ts">
defineEmits<{ save: [] }>(["save"]);
</script>

Correto

Remover o argumento de tempo de execução deixa uma única declaração de evento baseada em tipos para save.

<script setup lang="ts">
defineEmits<{ save: [] }>();
</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/valid-define-options

Exigir uso válido de defineOptions() (um único argumento de objeto, sem props/emits/expose/slots)

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/valid-define-options": "error"
      }
    },
  },
});

vp run lint

Incorreto

A primeira chamada coloca a declaração específica de props dentro de defineOptions; as chamadas posteriores também repetem a macro e incluem um argumento que não é objeto. Elas ilustram as restrições de formato proibido e de chamadas repetidas.

<script setup lang="ts">
defineOptions({ props: ['foo'] })   // use defineProps instead
defineOptions({ name: 'Foo' })
defineOptions({ name: 'Bar' })      // duplicate call
defineOptions('Foo')                // not an object literal
</script>

Correto

Uma única chamada de defineOptions recebe um objeto contendo apenas as opções comuns suportadas name e inheritAttrs.

<script setup lang="ts">
defineOptions({ name: 'Foo', inheritAttrs: false })
</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/valid-define-props

Exigir uso válido de defineProps() (uma única chamada, sem argumentos de tipo e de tempo de execução juntos, sem referências locais)

Incorreto · Correto

Severidade padrão: error
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/valid-define-props": "error"
      }
    },
  },
});

vp run lint

Incorreto

A mesma chamada de defineProps fornece tanto { title: string } como argumento de tipo quanto { title: String } como argumento de tempo de execução, combinação que o compilador não permite.

<script setup lang="ts">
defineProps<{ title: string }>({ title: String });
</script>

Correto

Remover o objeto de tempo de execução deixa uma única declaração baseada em tipos para title em vez de combinar ambas as formas de declaração.

<script setup lang="ts">
defineProps<{ title: string }>();
</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/valid-next-tick

Exigir que o resultado de uma chamada de nextTick() seja aguardado, encadeado ou receba uma função de retorno

Incorreto · Correto

Severidade padrão: warning
Predefinições: essential, happy-path, ecosystem, nuxt, opinionated
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": {
        "script/valid-next-tick": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O nextTick() importado é uma expressão isolada sem função de retorno, então a Promise retornada é ignorada e nenhum trabalho aguarda a atualização do DOM.

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

Correto

await nextTick() consome a Promise e aguarda explicitamente a próxima atualização do DOM antes que o código subsequente de setup continue.

<script setup lang="ts">
import { nextTick } from "vue";
await nextTick();
</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

type/no-floating-promises

Proibir Promises soltas (não tratadas)

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Informações de tipos em scripts e templates de SFCs Vue, para as construções mostradas abaixo
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

As verificações com informações de tipos usam o runtime nativo do Corsa e o projeto TypeScript. typeAware sozinho não ativa uma regra opcional.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "type/no-floating-promises": "warn"
      },
      "typeAware": true
    },
  },
});

vp run lint

Incorreto

A função assíncrona save retorna uma Promise, mas a chamada isolada de save() não a aguarda nem a retorna, e não sinaliza explicitamente um descarte intencional.

<script setup lang="ts">
async function save(): Promise<void> {}
save();
</script>

Correto

void save() sinaliza explicitamente a intenção de executar sem aguardar, aceita por esta regra. É um marcador explícito de descarte, não um manipulador de rejeição.

<script setup lang="ts">
async function save(): Promise<void> {}
void save();
</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

type/no-reactivity-loss

Proibir cópias estáticas simples de valores reativos em atribuições e chamadas

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Informações de tipos em scripts e templates de SFCs Vue, para as construções mostradas abaixo
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

As verificações com informações de tipos usam o runtime nativo do Corsa e o projeto TypeScript. typeAware sozinho não ativa uma regra opcional.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "type/no-reactivity-loss": "warn"
      },
      "typeAware": true
    },
  },
});

vp run lint

Incorreto

const count = state.count obtém uma cópia numérica simples da propriedade reativa, então atualizações posteriores de state.count não se refletem nessa variável.

<script setup lang="ts">
import { reactive } from "vue";
const state = reactive({ count: 0 });
const count = state.count;
</script>

Correto

toRef(state, "count") mantém count vinculado à propriedade reativa original em vez de copiar seu valor primitivo atual.

<script setup lang="ts">
import { reactive, toRef } from "vue";
const state = reactive({ count: 0 });
const count = toRef(state, "count");
</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

type/no-unsafe-template-binding

Proibir vinculações de template que resultam em tipos inseguros

Incorreto · Correto

Severidade padrão: warning
Predefinições: nuxt, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Informações de tipos em scripts e templates de SFCs Vue, para as construções mostradas abaixo
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

As verificações com informações de tipos usam o runtime nativo do Corsa e o projeto TypeScript. typeAware sozinho não ativa uma regra opcional.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "type/no-unsafe-template-binding": "warn"
      },
      "typeAware": true
    },
  },
});

vp run lint

Incorreto

O value interpolado é explicitamente tipado como any, então o verificador não consegue atribuir um tipo concreto seguro à vinculação do template.

<script setup lang="ts">
const value: any = "Hello";
</script>
<template><p>{{ value }}</p></template>

Correto

Alterar a anotação para string fornece à mesma interpolação um tipo concreto que pode ser verificado, sem alterar o valor renderizado.

<script setup lang="ts">
const value: string = "Hello";
</script>
<template><p>{{ value }}</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

type/require-typed-emits

Exigir uma definição de tipo para defineEmits

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: Informações de tipos em scripts e templates de SFCs Vue, para as construções mostradas abaixo
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

As verificações com informações de tipos usam o runtime nativo do Corsa e o projeto TypeScript. typeAware sozinho não ativa uma regra opcional.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "type/require-typed-emits": "warn"
      },
      "typeAware": true
    },
  },
});

vp run lint

Incorreto

O defineEmits(["save"]) que usa apenas um array declara o nome do evento sem um contrato tipado de carga útil.

<script setup lang="ts">
defineEmits(["save"]);
</script>

Correto

defineEmits<{ save: [] }>() declara o evento tipado save com uma tupla vazia de carga útil, indicando explicitamente que ele não recebe argumentos de carga útil.

<script setup lang="ts">
defineEmits<{ save: [] }>();
</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

type/require-typed-props

Exigir uma definição de tipo para defineProps

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: Informações de tipos em scripts e templates de SFCs Vue, para as construções mostradas abaixo
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

As verificações com informações de tipos usam o runtime nativo do Corsa e o projeto TypeScript. typeAware sozinho não ativa uma regra opcional.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "type/require-typed-props": "warn"
      },
      "typeAware": true
    },
  },
});

vp run lint

Incorreto

O defineProps(["title"]) que usa apenas um array declara title pelo nome sem lhe atribuir um tipo.

<script setup lang="ts">
defineProps(["title"]);
</script>

Correto

defineProps<{ title: string }>() atribui a title um tipo string explícito em vez de uma declaração de tempo de execução que contém apenas o nome.

<script setup lang="ts">
defineProps<{ title: string }>();
</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

type/strict-boolean-expressions

Exigir expressões booleanas seguras nas condições de script e template

Incorreto · Correto

Severidade padrão: warning
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Informações de tipos em scripts e templates de SFCs Vue, para as construções mostradas abaixo
Opções: Consulte as opções tipadas e os valores padrão.

Ative typeAware e esta regra explicitamente. Por padrão, números que podem ser nulos são proibidos, enquanto números não nulos são permitidos.

As verificações com informações de tipos usam o runtime nativo do Corsa e o projeto TypeScript. typeAware sozinho não ativa uma regra opcional.

Configuração (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "type/strict-boolean-expressions": "warn"
      },
      "typeAware": true
    },
  },
});

vp run lint

Incorreto

if (count) depende da conversão implícita para booleano de uma variável numérica que pode estar ausente em vez de um teste booleano explícito; também confunde zero com ausência.

<script setup lang="ts">
const count: number | undefined = undefined;
if (count) console.log(count);
</script>

Correto

count !== undefined && count > 0 testa separadamente a presença e a positividade, produzindo uma condição booleana explícita após restringir o tipo do valor opcional.

<script setup lang="ts">
const count: number | undefined = undefined;
if (count !== undefined && count > 0) console.log(count);
</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