Regras de petite-vue

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

Regra	Exemplos	Finalidade
`petite-vue/no-unsupported-directive`	Incorreto · Correto	Proibir diretivas que o petite-vue não aceita
`petite-vue/valid-v-effect`	Incorreto · Correto	Exigir uma expressão não vazia em v-effect
`petite-vue/valid-v-scope`	Incorreto · Correto	Exigir que v-scope vincule um objeto literal

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

`petite-vue/no-unsupported-directive`

Proibir diretivas que o petite-vue não aceita

Incorreto · Correto

Severidade padrão: error
Predefinições: none
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Documentos HTML detectados como petite-vue; SFCs Vue comuns ficam fora do escopo desta regra.
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "petite-vue/no-unsupported-directive": "error"
      }
    },
  },
});

vp run lint

Incorreto

v-memo, v-slot:header e a diretiva personalizada v-my-directive não constam na lista de diretivas aceitas pelo petite-vue. O script do petite-vue identifica este HTML como o dialeto pertinente.

<!doctype html>
<html><body>
<div v-memo="[a, b]"></div>
<template v-slot:header></template>
<div v-my-directive></div>
<script src="https://unpkg.com/petite-vue" init></script>
</body></html>

Correto

A substituição usa a sintaxe aceita de v-scope, v-effect, v-if, v-bind e v-on, em vez de depender de diretivas não aceitas.

<!doctype html>
<html><body>
<div v-scope="{ count: 0 }" v-effect="console.log(count)"></div>
<div v-if="ok" v-bind:title="title" @click="count++"></div>
<script src="https://unpkg.com/petite-vue" init></script>
</body></html>

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

`petite-vue/valid-v-effect`

Exigir uma expressão não vazia em v-effect

Incorreto · Correto

Configuração (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "petite-vue/valid-v-effect": "error"
      }
    },
  },
});

vp run lint

Incorreto

Cada v-effect não tem uma expressão executável: seu valor está ausente, vazio ou contém apenas espaços em branco.

<!doctype html>
<html><body>
<div v-effect></div>
<div v-effect=""></div>
<div v-effect="   "></div>
<script src="https://unpkg.com/petite-vue" init></script>
</body></html>

Correto

Ambos os valores de v-effect contêm uma expressão: um atualiza el.textContent e o outro incrementa count. Esta regra verifica se há uma expressão não vazia, e não a lógica de negócio do efeito.

<!doctype html>
<html><body>
<div v-effect="el.textContent = count"></div>
<div v-effect="count++"></div>
<script src="https://unpkg.com/petite-vue" init></script>
</body></html>

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

`petite-vue/valid-v-scope`

Exigir que v-scope vincule um objeto literal

Incorreto · Correto

Configuração (Vite+)

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

export default defineConfig({
  lint: {
    vize: {
      "preset": "incremental",
      "rules": {
        "petite-vue/valid-v-scope": "error"
      }
    },
  },
});

vp run lint

Incorreto

Os quatro valores não vazios de v-scope são um identificador, uma chamada, uma operação aritmética e um número; nenhum é analisado como um objeto literal.

<!doctype html>
<html><body>
<div v-scope="count"></div>
<div v-scope="foo()"></div>
<div v-scope="a + b"></div>
<div v-scope="123"></div>
<script src="https://unpkg.com/petite-vue" init></script>
</body></html>

Correto

Um v-scope sem valor usa o escopo raiz. Os outros valores são objetos literais, incluindo o objeto entre parênteses, que a regra aceita.

<!doctype html>
<html><body>
<div v-scope></div>
<div v-scope="{}"></div>
<div v-scope="{ count: 0 }"></div>
<div v-scope="({ count: 0 })"></div>
<script src="https://unpkg.com/petite-vue" init></script>
</body></html>

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