Diagnostics

Every problem Vize reports is a diagnostic: a rule ID, a severity, a location and usually a suggested fix. This page shows how to read one, how to change the way diagnostics are printed, and what to do about them.

To look up a specific rule, go straight to All Rules.

Read a diagnostic

Take a component with two problems:

<script setup lang="ts">
import { ref } from "vue";

const items = ref([{ id: 1, name: "Ada" }]);
</script>

<template>
  <ul>
    <li v-for="item in items">{{ item.name }}</li>
  </ul>
  <img src="/logo.png" />
</template>

vize lint src/App.vue --help-level short prints:

  × [vize:vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives. Element: <li>
    ╭─[src/App.vue:9:9]
  8 │   <ul>
  9 │     <li v-for="item in items">{{ item.name }}</li>
    ·         ─────────────────────
 10 │   </ul>
    ╰────
  help: Why: The :key attribute helps Vue's virtual DOM efficiently track and update list items.
        Reference: docs/content/rules/vue.md


  ⚠ [vize:a11y/alt-text] <img> elements must have an alt attribute
    ╭─[src/App.vue:11:3]
 10 │   </ul>
 11 │   <img src="/logo.png" />
    ·   ───────────────────────
 12 │ </template>
    ╰────
  help: Add an alt attribute: <img alt="Description"> or <img alt=""> for decorative images
        Reference: docs/content/rules/accessibility.md


1 error, 1 warning in 1 file
Linted 1 files in 1.8917ms

Warnings alone leave the exit status at 0. Pass --max-warnings 0 to fail when any warning remains.

Change how diagnostics are printed

--format plain keeps one line per diagnostic, which is easier to read in a CI log:

Patina lint report: 1 error, 1 warning in 1 file

src/App.vue
  src/App.vue:9:9 error vue/require-v-for-key Elements in iteration expect to have 'v-bind:key' directives. Element: <li>
    Reference: docs/content/rules/vue.md
    Help:
      Why: The :key attribute helps Vue's virtual DOM efficiently track and update list items.
  src/App.vue:11:3 warning a11y/alt-text <img> elements must have an alt attribute
    Reference: docs/content/rules/accessibility.md
    Help:
      Add an alt attribute: <img alt="Description"> or <img alt=""> for decorative images

--format json gives a tool the same information as fields: ruleId, severity (2 for an error, 1 for a warning), line, column, endLine, endColumn, message and help.

Decide what to do

1. Fix the code. Open the rule in the Rule reference and compare its Bad and Good examples. vize lint --fix applies the fixes that are safe to make automatically.

2. Change the rule for the project. Set its severity to "error", "warn" or "off":

   import { defineConfig } from "@vizejs/vite-plugin/vite-plus";
   
   export default defineConfig({
     lint: {
       vize: {
         rules: {
           "a11y/alt-text": "error",
           "vue/require-v-for-key": "off",
         },
       },
     },
   });
   

   Rule Options lists the rules that accept more than a severity.

3. Suppress one occurrence. Put a comment on the line above it. Comment Annotations covers the other directives.

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

Where diagnostics come from

Single-file rules come from Patina, Vize's linter. They can be configured from the Vite+ config, the shared vize.config.*, the CLI, the JavaScript API and the Oxlint plugin.

Cross-file diagnostics compare providers with injectors, track duplicated IDs and spot reactivity hazards across component boundaries. See Cross-file Complexity for the reports they produce.

Type-aware diagnostics need the same project configuration that TypeScript sees through tsconfig.json, including compilerOptions.types, paths and project references. Vize does not need a separate globals list for those names.

Musea and CSS diagnostics are documented separately because they are not part of the standard Vue template rules.

Rule Reference

• Rules overview
• Vue rules
• Accessibility rules
• Type and script rules
• HTML rules
• SSR rules
• Vapor rules
• Cross-file rules
• Musea and CSS rules