⚡ High-performance Vue language tooling based-on Volar.js
💬 #language-tools on our Discord Server
Vue Language Features
@vue/language-server
@vue/typescript-plugin
yaegassy/coc-volar ⚡ 🤝 🅿️
Vue language client for coc.nvim
neovim/nvim-lspconfig ⚡ 🤝
Vue language server configuration for Neovim
@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
.
For nvim-lspconfig versions below v1.0.0 use tsserver instead of ts_ls, e.g.
lspconfig.ts_ls.setup
-- If you are using mason.nvim, you can get the ts_plugin_path like this
-- For Mason v1,
-- 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'
-- For Mason v2,
-- local vue_language_server_path = vim.fn.expand '$MASON/packages' .. '/vue-language-server' .. '/node_modules/@vue/language-server'
-- or even
-- local vue_language_server_path = vim.fn.stdpath('data') .. "/mason/packages/vue-language-server/node_modules/@vue/language-server"
local vue_language_server_path = '/path/to/@vue/language-server'
local lspconfig = require('lspconfig')
lspconfig.ts_ls.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.vue_ls.setup {}
@vue/language-server
version ^2.0.7
)Note: If hybridMode
is set to false
Volar
will run embedded ts_ls
therefore there is no need to run it separately.
For more information see #4119
Make sure you have typescript installed globally or pass the location to volar
Use volar for all .{vue,js,ts,tsx,jsx}
files.
local lspconfig = require('lspconfig')
-- lspconfig.ts_ls.setup {}
lspconfig.volar.setup {
filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
init_options = {
vue = {
hybridMode = false,
},
},
}
Use volar
for only .vue
files and ts_ls
for .ts
and .js
files.
local lspconfig = require('lspconfig')
lspconfig.ts_ls.setup {
init_options = {
plugins = {
{
name = '@vue/typescript-plugin',
location = '/path/to/@vue/language-server',
languages = { 'vue' },
},
},
},
}
lspconfig.volar.setup {
init_options = {
vue = {
hybridMode = false,
},
},
}
Check out this discussion
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
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.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。