診断

Vize が報告する問題は、すべて「診断」として出力されます。診断には、ルール ID、重大度、位置、そして多くの場合は修正のヒントが含まれます。このページでは、診断の読み方、表示の変え方、診断を受け取ったあとの対応を説明します。

特定のルールを調べたい場合は、すべてのルールを直接開いてください。

診断を読む

問題を 2 つ含むコンポーネントを例にします。

<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 --locale ja を実行すると、次のように表示されます。

  × [vize:vue/require-v-for-key] `v-for` で繰り返す <li> には `v-bind:key` が必要です
    ╭─[src/App.vue:9:9]
  8 │   <ul>
  9 │     <li v-for="item in items">{{ item.name }}</li>
    ·         ─────────────────────
 10 │   </ul>
    ╰────
  help: 各項目を一意に識別できる値を :key に指定してください
        Reference: docs/content/rules/vue.md


  ⚠ [vize:a11y/alt-text] <img>要素にはalt属性が必要です
    ╭─[src/App.vue:11:3]
 10 │   </ul>
 11 │   <img src="/logo.png" />
    ·   ───────────────────────
 12 │ </template>
    ╰────
  help: alt属性を追加してください: <img alt="説明"> または装飾的な画像には <img alt="">
        Reference: docs/content/rules/accessibility.md


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

警告だけの場合、終了コードは 0 のままです。警告が 1 件でも残っていたら失敗させたい場合は、--max-warnings 0 を指定します。

表示を変える

--format plain は診断を 1 行ずつ出力するので、CI のログで読みやすくなります。

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

src/App.vue
  src/App.vue:9:9 error vue/require-v-for-key `v-for` で繰り返す <li> には `v-bind:key` が必要です
    Reference: docs/content/rules/vue.md
    Help:
      各項目を一意に識別できる値を :key に指定してください
  src/App.vue:11:3 warning a11y/alt-text <img>要素にはalt属性が必要です
    Reference: docs/content/rules/accessibility.md
    Help:
      alt属性を追加してください: <img alt="説明"> または装飾的な画像には <img alt="">

--format json では、同じ情報を ruleId、severity（エラーは 2、警告は 1）、line、column、endLine、endColumn、message、help というフィールドで受け取れます。

対応を決める

1. コードを直す: ルールリファレンスで該当するルールを開き、悪い例と良い例を見比べます。vize lint --fix を実行すると、安全に自動修正できるものが適用されます。

2. プロジェクトのルール設定を変える: 重大度を "error"、"warn"、"off" のいずれかに設定します。

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

   重大度以外のオプションを受け取るルールは、ルールのオプションにまとめています。

3. その箇所だけ抑制する: 対象の直前の行にコメントを書きます。ほかのディレクティブはコメントによる設定で説明しています。

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

診断の種類

単一ファイルのルールは、Vize のリンターである Patina が実行します。Vite+ の設定、vite.config.* の共有の vue:、CLI、JavaScript API、Oxlint プラグインから設定できます。

ファイル横断の診断は、provide と inject の対応、ID の重複、コンポーネントをまたぐリアクティビティの問題を検査します。出力されるレポートはファイル間の複雑さで説明しています。

型情報を使う診断には、tsconfig.json の compilerOptions.types、paths、プロジェクト参照など、TypeScript と同じ設定が使われます。これらの名前を Vize 用の globals に重ねて指定する必要はありません。

Musea と CSS の診断は、通常の Vue テンプレートのルールとは対象が異なるため、専用のリファレンスにまとめています。

ルールのリファレンス

• ルール概要
• Vue ルール
• アクセシビリティルール
• 型とスクリプトのルール
• HTML ルール
• SSR ルール
• Vapor ルール
• ファイル横断ルール
• Musea と CSS のルール