Vize - VS Code Extension

Vue Language Support powered by Vize - A high-performance language server for Vue SFC.

For day-to-day Vue editor support, keep using the official Vue language tools (vuejs/language-tools) for now. This extension is still experimental and should be evaluated separately from your primary editor setup.

Features

• Diagnostics - Real-time error detection
• Completion - Vue directives, components, Composition API
• Hover - Type information and documentation
• Go to Definition - Navigate template to script
• Find References - Cross-file reference search
• Rename - Safe identifier renaming
• Semantic Highlighting - Vue-specific syntax colors
• Code Lens - Reference counts
• Ecosystem Helpers - Vue Router file-route params, Vue I18n catalogs, Nuxt, and Void Vue diagnostics and completions

Installation

Install the extension from the VS Code Marketplace as ubugeeei.vize.

From Marketplace

code --install-extension ubugeeei.vize

Development

Install vp once from the Vite+ install guide, then:

cd editors/vscode
vp install --ignore-workspace
vp build
vp exec vsce package --no-dependencies --out dist/vize.vsix
# Press F5 to launch Extension Development Host

Requirements

• VS Code 1.75+
• A matching Vize language server binary. The extension auto-detects bundled, development, cached GitHub release, cargo, and PATH binaries, and downloads the matching GitHub release binary when no local binary matches the extension version. vize.serverPath is only needed for custom builds.

Do not set vize.serverPath to node_modules/.bin/vize from the npm package. That package is for project scripts and NAPI-backed commands; the language server is the Rust vize executable started with the lsp subcommand. Use a GitHub release binary, Nix, a local Cargo build, or the binary that the extension auto-detects/downloads.

Configuration

Open a Vue file in an existing Vite or TypeScript project to start Vize automatically. vite.config.* or tsconfig.json is sufficient; no separate Vize config or editor feature switches are required. The project defaults enable lint diagnostics, type checking, editor assistance, ecosystem helpers, and formatting. Explicit vize.enable: false always keeps the extension disabled.

Configure project features through the top-level vue settings in your Vite config, for example:

export default {
  vue: {
    languageServer: {
      hover: false,
      formatting: false,
    },
  },
};

Explicit VS Code feature settings override project settings. Settings left unset preserve the project configuration and its defaults. The extension discovers Vite and TypeScript configurations inside monorepo packages. Each open document uses its nearest project configuration, and the language server reloads imported configuration helpers and TypeScript project settings when they change. vize.config.* files are retired; move Vue settings to vite.config.* or the standard vueCompilerOptions in tsconfig.json.

The native server evaluates Vite configuration with the project's installed Vite. Projects without Vite require Node.js 22.15 or newer so imported configuration files can be tracked and refreshed.

For workspaces without a project config, setting only vize.enable: true uses the recommended diagnostics, editor, and ecosystem profile. The setup commands apply that profile to the workspace by writing explicit editor settings.

The status bar item opens Vize: Show Status, a small command hub for switching profiles, selecting the vize executable, restarting the server, opening settings, and showing logs. If the server cannot be found, the same flow lets you pick a local binary instead of hunting through settings.

If you want a lighter rollout, run Vize: Enable Lint-Only Profile, then opt into type checking or editor features after confirming it does not overlap with your existing Vue setup.

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

When you are ready to evaluate Vize editor assistance separately from vuejs/language-tools, use:

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

vize.editor.enable turns on completion, hover, definition, references, symbols, rename, semantic tokens, links, folding ranges, inlay hints, and file rename handling. If you prefer individual switches, make sure to include vize.completion.enable, vize.hover.enable, and vize.definition.enable together when testing the core editor flow.

Use individual switches when you want to compare one Vize surface against an existing Vue editor setup without changing the whole profile:

The table shows VS Code setting defaults. Unset settings defer to the project profile; in Vite/TypeScript projects, formatting is enabled unless a project setting or explicit vize.formatting.enable: false disables it. Choose ubugeeei.vize as your Vue default formatter to use Vize for format-on-save.

vize.ecosystem.enable adds Vue Router route-name and file-route param completions, route-param diagnostics for useRoute(), Vue I18n key completions, workspace key validation, inlay previews, Void Vue route completions, and ecosystem lint diagnostics.

Vue 3 Options API support is opt-in. Set vize.optionsApi.enable: true to resolve data, computed, methods, props, and inject template bindings in type checking and hover. It is officially supported on Vue 3 and stays zero cost when left off for <script setup>-only projects.

Vue 2.7 / Nuxt 2 support is opt-in. Set vize.legacyVue2.enable: true to include Options API template bindings and Nuxt 2 globals in type checking, completion, hover, definition, and references.

When paired with the Vize Art extension (vize.vize-art), the same editor capabilities also apply to *.art.vue documents.

Vue TSX and JSX

Opening a .tsx or .jsx file activates the extension, including in a workspace containing no Vue SFCs. Vue JSX checking is enabled for Vite and TypeScript projects. Configure vue.typeChecker.jsxTypecheck: false in vite.config.* when JSX belongs to another framework. Type diagnostics, completion, hover, and navigation use the native TypeScript backend. Older servers that do not advertise JSX support leave JSX documents with their existing language service.

Commands

• Vize: Show Status - Open the Vize status and setup action hub
• Vize: Enable Recommended Profile - Enable lint, type checking, and editor assistance
• Vize: Enable Lint-Only Profile - Enable diagnostics while leaving editor navigation to existing tools
• Vize: Select Language Server Executable - Set vize.serverPath from a file picker
• Vize: Disable Language Server - Stop Vize for the current configuration target
• Vize: Restart Language Server - Restart the LSP server
• Vize: Show Output Channel - Show server logs

License

MIT