Commencer

⚠️ Travaux en cours : Vize est en développement actif et n’est pas encore prêt pour une utilisation en production. Les API et les limites des paquets peuvent changer sans préavis.

Qu’est-ce que Vize ?

Vize (/viːz/) est une chaîne d’outils Vue.js écrite en Rust. L’espace de travail contient des blocs de construction partagés pour :

Ce guide recommande Vite+ (vp) pour la gestion de paquets JavaScript et les commandes de projet. Cela maintient la cohérence du flux d’installation et d’exécutif entre les gestionnaires de paquets tout en utilisant l’outil sous-jacent de l’espace de travail.

Si vous n’avez pas encore vp , installez-le une fois et ouvrez un nouveau shell :

curl -fsSL https://vite.plus | bash

Consultez les Vite+ docs et les Installing Dependencies guide pour en savoir plus.

Ce que fait Vize

À un niveau général, Vize est divisé en quelques voies réutilisables :

Voir Static Analysis pour le modèle de vérification de lint et de type, Rules pour la sortie de règles concrètes, et Configuration pour les options partagées de configuration et de compilateur.

Créer des composants dans JSX/TSX au lieu de .vue SFC ? Consultez le guide JSX & TSX — .jsx/.tsx composants Vue se compilent dans la même voie Rust.

Choisissez votre point d’entrée

1. Projets Vite

Utilisez le plugin Vite si vous voulez une compilation native de Vue dans un projet Vite existant.

vp install -D @vizejs/vite-plugin

Installez vize comme dépendance directe uniquement lorsque vous souhaitez importer des assistants de configuration partagés depuis "vize" ou ajouter des scripts de paquets Vize comme vize:lint et vize:check.

// vite.config.ts
import { defineConfig } from "vite";
import vize from "@vizejs/vite-plugin";

export default defineConfig({
  plugins: [vize()],
});

Ajoutez des options de compilateur dans vize.config.ts lorsque vous souhaitez avoir les mêmes réglages pour intégrer scripts et le plugin :

import { defineConfig } from "vize";

export default defineConfig({
  compiler: {
    sourceMap: true,
    vapor: false,
    customRenderer: false,
  },
  vite: {
    scanPatterns: ["src/**/*.vue"],
  },
});

2. Projets Nuxt

Utilisez le module Nuxt lorsque vous voulez que Vize tourne dans le pipeline Vite de Nuxt.

vp install @vizejs/nuxt

Ajoutez le module à nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["@vizejs/nuxt"],
  vize: {
    compiler: true,
  },
});

Faites tourner votre serveur de développement Nuxt comme d’habitude. Les registres du module @vizejs/vite-plugin pour la compilation de SFC Vue tout en préservant les importations automatiques Nuxt, les composants, les middlewares et les transformations SSR.

Consultez le guide Nuxt Integration pour l’installation de Musea et les notes spécifiques à Nuxt.

3. scripts de paquet npm + configuration partagée

Utilisez le package vize npm lorsque vous voulez des utilitaires de configuration partagés et des commandes natives disponibles via scripts de projet.

vp install -D vize

Scripts de paquets recommandés :

{
  "scripts": {
    "vize:build": "vize build src",
    "vize:fmt": "vize fmt --write src",
    "vize:lint": "vize lint --preset happy-path src",
    "vize:check": "vize check src",
    "vize:ready": "vize ready src"
  }
}

vp run vize:fmt
vp run vize:lint
vp run vize:check
vp run vize:build
vp run vize:ready

La commande vize check du package npm utilise le vérificateur NAPI empaqueté et peut émettre des déclarations de composantes Vue avec --declaration --declaration-dir dist/types. Utilisez la ligne de commande Rust lorsque vous avez besoin de check-server, LSP, gestion de l’IDE ou de diagnostics de projet via Vue, TS, TSX et .d.ts entrées.

4. CLI complet de rouille

La plupart des flux de travail applicatifs devraient utiliser les scripts de paquet npm ci-dessus. Utilisez le binaire Rust lorsque vous besoin de la CLI native complète aujourd’hui : LSP, gestion de l’IDE, profilage ou check-server. Pour l’alpha v1, les canaux publics pris en charge sont les binaires de publication GitHub et le point d’entrée Nix ; le CLI Rust n’est pas encore publié via crates.io.

nix run github:ubugeeei-prod/vize#vize -- --help

vize build src/**/*.vue
vize fmt --check src
vize lint --profile src
vize check --profile src
vize ready src
vize lsp

Vérification de type native

vize check est alimenté par vize_canon, qui s’appuie désormais sur corsa-bind sessions de projet pour des diagnostics natifs TypeScript. Vize génère un TypeScript virtuel pour les SFC Vue, demande à Corsa des diagnostics conscients du projet, puis remappe les résultats sur les fichiers originaux .vue, .ts, .tsxet .d.ts.

