Vapor ルール

このページに、各ルールの目的・前提・設定と、省略のない悪い例・良い例をまとめています。変更箇所は行の色で示します。コードをコピーすると、ソースコード全体を取得できます。各例に現在の対応範囲も明記しています。

全ルール · ルールのオプション · ESLint 移行対応表 · プロジェクトの検査 · 子への属性の継承

script/no-get-current-instance

Vapor で null を返す getCurrentInstance() を検出します。

悪い例 · 良い例

既定の重大度: error
プリセット: opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vapor を想定した script 検査。明示的に有効にすると通常の script でも同じ禁止を適用します。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（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

悪い

Vapor を指定した setup が getCurrentInstance をインポートして呼び出し、Vapor 向けコンポーネントでこのルールが禁止するインスタンス API に依存しています。

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

良い

inject("app-config") で明示的に提供された設定を受け取り、getCurrentInstance のインポートも呼び出しも使いません。

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

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

script/no-next-tick

Vapor 向けコンポーネントの nextTick() 使用を検出します。

悪い例 · 良い例

既定の重大度: error
プリセット: none
自動修正: なし。修正内容を確認してください
適用範囲: Vapor を想定した script 検査。明示的に有効にすると通常の script でも同じ禁止を適用します。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（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

悪い

Vapor 向けコンポーネントが nextTick をインポートして await し、この移行ルールが拒否する DOM 更新待ちの依存を作っています。

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

良い

useTemplateRef で input を取得し、onMounted でフォーカスします。例の 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>

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

script/no-options-api

Vapor で Options API を使用する箇所を検出します。

悪い例 · 良い例

既定の重大度: error
プリセット: opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vapor を想定した script 検査。明示的に有効にすると通常の script でも同じ禁止を適用します。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（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

悪い

default export のオブジェクトに Options API の data() を宣言しており、このルールが禁止するコンポーネントオプションの形式です。

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

良い

状態を Vapor の <script setup> 内の Composition API ref に移し、Options API のオブジェクトと data オプションを取り除きます。

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

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

vapor/no-inline-template

Vapor で削除済みの inline-template 属性を検出します。

悪い例 · 良い例

既定の重大度: error
プリセット: nuxt, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（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

悪い

LegacyCard の内部のマークアップに inline-template を使っています。

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

良い

同じマークアップを default slot として渡します。

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

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

vapor/no-vue-lifecycle-events

Vapor では未対応の、要素ごとに指定する @vue:* ライフサイクルイベントを検出します。

悪い例 · 良い例

既定の重大度: error
プリセット: happy-path, nuxt, ecosystem, opinionated
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（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

悪い

input にテンプレートの @vue:mounted を指定しています。

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

良い

script の onMounted からテンプレートの ref を参照し、input にフォーカスします。

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

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

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

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

vapor/prefer-static-class

文字列リテラルの :class を静的 class に置き換えます。

悪い例 · 良い例

既定の重大度: warning
プリセット: nuxt, opinionated
自動修正: 対応している診断で利用できます
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（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

悪い

変化しないクラスの文字列をバインディングで評価しています。

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

良い

同じ panel のクラスを静的な class 属性に指定します。

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

良い例は上記の設定でこのルールの診断が出ない例です。他のルールの診断は出る場合があります。

実装 · 全ルール

vapor/require-vapor-attribute

Vapor 向けの script setup に vapor 属性を付ける規約を示します。

悪い例 · 良い例

既定の重大度: warning
プリセット: nuxt, opinionated
自動修正: SFC lint では未対応
適用範囲: Vue SFC のテンプレートと各ブロック。ルールに必要な script の文脈も例に含めています。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

現在の対応: no-sfc-finding

このルールは、検査用のコールバックが空の仮実装です。vapor 属性は Vapor でのコンパイルを選択するものですが、現在の linter は属性がないことをこの ID では検出しません。

設定できる ID（現在の SFC lint では診断されません）

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

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

vp run lint

悪い

script setup に Vapor の指定がありません。これは規約を示す例で、現在の空のコールバックは診断を生成しません。

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

良い

vapor を追加して Vapor のコンパイルを選択します。修正方針を示す例であり、現在のリンターがこのルールの違反を検出するという意味ではありません。

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

良い例は意図する規約を示します。現在の SFC lint では、悪い例・良い例のどちらからもこのルール固有の診断は出ません。

実装 · 全ルール