エコシステムのルール

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

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

ecosystem/nuxt-prefer-nuxt-link

Nuxt の内部リンクに NuxtLink を使います。

悪い例 · 良い例

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

設定（Vite+）

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

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

vp run lint

悪い

Nuxt の内部ページへの移動に通常の a を使っています。

<template>
  <a href="/settings">Settings</a>
</template>

良い

同じ移動先を NuxtLink に指定し、Nuxt のルーターを使います。

<template>
  <NuxtLink to="/settings">Settings</NuxtLink>
</template>

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

実装 · 全ルール

ecosystem/pinia-prefer-store-to-refs

Pinia store の分割代入に storeToRefs() を使います。

悪い例 · 良い例

既定の重大度: warning
プリセット: ecosystem
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC の JavaScript / TypeScript の script ブロック。対象となる Options API または script setup の形式は例を参照してください。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ecosystem/pinia-prefer-store-to-refs": "warn"
      }
    },
  },
});

vp run lint

悪い

store から name を直接分割代入しているため、取り出した値は store の変更に追従しません。

<script setup lang="ts">
const { name } = useUserStore();
</script>

良い

store を変数に保持し、storeToRefs で name を store の状態に追従する ref として取り出します。

<script setup lang="ts">
const store = useUserStore();
const { name } = storeToRefs(store);
</script>

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

実装 · 全ルール

ecosystem/router-link-require-to

RouterLink / NuxtLink に to を指定します。

悪い例 · 良い例

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

SFC の単一ルート要素がリンクである場合、親から属性を継承できるため対象外になることがあります。この例は別の要素の内側にあるリンクで、明示的な遷移先が必要です。

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ecosystem/router-link-require-to": "error"
      }
    },
  },
});

vp run lint

悪い

nav の子要素である RouterLink に to がなく、SFC のルート要素を通じた属性の継承も利用できません。

<template>
<nav><RouterLink>Settings</RouterLink></nav>
</template>

良い

nav の内側にあるリンクに to="/settings" で移動先を明示します。

<template>
<nav><RouterLink to="/settings">Settings</RouterLink></nav>
</template>

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

実装 · 全ルール

ecosystem/void-link-require-href

Void Vue の Link に href を指定します。

悪い例 · 良い例

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

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ecosystem/void-link-require-href": "error"
      }
    },
  },
});

vp run lint

悪い

@void/vue から import した Link に href がありません。

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link>Settings</Link>
</template>

良い

同じ Link の href に設定画面の移動先を指定します。

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link href="/settings">Settings</Link>
</template>

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

実装 · 全ルール

ecosystem/void-link-valid-method

Void Vue の Link に有効な静的 method を指定します。

悪い例 · 良い例

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

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ecosystem/void-link-valid-method": "warn"
      }
    },
  },
});

vp run lint

悪い

DELETE の操作に、ページ移動のリクエスト向けの prefetch を指定しています。

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link href="/posts/1" method="DELETE" prefetch>Delete</Link>
</template>

良い

prefetch を取り除き、DELETE のリクエストを事前取得しない形にします。

<script setup>
import { Link } from "@void/vue";
</script>

<template>
  <Link href="/posts/1" method="DELETE">Delete</Link>
</template>

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

実装 · 全ルール

ecosystem/vue-i18n-no-missing-key

SFC 内の翻訳データに存在しない静的キーを検出します。

悪い例 · 良い例

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

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ecosystem/vue-i18n-no-missing-key": "warn"
      }
    },
  },
});

vp run lint

悪い

テンプレートは auth.missing を参照しますが、ローカルの英語メッセージには auth.login しかありません。

<template>{{ $t("auth.missing") }}</template>

<i18n lang="json">
{ "en": { "auth": { "login": "Log in" } } }
</i18n>

良い

ローカルのメッセージにある auth.login を参照します。

<template>{{ $t("auth.login") }}</template>

<i18n lang="json">
{ "en": { "auth": { "login": "Log in" } } }
</i18n>

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

実装 · 全ルール

ecosystem/vue-router-prefer-named-link

RouterLink の文字列パスを名前付きルートの指定に置き換えます。

悪い例 · 良い例

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

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ecosystem/vue-router-prefer-named-link": "warn"
      }
    },
  },
});

vp run lint

悪い

RouterLink の移動先をルート名ではなく、文字列のパスで指定しています。

<template>
  <RouterLink to="/settings">Settings</RouterLink>
</template>

良い

to にバインドするルートオブジェクトの name を settings にし、ルート名で移動先を指定します。

<template>
  <RouterLink :to="{ name: 'settings' }">Settings</RouterLink>
</template>

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

実装 · 全ルール

ecosystem/vue-router-prefer-named-push

Vue Router のプログラムによる移動に名前付きルートを使います。

悪い例 · 良い例

既定の重大度: warning
プリセット: ecosystem
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC の JavaScript / TypeScript の script ブロック。対象となる Options API または script setup の形式は例を参照してください。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ecosystem/vue-router-prefer-named-push": "warn"
      }
    },
  },
});

