Comment Annotations

Vize provides comment-based annotations to control linting, diagnostics, and codegen behavior. There are two annotation systems depending on where they are used:

• <!-- @vize:xxx --> — HTML comments in <template> (Patina linter directives)

• // @vize forget: reason — JS comments in <script> (cross-file analysis suppression)

All @vize: template directives are stripped from build output — they never appear in production code.

Template Directives (@vize:)

Used inside <template> as HTML comments. These control Patina (the built-in linter) behavior.

@vize:expected

Expect a diagnostic on the next line. If no diagnostic is produced, this is a no-op. Similar to @ts-expect-error.

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

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

Suppress all diagnostics within a region.

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

@vize:level(warn|error|off)

Override the severity of diagnostics on the next line.

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

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

@vize:todo

Emit a TODO warning.

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

@vize:fixme

Emit a FIXME error.

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

@vize:deprecated

Emit a deprecation warning.

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

@vize:docs

Documentation comment. No lint effect.

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

@vize:dev-only

Mark a node to be stripped in production builds, kept in development.

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

Summary

Script Suppression (@vize forget)

Used inside <script> as JS comments. Suppresses cross-file analysis warnings (Croquis) on the next line.

Syntax

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

A reason is required — you must explain why the suppression is needed.

Example

<script setup>
import { inject } from 'vue'

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

Without the annotation, Vize would warn that destructuring a reactive inject() return value breaks reactivity tracking.

Rules

Multiple Suppressions

Each @vize forget applies independently to the next code line:

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

Skipping Comments

The suppression targets the next code line, skipping over comments and blank lines:

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

Common Reasons

Invalid Examples

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