Cette voie est encore en train de mûrir, donc la vérification des types d’éditeurs reste une option volontaire pour l’instant. La pile d’exécution est le paquet @typescript/native-preview, Corsa/corsa-bind est la couche API avec laquelle Vize communique, et l’exécutable installé par l’aperçu natif TypeScript est encore couramment nommé tsgo. Utilisez typeChecker.corsaPath, ou un script package qui s’exécute vize check --corsa-path /path/to/tsgo, lorsque vous souhaitez épingler ce runtime. typeChecker.tsgoPath reste un alias de compatibilité obsolète.

Cibles utiles pour scripts de paquets :

{
  "scripts": {
    "vize:check": "vize check",
    "vize:check:app": "vize check --tsconfig tsconfig.app.json",
    "vize:check:virtual-ts": "vize check --show-virtual-ts src/components/App.vue",
    "vize:check:declarations": "vize check --declaration --declaration-dir dist/types"
  }
}

vp run vize:check
vp run vize:check:app
vp run vize:check:virtual-ts
vp run vize:check:declarations

Partagé vize.config.*

Les commandes de paquet npm et @vizejs/vite-plugin partagent la découverte de configuration :

• vize.config.pkl

• vize.config.ts

• vize.config.js

• vize.config.mjs

• vize.config.json

Configuration TypeScript :

import { defineConfig } from "vize";

export default defineConfig({
  compiler: {
    sourceMap: true,
    vapor: false,
    customRenderer: false,
  },
  linter: {
    preset: "opinionated",
  },
  typeChecker: {
    enabled: true,
    strict: true,
    corsaPath: "./node_modules/.bin/tsgo",
  },
  formatter: {
    printWidth: 100,
  },
  musea: {
    include: ["src/**/*.art.vue"],
    basePath: "/__musea__",
  },
  lsp: {
    lint: true,
    typecheck: false,
    editor: false,
    formatting: false,
  },
});

Configuration PKL :

amends "node_modules/vize/pkl/vize.pkl"

linter {
  preset = "opinionated"
}

typeChecker {
  enabled = true
  strict = true
}

lsp {
  lint = true
  typecheck = false
  editor = false
  formatting = false
}

Configuration JSON avec schéma :

{
  "$schema": "./node_modules/vize/schemas/vize.config.schema.json",
  "linter": {
    "preset": "opinionated"
  }
}

Paquets

vp install -D @vizejs/vite-plugin
vp install @vizejs/native
vp install @vizejs/wasm
vp install @vizejs/unplugin
vp install @vizejs/rspack-plugin @rspack/core
vp install @vizejs/nuxt
vp install @vizejs/vite-plugin-musea
vp install @vizejs/musea-mcp-server
vp install -D oxlint oxlint-plugin-vize

Notes :

• @vizejs/vite-plugin 'est l’intégration recommandée du bundler aujourd’hui.

• @vizejs/unplugin et @vizejs/rspack-plugin sont encore expérimentaux.

• @vizejs/native et @vizejs/wasm exposent directement les fixations Rust.

• @vizejs/vite-plugin-musea fournit la galerie et le flux de travail dev-server pour Musea.

Galerie des composantes de la Musea

Utilisez Musea lorsque vous souhaitez des exemples de composants natifs Vue, de la documentation, des jetons, des vérifications VRT et a11y :

vp install -D @vizejs/vite-plugin @vizejs/vite-plugin-musea vize

// vite.config.ts
import { defineConfig } from "vite";
import vize from "@vizejs/vite-plugin";
import { musea } from "@vizejs/vite-plugin-musea";

export default defineConfig({
  plugins: [
    vize(),
    musea({
      include: ["src/**/*.art.vue"],
      basePath: "/__musea__",
      previewCss: ["src/styles/main.css"],
    }),
  ],
});

Faites tourner votre serveur de développement Vite et ouvrez /__musea__. Voir Musea pour les fichiers d’art, la configuration aperçu, les jetons de design, la VRT et les variantes générées.

Intégration Oxlint

Exécutez les diagnostics Vue de Vize à l’intérieur d’Oxlint :

vp install -D oxlint oxlint-plugin-vize

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

Pour une utilisation terminale d’abord, préférez :

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

Support des éditeurs

Pour le montage quotidien de Vue, continuez à utiliser vuejs/language-tools pour l’instant. fonctionnalités de l’éditeur Vize sont conçues pour l’adhésion incrémentale.

Point de départ de VS Code :

{
  "vize.enable": true,
  "vize.lint.enable": true,
  "vize.typecheck.enable": false,
  "vize.editor.enable": false,
  "vize.formatting.enable": false
}

Point de départ de Zed :

{
  "languages": {
    "Vue": {
      "language_servers": ["vize", "..."]
    }
  },
  "lsp": {
    "vize": {
      "initialization_options": {
        "lint": true
      }
    }
  }
}

Développement local

Les tâches locales restent locales ; CI parity utilise nix develop .#testbox.

nix develop
vp install --frozen-lockfile
vp check
vp fmt
vp dev
vp build