vp run lint

悪い

router.push に移動先のパスを文字列で渡し、URL の具体的なパスに依存しています。

<script setup lang="ts">
router.push("/settings");
</script>

良い

settings のルート名を持つオブジェクトを router.push に渡します。

<script setup lang="ts">
router.push({ name: "settings" });
</script>

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

実装 · 全ルール

ecosystem/vue-test-utils-no-html-snapshot

wrapper.html() 全体のスナップショットに依存するテストを検出します。

悪い例 · 良い例

既定の重大度: warning
プリセット: ecosystem
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC の JavaScript / TypeScript の script ブロック。対象となる Options API または script setup の形式は例を参照してください。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ecosystem/vue-test-utils-no-html-snapshot": "warn"
      }
    },
  },
});

vp run lint

悪い

期待する振る舞いを検査する代わりに、wrapper の HTML 全体をスナップショットにしています。

<script setup lang="ts">
expect(wrapper.html()).toMatchSnapshot();
</script>

良い

表示された文字に Saved が含まれることを直接検査します。

<script setup lang="ts">
expect(wrapper.text()).toContain("Saved");
</script>

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

実装 · 全ルール

nuxt/no-nuxt-config-test-key

Nuxt 設定の test キーに旧形式の真偽値を指定する箇所を検出します。

悪い例 · 良い例

既定の重大度: error
プリセット: nuxt
自動修正: なし。修正内容を確認してください
適用範囲: Nuxt 設定ファイル（nuxt.config.ts）
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "nuxt/no-nuxt-config-test-key": "error"
      }
    },
  },
});

vp run lint

悪い

エクスポートした Nuxt 設定で test キーに真偽値 true を指定しており、このルールが拒否する旧形式の設定です。

nuxt.config.ts

export default defineNuxtConfig({ test: true });

良い

空の設定にすることで、真偽値の test プロパティを取り除きます。テスト設定のオブジェクトまで禁止する例ではありません。

nuxt.config.ts

export default defineNuxtConfig({});

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

実装 · 全ルール

nuxt/no-page-meta-runtime-values

definePageMeta の即時評価部分で実行時コンテキストを使う箇所を検出します。

悪い例 · 良い例

既定の重大度: error
プリセット: nuxt
自動修正: なし。修正内容を確認してください
適用範囲: Vue SFC の JavaScript / TypeScript の script ブロック。対象となる Options API または script setup の形式は例を参照してください。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "nuxt/no-page-meta-runtime-values": "error"
      }
    },
  },
});

vp run lint

悪い

definePageMeta のオブジェクトを作る際に useRoute() を即座に評価しています。メタデータはマクロによって setup の実行時コンテキストの外に移されます。

<script setup lang="ts">
definePageMeta({ title: useRoute() });
</script>

良い

validate にコールバックを渡し、useRoute().params.id の評価をコールバックが呼び出されるまで遅らせます。このルールは関数本体内の遅延評価と、メタデータの即時評価を区別します。

<script setup lang="ts">
definePageMeta({ validate: () => Boolean(useRoute().params.id) });
</script>

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

実装 · 全ルール

nuxt/nuxt-config-keys-order

Nuxt 設定のプロパティを推奨順に並べます。

悪い例 · 良い例

既定の重大度: error
プリセット: nuxt
自動修正: 対応している診断で利用できます
適用範囲: Nuxt 設定ファイル（nuxt.config.ts）
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "nuxt/nuxt-config-keys-order": "error"
      }
    },
  },
});

vp run lint

悪い

設定内で ssr が modules より先に置かれ、このルールが推奨する Nuxt 設定キーの順序が逆になっています。

nuxt.config.ts

export default defineNuxtConfig({ ssr: true, modules: [] });

良い

modules を ssr より前に移し、各値を保ったまま指定の順序にそろえます。変更するのは配置であり、設定値の意味ではありません。

nuxt.config.ts

export default defineNuxtConfig({ modules: [], ssr: true });

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

実装 · 全ルール

nuxt/prefer-import-meta

Nuxt の環境フラグを process.* から import.meta.* に置き換えます。

悪い例 · 良い例

既定の重大度: error
プリセット: nuxt
自動修正: 対応している診断で利用できます
適用範囲: Vue SFC の JavaScript / TypeScript の script ブロック。対象となる Options API または script setup の形式は例を参照してください。
オプション: ルール固有のオプションはありません。重大度とプリセットは設定できます。

設定（Vite+）

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

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "nuxt/prefer-import-meta": "error"
      }
    },
  },
});

vp run lint

悪い

process.client は旧形式の Nuxt 環境フラグであり、このルールは import.meta への移行を求めます。

<script setup lang="ts">
if (process.client) console.log("browser");
</script>

良い

import.meta.client に置き換え、ブラウザー側だけで実行する分岐を新しい環境フラグで表します。

<script setup lang="ts">
if (import.meta.client) console.log("browser");
</script>

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

実装 · 全ルール