コメントによる設定

コメントを使って lint 診断やコード生成の動作を指定できます。テンプレートとスクリプトで記法が異なります。

• <!-- @vize:xxx -->— <template> の HTML コメント (Patina リンターのディレクティブ)
• // @vize forget: reason— <script> の JS コメント （ファイル横断解析の診断を抑制）

テンプレート内のすべての @vize: ディレクティブはビルド出力から削除され、本番コードには含まれません。

テンプレートのディレクティブ (@vize:)

<template> 内の HTML コメントに記述し、組み込みリンター Patina の動作を指定します。

@vize:expected

次の行に診断が出ることを宣言します。@ts-expect-error に似ていますが、診断が出なくても追加のエラーは発生しません。

<template>
  <ul>
    <!-- @vize:expected -->
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

@vize:ignore-start / @vize:ignore-end

領域内のすべての診断を抑制します。

<template>
  <!-- @vize:ignore-start -->
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
  <!-- @vize:ignore-end -->
</template>

@vize:level(warn|error|off)

次の行に出る診断の重大度を上書きします。

<template>
  <!-- @vize:level(warn) -->
  <img src="/photo.png" />

  <!-- @vize:level(off) -->
  <li v-for="item in items">{{ item }}</li>
</template>

@vize:todo

TODO の警告を報告します。

<template>
  <!-- @vize:todo add loading state -->
  <div>{{ data }}</div>
</template>

@vize:fixme

FIXME のエラーを報告します。

<template>
  <!-- @vize:fixme broken on mobile -->
  <div class="layout">...</div>
</template>

@vize:deprecated

非推奨であることを警告します。

<template>
  <!-- @vize:deprecated use NewComponent instead -->
  <OldComponent />
</template>

@vize:docs

説明用のコメントです。lint の動作には影響しません。

<template>
  <!-- @vize:docs Primary action button for form submission -->
  <button type="submit">Submit</button>
</template>

@vize:dev-only

開発中だけ表示するノードを指定します。本番ビルドでは削除されます。

<template>
  <!-- @vize:dev-only -->
  <div class="debug-panel">{{ internalState }}</div>
</template>

まとめ

スクリプト抑制 (@vize forget)

<script> 内で JS コメントとして使用されます。次の行のファイル横断解析による警告（Croquis）を抑制します。

構文

<script setup>
// @vize forget: <reason>
<suppressed line>
</script>

• 理由を記載してください — 抑制が必要な理由を説明します。

例

<script setup>
import { inject } from "vue";

// @vize forget: intentionally destructuring for one-time read
const { count } = inject("state");
</script>

このコメントがない場合、Vize は inject() のリアクティブな戻り値を分割代入すると、リアクティビティを追跡できなくなる可能性を警告します。

ルール

複数の抑制

各 @vize forget は次のコード行に独立して適用されます。

<script setup>
import { inject } from "vue";

// @vize forget: one-time read for display name
const { name } = inject("user");

// @vize forget: static config value
const { theme } = inject("config");
</script>

コメントをスキップする

抑制の対象は次のコード行です。コメントと空行は読み飛ばします。

<script setup>
// @vize forget: read-only access
// This comment is skipped
const { count } = inject("state");
</script>

一般的な理由

無効な例

// @vize forget
const { count } = inject("state");
// ^ Error: requires a reason

// @vize forget because I said so
const { count } = inject("state");
// ^ Error: requires a colon before the reason

// @vize forget:
const { count } = inject("state");
// ^ Error: reason cannot be empty