verter-vscode

The official VS Code extension for Verter — an experimental Vue compiler and language server.

[!WARNING] This project is experimental and under active development. APIs, architecture, and package boundaries may change without notice.

Overview

verter-vscode is the VS Code extension that provides full-featured Vue language support powered by the Verter toolchain. It launches the Rust verter-lsp binary over stdio for language features, bundles the TypeScript plugin for .vue import resolution, and delivers intelligent completions, type checking, diagnostics, go-to-definition, hover information, and a compiled code viewer for Vue single-file components.

Features

• Intelligent Completions — context-aware autocompletion for templates, scripts, and styles
• Type Checking — real-time TypeScript diagnostics in .vue files
• Go-to-Definition — navigate to component definitions, props, emits, and slots
• Hover Information — inline type information and documentation on hover
• Diagnostics — template and script error reporting
• Compiled Code View — inspect the generated TSX output for any .vue file

Installation

From VS Code Marketplace

Search for Verter in the VS Code Extensions panel, or install from the command line:

code --install-extension verter.verter-vscode

From Source

pnpm --filter verter-vscode package
# Produces a .vsix file in packages/vue-vscode/
code --install-extension packages/vue-vscode/verter-vscode-*.vsix

Requirements

• VS Code 1.90.0 or later
• Node.js 18 or later

Architecture

src/
├── extension.ts                    # Extension entry point (activate/deactivate)
└── CompiledCodeContentProvider.ts  # Virtual document provider for compiled code view

Bundled Packages

The extension launches the Rust LSP binary and bundles supporting TypeScript packages:

graph TD
    EXT["verter-vscode<br/><i>VS Code extension</i>"]
    LSP["verter-lsp<br/><i>Rust LSP binary (stdio)</i>"]
    TSP["@verter/typescript-plugin<br/><i>.vue import resolution</i>"]
    OXC["@verter/oxc-bindings<br/><i>OXC binary management</i>"]
    LSH["@verter/language-shared<br/><i>Shared protocol types</i>"]
    VLC["vscode-languageclient<br/><i>LSP client library</i>"]

    EXT --> LSP
    EXT --> TSP
    EXT --> OXC
    EXT --> LSH
    EXT --> VLC

Activation Flow

When VS Code activates the extension (triggered by opening a .vue file or a workspace containing Vue files), the following sequence runs:

flowchart TD
    A["VS Code activates extension<br/>(onLanguage:vue)"] --> B["1. Download OXC bindings<br/>resolveAndDownloadBinding()"]
    B --> C{"Download\nsucceeded?"}
    C -- Yes --> D["OXC parser available"]
    C -- No --> D2["Fall back to Babel parser"]
    D --> E
    D2 --> E["2. Start verter-lsp binary<br/>(child process, stdio transport)"]
    E --> F["3. Configure TypeScript plugin<br/>_typescript.configurePlugin"]
    F --> G["4. Set up notification handlers<br/>(statistics, diagnostics)"]
    G --> H["Extension ready"]

    H --> I["Language server provides:<br/>Completions, Diagnostics,<br/>Hover, Go-to-definition,<br/>Rename, References"]
    H --> J["TS plugin provides:<br/>.vue import resolution,<br/>Type information in TS/JS files"]

Step-by-step:

1. Download OXC bindings — ensures the platform-specific OXC parser binary is available for fast AST parsing. Falls back to Babel if unavailable.
2. Start LSP binary — spawns the Rust verter-lsp binary as a child process communicating over stdio.
3. Configure TypeScript plugin — registers @verter/typescript-plugin with TypeScript so .vue imports are resolved in .ts/.js files.
4. Set up notification handlers — listens for custom LSP notifications (statistics, diagnostics, etc.).

Language Server Communication

sequenceDiagram
    participant VSCode as VS Code
    participant Client as Language Client
    participant Server as verter-lsp<br/>(Rust binary, stdio)
    participant TS as TypeScript Plugin

    VSCode->>Client: User opens .vue file
    Client->>Server: textDocument/didOpen (stdio)
    Server->>Server: Parse SFC, run diagnostics
    Server-->>Client: textDocument/publishDiagnostics
    Client-->>VSCode: Display errors/warnings

    VSCode->>Client: User requests completions
    Client->>Server: textDocument/completion (stdio)
    Server-->>Client: Completion items
    Client-->>VSCode: Show completions

    VSCode->>TS: User imports .vue in .ts file
    TS->>TS: Resolve .vue module types
    TS-->>VSCode: Provide type information

API / Usage

Commands

Settings

Compiled Code View

Inspect the TSX that Verter generates for any .vue file:

1. Open a .vue file in the editor.
2. Run the command Verter: Show Compiled Code to Side (or use the command palette).
3. A side panel opens showing the generated TSX output, updated live as you edit.

This is useful for debugging type issues, understanding how Verter transforms your SFC, and learning the TSX equivalents of Vue template syntax.

Development / Build

Building

# Build the extension and all dependencies
pnpm build

# Build only the extension
pnpm --filter verter-vscode build

# Watch mode for iterative development
pnpm --filter verter-vscode watch

Debugging

1. Open the monorepo root in VS Code.
2. Run pnpm build to ensure all packages are built.
3. Press F5 to launch the Extension Development Host.
4. The extension activates in the new VS Code window with full debugging support (breakpoints, step-through, variable inspection).

Alternatively, use pnpm dev-extension to build the LSP binary and watch-build the extension.

Packaging

# Produce a .vsix file for distribution
pnpm --filter verter-vscode package

Benchmarking

# Cold-start typed completion benchmark
pnpm --filter verter-vscode benchmark:startup

# Steady-state script completion benchmark (tsserver, multi-run JSON summary)
pnpm --filter verter-vscode benchmark:completion

The completion benchmark writes per-run and summary JSON files under packages/vue-vscode/e2e/benchmarks/results/.

Troubleshooting

Dependencies

License

MIT