search

vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.55k stars 373 forks source link

readme

Vue Language Tools

⚡ High-performance Vue language tooling based-on Volar.js

💬 #language-tools on our Discord Server

Packages

Community Integration

yaegassy/coc-volar ⚡ 🤝 🅿️ \ Vue language client for coc.nvim

neovim/nvim-lspconfig ⚡ 🤝 \ Vue language server configuration for Neovim

How to configure vue language server with neovim and lsp? ### Hybrid mode configuration (Requires `@vue/language-server` version `^2.0.0`) Note: The "Take Over" mode has been discontinued. Instead, a new "Hybrid" mode has been introduced. In this mode, the Vue Language Server exclusively manages the CSS/HTML sections. As a result, you must run `@vue/language-server` in conjunction with a TypeScript server that employs `@vue/typescript-plugin`. Below is a streamlined configuration for Neovim's LSP, updated to accommodate the language server following the upgrade to version `2.0.0`. ```lua -- If you are using mason.nvim, you can get the ts_plugin_path like this -- local mason_registry = require('mason-registry') -- local vue_language_server_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server' local vue_language_server_path = '/path/to/@vue/language-server' local lspconfig = require('lspconfig') lspconfig.tsserver.setup { init_options = { plugins = { { name = '@vue/typescript-plugin', location = vue_language_server_path, languages = { 'vue' }, }, }, }, filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, } -- No need to set `hybridMode` to `true` as it's the default value lspconfig.volar.setup {} ``` ### None-Hybrid mode(similar to takeover mode) configuration (Requires `@vue/language-server` version `^2.0.7`) Note: If `hybridMode` is set to `false` `Volar` will run embedded `tsserver` therefore there is no need to run it separately. For more information see [#4119](https://github.com/vuejs/language-tools/pull/4119) *Make sure you have typescript installed globally or pass the location to volar* Use volar for all `.{vue,js,ts,tsx,jsx}` files. ```lua local lspconfig = require('lspconfig') -- lspconfig.tsserver.setup {} lspconfig.volar.setup { filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, init_options = { vue = { hybridMode = false, }, }, } ``` Use `volar` for only `.vue` files and `tsserver` for `.ts` and `.js` files. ```lua local lspconfig = require('lspconfig') lspconfig.tsserver.setup { init_options = { plugins = { { name = '@vue/typescript-plugin', location = '/path/to/@vue/language-server', languages = { 'vue' }, }, }, }, lspconfig.volar.setup { init_options = { vue = { hybridMode = false, }, }, }, ``` ### nvim-cmp integration Check out this [discussion](https://github.com/vuejs/language-tools/discussions/4495)

mattn/vim-lsp-settings ⚡ \ Vue language server auto configuration for vim-lsp

sublimelsp/LSP-volar 🤝 \ Vue language client for Sublime

kabiaa/atom-ide-volar \ Vue language client for Atom

emacs-lsp/lsp-mode (jadestrong/lsp-volar) ⚡ 🤝 \ Vue language client for Emacs

tommasongr/nova-vue \ Vue language client for Nova

xiaoxin-sky/lapce-vue \ Vue language client for Lapce

Kingwl/monaco-volar \ Vue language support for Monaco on Browser

WebStorm \ Built-in integration for @vue/language-server

Eclipse WildWebDeveloper \ Vue language server configuration for Eclipse

* ⚡ support multiple servers \ * 🤝 support take over mode \ * 🅿️ support extra preview features

Contribution Guide

If you want to work on the volar extension follow these commands to set up your local development environment.

🔎 Note that you will need pnpm - you can download it here: https://pnpm.io/installation.

git clone https://github.com/vuejs/language-tools.git
cd language-tools
pnpm install
pnpm run build

The recommended way to develop the volar extension is to use the Debug Tools provided by VSCode. Alternatively, you can run one of the scripts defined in the package.json file.

❗ You should always use the debug launch configs or package.json scripts defined in the root of the project.

Additional info for contributing to open source projects can be found here: https://docs.github.com/en/get-started/quickstart/contributing-to-projects

