Règles Vapor

Chaque règle présente sur cette page son objectif, sa configuration et ses exemples complets Mauvais et Bon, accompagnés de leurs explications. Les lignes surlignées montrent les modifications ; le code copié conserve la source complète. Les limites de prise en charge actuelles sont précisées avant les exemples concernés.

Toutes les règles · Options des règles · Correspondance de migration ESLint · Vérifications du projet · Attributs entre composants

script/no-get-current-instance

Interdire getCurrentInstance() en mode Vapor (renvoie null)

Mauvais · Bon

Gravité par défaut: error
Préréglages: opinionated
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Contrôles de script destinés à Vapor ; une activation explicite applique aussi la restriction aux scripts ordinaires
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (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

Mauvais

Le setup marqué Vapor importe et appelle getCurrentInstance, s’appuyant sur une API d’instance que cette règle interdit pour les composants destinés à Vapor.

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

Bon

inject("app-config") obtient la configuration explicitement fournie sans importer ni appeler getCurrentInstance.

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

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

script/no-next-tick

Interdire l’utilisation de nextTick() dans les composants destinés à Vapor

Mauvais · Bon

Gravité par défaut: error
Préréglages: none
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Contrôles de script destinés à Vapor ; une activation explicite applique aussi la restriction aux scripts ordinaires
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (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

Mauvais

Le composant destiné à Vapor importe nextTick et attend son résultat, introduisant la dépendance à la planification des mises à jour du DOM que cette règle de migration rejette.

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

Bon

L’input est obtenu par useTemplateRef et reçoit le focus dans onMounted. Ce point de montage explicite remplace la dépendance de l’exemple à nextTick.

<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>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

script/no-options-api

Interdire les formes de l’Options API en mode Vapor

Mauvais · Bon

Gravité par défaut: error
Préréglages: opinionated
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Contrôles de script destinés à Vapor ; une activation explicite applique aussi la restriction aux scripts ordinaires
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (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

Mauvais

L’objet exporté par défaut déclare data() de l’Options API, une forme d’option de composant interdite par cette règle.

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

Bon

L’état du composant devient une ref de la Composition API dans le <script setup> Vapor, supprimant l’objet de l’Options API et son option data.

<script setup lang="ts" vapor>
const count = ref(0);
</script>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

vapor/no-inline-template

Interdire l’attribut obsolète inline-template

Mauvais · Bon

Gravité par défaut: error
Préréglages: nuxt, opinionated
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vapor/no-inline-template": "error"
      }
    },
  },
});

vp run lint

Mauvais

LegacyCard utilise l’attribut inline-template pour le balisage de son enfant.

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

Bon

Le balisage est transmis par le slot par défaut au lieu d’un template en ligne.

<template>
  <LegacyCard>
    <template #default>
      <p>Profile</p>
    </template>
  </LegacyCard>
</template>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

vapor/no-vue-lifecycle-events

Interdire les événements de cycle de vie @vue:xxx par élément (non pris en charge dans Vapor)

Mauvais · Bon

Gravité par défaut: error
Préréglages: happy-path, nuxt, ecosystem, opinionated
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "vapor/no-vue-lifecycle-events": "error"
      }
    },
  },
});

vp run lint

Mauvais

Le champ de saisie utilise l’événement de cycle de vie de template @vue:mounted.

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

Bon

onMounted accède à la référence de template nommée et donne le focus au champ de saisie au moyen du hook de cycle de vie de script pris en charge.

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

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

<template>
  <input ref="input" />
</template>

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

vapor/prefer-static-class

Préférer une classe statique à une liaison de classe dynamique pour les chaînes littérales

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
Correction automatique: Disponible pour les diagnostics pris en charge
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (Vite+)

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

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

vp run lint

Mauvais

La liaison de classe évalue une chaîne constante alors que la classe ne change pas.

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

Bon

Un attribut class statique exprime les mêmes classes du panneau sans liaison.

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

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

vapor/require-vapor-attribute

Suggérer l’ajout de l’attribut vapor à script setup

Mauvais · Bon

Gravité par défaut: warning
Préréglages: nuxt, opinionated
Correction automatique: Non implémentée pour le lint des SFC
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Prise en charge actuelle: no-sfc-finding

Cette règle est un emplacement réservé doté d’un callback vide. Ajouter vapor sélectionne la compilation Vapor ; le linter actuel ne signale pas cet identifiant du catalogue lorsque vapor est absent.

ID configuré (aucun diagnostic SFC actuellement)

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

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

vp run lint

Mauvais

Le bloc script setup ne possède pas l’attribut de compilation Vapor. Il s’agit d’une convention prévue : la fonction de rappel actuellement vide de la règle ne le signale pas.

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

Bon

L’ajout de vapor sélectionne la compilation Vapor. Il illustre la correction prévue et ne signifie pas que le linter actuel émet cette règle du catalogue.

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

Le bon exemple illustre la convention visée ; le traitement actuel des SFC n’émet le diagnostic propre à cette règle pour aucun des deux exemples.

Implémentation · Toutes les règles