Existing Tool Integrations

Vize can run inside a tool you already use. Most projects should choose one integration first; you do not need every package on this page. Keep one owner for each job so the same lint diagnostic, format edit, or editor feature is not produced twice.

Choose one starting point

Workspace-only packages are implemented and tested in this repository but cannot yet be installed from the npm registry. Their examples document the intended configuration for evaluation from a checkout and for their first public release. See package support tiers before adopting a preview integration.

ESLint flat config

Use the flat eslint.config.mjs format. The recommended preset includes the Vue and TypeScript parsers and applies Vize's native per-file rules to *.vue files.

// eslint.config.mjs
import vize from "eslint-plugin-vize";

export default [vize.configs.recommended];

Select a smaller preset or add individual rules in the same flat config:

// eslint.config.mjs
import { createVizeConfig } from "eslint-plugin-vize";

export default [
  createVizeConfig({ presets: ["essential"] }),
  {
    files: ["**/*.vue"],
    rules: { "vize/a11y/alt-text": "error" },
  },
];

This adapter runs per-file rules through ESLint. Use vize lint or the Vite+ lint task when you need Vize's project graph and cross-file rules. Do not run the same Vize rule through both hosts in one CI job.

Prettier

Keep Prettier's file discovery, ignore file, editor integration, and configuration. Add the Vize plugin to format Vue SFCs and Musea .art files with Glyph.

{
  "plugins": ["prettier-plugin-vize"],
  "printWidth": 100,
  "singleQuote": true
}

prettier --write "src/**/*.{vue,art}"
prettier --check "src/**/*.{vue,art}"

Use either this plugin or vize fmt as the formatter for a file. The plugin follows Prettier's configuration and .prettierignore; it does not read Vize project configuration.

Babel

Use the Babel plugin when Babel already owns JSX or TSX compilation. It is independent of the Vite SFC plugin.

npm install --save-dev @babel/core @vizejs/babel-plugin

// babel.config.mjs
export default {
  plugins: [["@vizejs/babel-plugin", { jsxMode: "vdom" }]],
  sourceMaps: true,
};

Use @babel/preset-typescript when Babel must strip types. Set jsxMode: "vapor" only when the app uses the matching Vue Vapor runtime. See Babel JSX compatibility for the semantic differences and the package README for SSR and extracted-style options.

TypeScript language service plugin

@vizejs/typescript-vue-plugin adds Vue projections to the JavaScript TypeScript language server for TypeScript 5.7–6.x. It does not start a second language server and is not tied to VS Code: any tsserver client that loads project plugins can use the same tsconfig.json entry.

{
  "compilerOptions": {
    "strict": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "plugins": [{ "name": "@vizejs/typescript-vue-plugin" }]
  },
  "include": ["src"]
}

Restart tsserver after changing the plugin entry. VS Code must use the workspace TypeScript version; other clients must likewise start the project's TypeScript server. Ordinary tsc does not load language-service plugins. For TypeScript 7 tsc, tsgo, or tsrs, use the content mapper instead.

Editors other than VS Code

The VS Code extension is a convenience, not a requirement. vize lsp speaks standard Language Server Protocol over stdio, so Zed, Neovim, Vim, Helix, Emacs, and other LSP clients can run it.

npm install --global vize
vize lsp

The language server guide has ready-to-use configuration for those editors and explains the recommended, lint, and off profiles. Start with lint when another Vue language server already owns type checking, completion, and navigation.

Avoid duplicate owners

• Choose eslint-plugin-vize or the native Vize lint command for the same Vize rule set.
• Choose prettier-plugin-vize or vize fmt for the same files.
• Choose one primary Vue language server. Use the lint-only profile when keeping Vue - Official.
• Add the Babel plugin only when Babel owns JSX/TSX compilation; it does not replace SFC builds, linting, formatting, or editor support.