コメントの注釈

Vize は、リンティング、診断、コード生成の動作を制御するためのコメントベースのアノテーションを提供します。使用される場所に応じて 2 つの注釈システムがあります。

• <!-- @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

ドキュメントのコメント。糸くずの影響はありません。

<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 コメントとして使用されます。次の行のファイル間分析の警告 (クロッキー) を抑制します。

構文

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

コメントをスキップする

抑制の対象は次のcode行で、コメントと空白行はスキップされます。

<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