⚡ High-performance Vue language tooling based-on Volar.js
💬 #language-tools on our Discord Server
WebContainer API is here. In 2021 we announced WebContainers, a novel WebAssembly-based operating system which enables Node.js to run entirely inside the browser. Over the last two years, millions of developers have used WebContainers each month as it powers, among others, the StackBlitz editor. |
|||||
| Sponsors | |||||
 |
The Intuitive Vue Framework |
||||
The Progressive JavaScript Framework |
 |
||||
 |
Support us via GitHub Sponsors or Open Collective | ||||
- Vue Language Features
Vue, Vitepress, petite-vue language support extension for VSCode - TypeScript Vue Plugin
VSCode extension to support Vue in TS server - vue-tsc
Type-check and dts build command line tool - vue-component-meta
Component props, events, slots types information extract tool - vite-plugin-vue-component-preview
Vite plugin for support Vue component preview view withVue Language Features
yaegassy/coc-volar ⚡ 🤝
Vue language client for coc.nvim
neovim/nvim-lspconfig ⚡ 🤝
Vue language server configuration for Neovim
[Multiple servers set up tutorial]
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
*
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 buildThe 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.
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"
%% Extrnal 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
