静的解析

Vize の分析スタックは、コンパイラー、リンター、型チェッカー、エディター サーバー、および Musea によって共有されます。 ツーリング。目標は、Vue SFC を一度解析し、豊富なセマンティック情報を保持し、それを再利用することです。 各コマンドを別個のツールとして扱うのではなく、診断とコード生成に使用します。

以下の例では、vize npm パッケージがインストールされ、プロジェクト スクリプトから呼び出されることを前提としています。 はアプリケーションに推奨されるワークフローです。

パイプライン

これは、静的分析はリンティングだけではないことを意味します。テンプレートバインディング、コンパイラマクロ、コンポーネント メタデータ、提供/注入関係、反応性フロー、生成された仮想 TypeScript、および コンポーネント ギャラリーのメタデータはすべて、同じ下位レベルの分析作業に依存します。

具体的なルール名、デフォルト、発行できるファイル間診断コードについては、を参照してください。 ルール。

糸くず

デフォルトのプリセットから始めます。

{
  "scripts": {
    "vize:lint": "vize lint src"
  }
}

vp run vize:lint

正確性のみの CI には essential を使用し、デフォルトの推奨バンドルには happy-path を使用します。 より強力な規則が必要な場合は opinionated、Nuxt を意識した前提の場合は nuxt、 incremental 明示的に構成されたルールのみを実行したい場合。

{
  "scripts": {
    "vize:lint:ci": "vize lint --preset essential --max-warnings 0 src",
    "vize:lint:opinionated": "vize lint --preset opinionated --help-level short src",
    "vize:lint:fix": "vize lint --fix src",
    "vize:lint:json": "vize lint --format json src"
  }
}

vp run vize:lint:ci
vp run vize:lint:opinionated
vp run vize:lint:fix
vp run vize:lint:json

基本的な lint パスが安定した後でのみ、ファイル間および型認識チェックをオプトインします。

{
  "scripts": {
    "vize:lint:cross-file": "vize lint --cross-file src",
    "vize:lint:cross-file-tree": "vize lint --cross-file --cross-file-tree src",
    "vize:lint:strict-reactivity": "vize lint --strict-reactivity src"
  }
}

vp run vize:lint:cross-file
vp run vize:lint:cross-file-tree
vp run vize:lint:strict-reactivity

ファイル間のリンティングは、一連のファイル間の提供/注入や反応性フローなどの関係を分析します。 Vue ファイル。 --strict-reactivity はネイティブ チェッカーを利用した反応性損失ルールを有効にするため、期待できます。 通常のテンプレートおよびスクリプトの lint ルールよりも遅くなります。

反応性オーバーレイ

Croquis は、分析された各 SFC の安定した反応性オーバーレイを公開します: 反応性ソース、.value 要件、反応性損失サイト、およびソースマッピングを使用した効果グラフエッジ。同じコンパクトでも JSON モデルは、診断、レポート、エディター サーフェス、および Playground の反応タブにフィードを提供します。

緑青ルールモデル

Patina は lint ルール レイヤーです。ルールは、SFC ソース、テンプレート ルート、 テンプレート要素、ディレクティブ、v-for、v-if、補間。各ルールにはメタデータが含まれます。 ルール名、カテゴリ、デフォルトの重大度、ヘルプ テキスト、修正可能かどうか。プリセットはただ どのルールを一緒に有効にするかを決定するレジストリ。

組み込みのプリセットは、段階的な導入をサポートすることを目的としています。

移行プラグマとカスタム ルール

Patina は、ルール名を一致させるための既存の ESLint 無効化プラグマを受け入れます。 eslint-disable、eslint-enable、eslint-disable-next-line、および eslint-disable-line。これにより、 プロジェクトは、すべての抑制コメントを書き換えることなく、vue/require-v-for-key などのルールを移行します。 前に。

プロジェクトローカル JavaScript ルール モジュールは、まだ安定した Vize ランタイム API ではありません。移行中は、 これらのルールを ESLint または Oxlint で実行し、vize lint の横で実行するか、incremental プリセットを使用して すでにポリシーに一致する組み込みの Vize ルールのみを有効にします。 rules 構成オブジェクト コントロール 組み込みの Vize ルールの重大度を名前で表示します。

ランタイム環境グローバル (次のような典型的なサイドカー ESLint ルール) を禁止する一般的なケースの場合 no-access-process、no-access-local-storage、または no-restricted-globals 対 localStorage / sessionStorage)、オプトインの組み込み script/no-restricted-globals ルールを維持する代わりに有効にします。 ESLint はそれら専用にインストールされています。デフォルトの拒否リストは process、localStorage、および sessionStorage、それぞれの裸のリファレンスについて報告されています。

