Volar

⚡ Explore high-performance tooling for Vue

Vue.js

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 with Vue Language Features

Alpine.js

Alpine Language Features (Experimental)
Alpine.js language support extension for VSCode

Common

volar-plugins
Common plugins to changes language featrues behavior for Vue Language Features and Alpine Language Features extensions

Discord: https://discord.gg/5bnSSSSBbK

IDE Supports by Community

Vue.js

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

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

Alpine.js

yaegassy/coc-volar-alpinejs ⚡ 🤝
Alpine.js language client for coc.nvim

* ⚡ 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 setup your local development environment.

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

git clone https://github.com/johnsoncodehk/volar.git
cd volar
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 is here: https://docs.github.com/en/get-started/quickstart/contributing-to-projects

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]

	%% 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]

	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"

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

	click VSC_VUE "https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-vue-language-features"
	click VSC_TSVP "https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-typescript-vue-plugin"

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

	click VOLAR_VUE_SERVER "https://github.com/johnsoncodehk/volar/tree/master/packages/vue-language-server"
	click VOLAR_VUE_TS "https://github.com/johnsoncodehk/volar/tree/master/packages/vue-typescript"
	click VOLAR_VUE_CORE "https://github.com/johnsoncodehk/volar/tree/master/packages/vue-language-core"
	click VOLAR_VUE_CG "https://github.com/johnsoncodehk/volar/tree/master/packages/vue-code-gen"
	click VOLAR_VUE_SERVICE "https://github.com/johnsoncodehk/volar/tree/master/packages/vue-language-service"
	click VOLAR_PUG_SERVICE "https://github.com/johnsoncodehk/volar/tree/master/packages/pug-language-service"
	click VOLAR_TS_SERVICE "https://github.com/johnsoncodehk/volar/tree/master/packages/typescript-language-service"
	click VOLAR_TS_FASTER "https://github.com/johnsoncodehk/volar/tree/master/packages/typescript-faster"
	click VOLAR_PREVIEW "https://github.com/johnsoncodehk/volar/tree/master/packages/preview"
	click VUE_TSC "https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc"
	click VUE_COMPONENT_META "https://github.com/johnsoncodehk/volar/tree/master/packages/vue-component-meta"
	click TS_VUE_PLUGIN "https://github.com/johnsoncodehk/volar/tree/master/packages/typescript-vue-plugin"

	%% 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/extensions/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_API[Language Features]
	  VUE_CLIENT_DOC[Second Language Features]
	  VUE_CLIENT_HTML[Document Features]
	end

	click VUE_CLIENT_API "https://github.com/johnsoncodehk/volar/discussions/393#discussioncomment-1213736"
	click VUE_CLIENT_DOC "https://github.com/johnsoncodehk/volar/discussions/393#discussioncomment-1213736"
	click VUE_CLIENT_HTML "https://github.com/johnsoncodehk/volar/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

	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

	%% VSC_VUE --> VOLAR_PREVIEW
	%% COC_VUE --> VOLAR_PREVIEW

	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

	%% TS_VUE_PLUGIN --> VOLAR_TS_FASTER
	%% VOLAR_VUE_SERVICE --> VOLAR_TS_FASTER

	%% 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

	VOLAR_VUE_CORE --> VOLAR_VUE_CG

Name		Name	Last commit message	Last commit date
Latest commit History 2,726 Commits
.github		.github
.vscode		.vscode
docs		docs
extensions		extensions
packages		packages
.gitignore		.gitignore
.npmrc		.npmrc
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
lerna.json		lerna.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.base.json		tsconfig.base.json
tsconfig.build.json		tsconfig.build.json
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts

License

jb-qian/volar

Folders and files

Latest commit

History

Repository files navigation

Volar

Vue.js

Alpine.js

Common

IDE Supports by Community

Vue.js

Alpine.js

Contribution Guide

High Level System Overview

Sponsors

About

Resources

License

Stars

Watchers

Forks

Languages