Integrating Volar with Alternative Editors

Docs Index • Repo README • Live Examples • Volar Kit & Editor

Volar ships an LSP server, but every editor has its own packaging and configuration needs. This guide outlines how to bundle Volar inside JetBrains IDEs, Sublime Text, Neovim, Emacs, and other environments so users get first-class Vue tooling everywhere.

JetBrains IDEs (WebStorm, IntelliJ IDEA)

JetBrains IDEs don’t use LSP internally, but you can still reuse Volar’s language service via the IDE plugin API.

Options

Leverage the built-in Vue plugin (recommended) – JetBrains already bundles Vue-aware tooling inspired by Volar.
Embed Volar via a custom plugin – advanced; wrap Volar using the com.intellij.lang.javascript API.

Embedding Steps

Package the Volar language service as a Node process inside your plugin.
Use the JetBrains LSP Support plugin (2023.2+) to spawn the Volar server and bridge diagnostics/completions into the IDE.
Configure CLI path + initialization options via plugin settings.

Key Settings:

val command = listOf("node", "/path/to/volar/server.js", "--stdio")
val lspServer = ProcessHandler(command, project.basePath)

Expose options for Take Over Mode, log level, schema paths. Document how to install Node/TS dependencies (or bundle them).

Sublime Text (LSP-volar)

Install LSP and LSP-volar.
Settings override example:

{
  "volar.takeOverMode.enabled": true,
  "volar.tsPlugin": true,
  "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}

Expose user settings for:

Node path.
tsconfig discovery (multi-root).
Take Over Mode toggle.

Neovim

Use nvim-lspconfig or volar.nvim.

require'lspconfig'.volar.setup{
  capabilities = capabilities,
  init_options = {
    typescript = {
      tsdk = '/path/to/node_modules/typescript/lib'
    },
    languageFeatures = {
      implementation = true,
      references = true,
      documentHighlight = true,
    },
  }
}

Best Practices:

Document how to disable the built-in TypeScript server when Take Over Mode is active (tsserver = false).
Provide Lua commands (:VolarRestart, :VolarToggleTakeOver) to adjust settings without restarting Neovim.

Emacs

lsp-mode configuration:

(require 'lsp-volar)
(setq lsp-volar-take-over-mode t
      lsp-volar-ts-server-path "/path/to/typescript/lib"
      lsp-volar-completion-default-attr "prop")

Enable relevant capabilities:

lsp-volar-take-over-mode
lsp-volar-typescript-skip-lib-check
Workspace folders for monorepos.

Custom Electron/Native Editors

Use @volar/editor to embed the language service directly.
Maintain a background worker that mirrors LSP features (diagnostics, completion).
Provide developer tools (log viewer, restart button, config UI).

VS Code Web / Codespaces

Bundle the Volar server compiled to WASM/Node (depending on environment).
Ensure dependencies (TypeScript, plugins) are pre-installed in the devcontainer or Codespaces image.
Expose settings via .devcontainer/devcontainer.json to enable Take Over Mode by default.

Distribution Tips

Binary bundling: package server files with your extension/plugin; avoid requiring global installs.
Configuration UI: give users toggles for log level, Take Over Mode, TS SDK path, schema settings.
Docs: maintain README sections for each editor with exact install commands and troubleshooting steps (common errors: missing Node, duplicate TS servers).
Updates: automate dependency upgrades (TypeScript, Volar) via bots to keep integrations current.

By tailoring Volar’s configuration for each editor, you deliver consistent Vue DX whether users prefer VS Code, Neovim, Sublime, JetBrains, or custom tooling. Use the live examples as blueprints and keep documentation close so users can self-service common issues.

4.1 KiB Raw Blame History Unescape Escape