2 つのスクリプト ルールは、linter.ruleOptions (#1891) でプロジェクト ローカル構成も受け入れるため、チーム vize lint を通じて独自のアーキテクチャ規則を強制できます。 script/no-restricted-globals 組み込みのデフォルトのリストを置き換えるglobals リストを受け取ります。 script/no-restricted-membersは 設定され、<object>.<property> フラグが members リストからアクセスされるまでオフ。オプションが入力されています (name / object / property とオプションの message、不明なキーは拒否されます);行方不明の message は一般的な勧告に戻ります。

{
  "linter": {
    "rules": {
      "script/no-restricted-globals": "error",
      "script/no-restricted-members": "error"
    },
    "ruleOptions": {
      "script/no-restricted-globals": {
        "globals": [
          { "name": "process", "message": "Read env via a typed helper." },
          { "name": "alert" }
        ]
      },
      "script/no-restricted-members": {
        "members": [
          { "object": "window", "property": "localStorage", "message": "Use authStorage." }
        ]
      }
    }
  }
}

クロスファイルルール

クロスファイル分析は Croquis 内に存在し、緑青診断を通じてリントにさらされます。それは モジュール レジストリ、インポート グラフ、コンポーネント使用状況グラフなどを構築するため、オプトインします。 分析されたすべての Vue ファイルのインデックスを作成します。

現在、vize lint --cross-file により、マッチングの提供/挿入、一意の要素 ID チェックが可能になります。 反応性の追跡、および非同期競合状態の分析。 --cross-file-tree は、 これらの診断の上にツリーを提供/注入します。

vp run vize:lint:cross-file
vp run vize:lint:cross-file-tree

下位レベルのクロスファイル エンジンは、現在の CLI サーフェスよりも広範です。

方向性は、デフォルトで単一ファイルのリンティングを高速に保ち、ファイル間のグループを明示的に公開することです。 これらは成熟し、信頼性の高いプロジェクトの事実を、 CLI、Oxlint ブリッジ、およびエディター サーバー。

型チェック

vize check は Vue SFC 用の仮想 TypeScript を生成し、Corsa プロジェクト セッションに 診断。 .vue、.ts、.tsx、および .d.ts 入力をチェックし、診断をマッピングし直します。 オリジナルのソースファイル。

{
  "scripts": {
    "vize:check": "vize check",
    "vize:check:src": "vize check src",
    "vize:check:app": "vize check --tsconfig tsconfig.app.json",
    "vize:check:json": "vize check --format json --quiet",
    "vize:check:virtual-ts": "vize check --show-virtual-ts src/components/App.vue",
    "vize:check:profile": "vize check --profile src",
    "vize:check:single-server": "vize check --servers 1 src",
    "vize:check:declarations": "vize check --declaration --declaration-dir dist/types"
  }
}

vp run vize:check
vp run vize:check:src
vp run vize:check:app
vp run vize:check:json

パスが指定されていない場合、vize check は tsconfig.json files、include、および exclude を読み取ります。 プロジェクト構成が利用可能な場合はフィールド。生成されたコードをデバッグする場合は、--show-virtual-ts を使用します。 --profile node_modules/.vize でタイミングと仮想ファイルのアーティファクトが必要な場合。

vp run vize:check:virtual-ts
vp run vize:check:profile
vp run vize:check:single-server

宣言出力は、具体化されたチェッカー プロジェクトから入手できます。

vp run vize:check:declarations

プロジェクト全体のテンプレート値と生成された宣言ファイルは TypeScript を通じて表示される必要があります プロジェクトの構成。 tsconfig に含まれるパスの下にアンビエント宣言を配置して渡します 必要に応じて、そのプロジェクト ファイルをチェッカーに送信します。

{
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.d.ts"]
}

// src/types/vue-app.d.ts
declare module "vue" {
  interface ComponentCustomProperties {
    $t: (key: string) => string;
    $route: { path: string };
  }
}

vp run vize:check:app

npm パッケージ スクリプトと Rust CLI の比較

npm vize パッケージはパッケージ スクリプトを対象としており、パッケージ化された NAPI バインディングを使用します。

{
  "scripts": {
    "vize:lint": "vize lint src",
    "vize:check": "vize check src --strict",
    "vize:ready": "vize ready src"
  }
}

vp run vize:lint
vp run vize:check
vp run vize:ready

Rust CLI には現在、プロジェクトに裏付けられたより完全な型チェック サーフェイスがあります。

nix run github:ubugeeei-prod/vize#vize -- check --tsconfig tsconfig.app.json --profile src
vize check --tsconfig tsconfig.app.json --profile src
vize lsp

アプリケーションにインストール可能なワークフローが必要な場合は、npm パッケージ スクリプトを使用します。次の場合に Rust CLI を使用します。 check-server、LSP、IDE 管理、または Corsa がサポートするプロジェクト診断パスが必要です Vue および TypeScript ファイル。

オクスリント

チームがすでに Oxlint を実行していて、Vue 対応の診断を必要とする場合は、oxlint-plugin-vize を使用します。 同じコマンド:

vp install -D oxlint oxlint-plugin-vize
vp exec oxlint-vize -c .oxlintrc.json -f stylish src

{
  "plugins": ["vue"],
  "jsPlugins": ["oxlint-plugin-vize"],
  "settings": {
    "vize": {
      "preset": "essential",
      "helpLevel": "short"
    }
  },
  "rules": {
    "eqeqeq": "error",
    "vize/vue/require-v-for-key": "error",
    "vize/vue/no-v-html": "warn"
  }
}

導入パス

1. vize lint --preset essential src などの vize:lint:ci パッケージ スクリプトを CI に追加します。

2. 正確性診断が正常になったら、happy-path または opinionated に切り替えます。

3. vize:check パッケージ スクリプトをプロジェクト tsconfig.json に追加します。

4. 最初にエディターのリンティングを有効にし、CI 出力が安定したら型チェックを有効にします。

5. より深い分析の恩恵を受けるプロジェクトに対して、ファイル間および厳密な反応性チェックを追加します。

単一の品質ゲートの場合、vize ready src を実行する vize:ready パッケージ スクリプトは `fmt を実行します。

• -write, lint, check, and build` を順番に実行し、最初に失敗したステップで停止します。