To develop with upstream Volar.js modules, you can setup workspace with https://github.com/volarjs/workspace.

High Level System Overview

flowchart LR
    %% IDEs
    VSC[VSCode]
    COC[coc.nvim]
    NEO[Neovim]
    VIM[vim-lsp]
    SUBLIME[Sublime]
    ATOM[Atom]
    EMACS[Emacs]
    NOVA[Nova]
    LAPCE[Lapce]

    %% Language Clients
    COC_VUE[yaegassy/coc-volar]
    NEO_VUE[neovim/nvim-lspconfig]
    VIM_VUE[mattn/vim-lsp-settings]
    SUBLIME_VUE[sublimelsp/LSP-volar]
    ATOM_VUE[kabiaa/atom-ide-volar]
    EMACS_VUE[jadestrong/lsp-volar]
    NOVA_VUE[tommasongr/nova-vue]
    LAPCE_VUE[xiaoxin-sky/lapce-vue]

    click COC_VUE "https://github.com/yaegassy/coc-volar"
    click NEO_VUE "https://github.com/neovim/nvim-lspconfig"
    click VIM_VUE "https://github.com/mattn/vim-lsp-settings"
    click SUBLIME_VUE "https://github.com/sublimelsp/LSP-volar"
    click ATOM_VUE "https://github.com/kabiaa/atom-ide-volar"
    click EMACS_VUE "https://github.com/jadestrong/lsp-volar"
    click NOVA_VUE "https://github.com/tommasongr/nova-vue"
    click LAPCE_VUE "https://github.com/xiaoxin-sky/lapce-vue"

    %% Volar - Extensions
    VSC_VUE[vscode-vue]
    VSC_TSVP[vscode-typescript-vue-plugin]

    click VSC_VUE "https://github.com/vuejs/language-tools/tree/master/extensions/vscode"
    click VSC_TSVP "https://github.com/vuejs/language-tools/tree/master/extensions/vscode-typescript-plugin"

    %% Volar - Packages
    VOLAR_VUE_SERVER["@vue/language-server"]
    VOLAR_VUE_TS["@vue/typescript"]
    VOLAR_VUE_CORE["@vue/language-core"]
    VOLAR_VUE_SERVICE["@vue/language-service"]
    VOLAR_PUG_SERVICE["@volar/pug-language-service"]
    VOLAR_TS_SERVICE["@volar/typescript-language-service"]
    VUE_TSC[vue-tsc]
    VUE_COMPONENT_META[vue-component-meta]
    TS_VUE_PLUGIN[typescript-vue-plugin]

    click VOLAR_VUE_SERVER "https://github.com/vuejs/language-tools/tree/master/packages/language-server"
    click VOLAR_VUE_TS "https://github.com/vuejs/language-tools/tree/master/packages/typescript"
    click VOLAR_VUE_CORE "https://github.com/vuejs/language-tools/tree/master/packages/language-core"
    click VOLAR_VUE_SERVICE "https://github.com/vuejs/language-tools/tree/master/packages/language-service"
    click VUE_TSC "https://github.com/vuejs/language-tools/tree/master/packages/tsc"
    click VUE_COMPONENT_META "https://github.com/vuejs/language-tools/tree/master/packages/component-meta"
    click TS_VUE_PLUGIN "https://github.com/vuejs/language-tools/tree/master/packages/typescript-plugin"
    click VOLAR_PUG_SERVICE "https://github.com/vuejs/language-tools/tree/master/packages/pug-language-service"
    click VOLAR_TS_SERVICE "https://github.com/vuejs/language-tools/tree/master/packages/typescript-language-service"

    %% External Packages
    HTML_SERVICE[vscode-html-languageservice]
    CSS_SERVICE[vscode-css-languageservice]
    JSON_SERVICE[vscode-json-languageservice]
    %% TS[typescript]
    VSC_TS[vscode.typescript-language-features]
    VUE_REPL["@vue/repl"]
    MONACO_VOLAR[Kingwl/monaco-volar]
    %% VITE_PLUGIN_CHECKER[fi3ework/vite-plugin-checker]
    %% COMPILE_VUE_SFC[leonzalion/compile-vue-sfc]

    click HTML_SERVICE "https://github.com/microsoft/vscode-html-languageservice"
    click CSS_SERVICE "https://github.com/microsoft/vscode-css-languageservice"
    click JSON_SERVICE "https://github.com/microsoft/vscode-json-languageservice"
    click TS "https://github.com/microsoft/TypeScript"
    click VSC_TS "https://github.com/microsoft/vscode/tree/main/packages/typescript-language-features"
    click VUE_REPL "https://github.com/vuejs/repl"
    click MONACO_VOLAR "https://github.com/Kingwl/monaco-volar"
    %% click VITE_PLUGIN_CHECKER "https://github.com/fi3ework/vite-plugin-checker"
    %% click COMPILE_VUE_SFC "https://github.com/leonzalion/compile-vue-sfc"

    subgraph VUE_CLIENTS[Language Clients]
      direction LR
      VUE_CLIENT_SEMANTIC[Semantic Features]
      VUE_CLIENT_SYNTACTIC[Syntactic Features]
    end

    click VUE_CLIENT_SEMANTIC "https://github.com/vuejs/language-tools/discussions/393#discussioncomment-1213736"
    click VUE_CLIENT_SYNTACTIC "https://github.com/vuejs/language-tools/discussions/393#discussioncomment-1213736"

    subgraph Embedded Language Services
      direction LR
      VOLAR_TS_SERVICE
      VOLAR_PUG_SERVICE
      HTML_SERVICE
      CSS_SERVICE
      JSON_SERVICE
    end

    VSC --> VSC_VUE
    COC --> COC_VUE
    NEO --> NEO_VUE
    SUBLIME --> SUBLIME_VUE
    ATOM --> ATOM_VUE
    EMACS --> EMACS_VUE
    NOVA --> NOVA_VUE
    VIM --> VIM_VUE
    LAPCE --> LAPCE_VUE

    VSC_VUE --> VUE_CLIENTS
    COC_VUE --> VUE_CLIENTS
    NEO_VUE --> VUE_CLIENTS
    SUBLIME_VUE --> VUE_CLIENTS
    ATOM_VUE --> VUE_CLIENTS
    EMACS_VUE --> VUE_CLIENTS
    NOVA_VUE --> VUE_CLIENTS
    VIM_VUE --> VUE_CLIENTS
    LAPCE_VUE --> VUE_CLIENTS

    VUE_CLIENTS -- Language Server Protocol --> VOLAR_VUE_SERVER

    VSC --> VSC_TS
    VSC_TS --> VSC_TSVP
    VSC_TSVP --> TS_VUE_PLUGIN
    VOLAR_VUE_SERVER --> VOLAR_VUE_SERVICE
    VUE_TSC --> VOLAR_VUE_TS
    %% VITE_PLUGIN_CHECKER --> VUE_TSC
    %% COMPILE_VUE_SFC --> VUE_TSC
    TS_VUE_PLUGIN --> VOLAR_VUE_TS

    VUE_REPL --> MONACO_VOLAR
    MONACO_VOLAR --> VOLAR_VUE_SERVICE

    %% VOLAR_VUE_TS --> TS
    VUE_COMPONENT_META --> VOLAR_VUE_CORE
    VOLAR_VUE_TS --> VOLAR_VUE_CORE

    VOLAR_VUE_SERVICE --> VOLAR_VUE_CORE
    VOLAR_VUE_SERVICE --> VOLAR_TS_SERVICE
    VOLAR_VUE_SERVICE --> VOLAR_PUG_SERVICE
    VOLAR_VUE_SERVICE --> HTML_SERVICE
    VOLAR_VUE_SERVICE --> CSS_SERVICE
    VOLAR_VUE_SERVICE --> JSON_SERVICE

Full-time Support by


Boot a fresh environment in milliseconds.