From 751a78e816d2a7a84879d424e0810e43827f54a7 Mon Sep 17 00:00:00 2001 From: Ray Guo <33137074+RayGuo-ergou@users.noreply.github.com> Date: Thu, 21 Mar 2024 18:16:38 +1100 Subject: [PATCH 1/8] docs: update readme with neovim lspconfig setup --- README.md | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 92 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3657393736..07128881c3 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,98 @@ [neovim/nvim-lspconfig](https://github.com/neovim/nvim-lspconfig) ⚡ 🤝 \ *Vue language server configuration for Neovim* \ -[[Volar 2.0 version set up tutorial](https://github.com/vuejs/language-tools/issues/3925)] +
+ How to configure vue language server with neovim and lsp? + +Since version `2.0.0`, take over mode has been removed. You have to run `@vue/language-server` alongside a TypeScript server that is running `@vue/typescript-plugin`. Here is a minimal configuration for Neovim's LSP to make the language server work after upgrading to version `2.0.0`. + + ```lua +local mason_registry = require('mason-registry') +local ts_plugin_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server/node_modules/@vue/typescript-plugin' + +local servers = { + tsserver = { + init_options = { + plugins = { + { + name = '@vue/typescript-plugin', + location = ts_plugin_path, + -- If .vue file cannot be recognized in either js or ts file try to add `typescript` and `javascript` in languages table. + languages = { 'vue' }, + }, + }, + }, + filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, + }, + volar = {}, +} + +local mason_lspconfig = require('mason-lspconfig') + +-- Auto cmd (LspAttach) to setup keybind, codelens, and formatting stuff +-- I assume everyone should have this configured already but just for reference +-- @see https://github.com/nvim-lua/kickstart.nvim/blob/65a5ac404b56c4718d79f65ac642e19e89346eda/init.lua#L451-L522 +Util.lsp.lsp_autocmd() + +local capabilities = vim.lsp.protocol.make_client_capabilities() +-- If you need cmp +capabilities = vim.tbl_deep_extend('force', capabilities, require('cmp_nvim_lsp').default_capabilities()) +mason_lspconfig.setup({ + ensure_installed = vim.tbl_keys(servers), + handlers = { + function(server_name) + local server = servers[server_name] or {} + server.capabilities = vim.tbl_deep_extend('force', {}, capabilities, server.capabilities or {}) + require('lspconfig')[server_name].setup(server) + end, + }, +}) + ``` + +However, after version `2.0.7`, you can explicitly disable hybrid mode therefore there's two more options to config vue-language-server. + +__Make sure you have typescript installed globally or pass the location to volar__ + +```lua +-- If you would like to keep only vue-language-server for all vue, typescript and javascript files you can have the configuration simliar with take over mode +local servers = { + -- tsserver = {}, + volar = { + filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, + init_options = { + vue = { + hybridMode = false, + }, + }, + }, +} +``` + +```lua +-- If you only want to use vue-language-server for vue files and tsserver for typescript and javascript files +local servers = { + tsserver = { + init_options = { + plugins = { + { + name = '@vue/typescript-plugin', + location = ts_plugin_path, + languages = { 'vue' }, + }, + }, + }, + }, + volar = { + init_options = { + vue = { + hybridMode = false, + }, + }, + }, +} +``` + +
[mattn/vim-lsp-settings](https://github.com/mattn/vim-lsp-settings) ⚡ \ *Vue language server auto configuration for vim-lsp* From da22b5a0151ad82daddd4c1d3e74cc5a6af08f69 Mon Sep 17 00:00:00 2001 From: Ray Guo <33137074+RayGuo-ergou@users.noreply.github.com> Date: Thu, 21 Mar 2024 18:25:51 +1100 Subject: [PATCH 2/8] docs: add italic to hint --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 07128881c3..18cc923916 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,8 @@ *Vue language client for coc.nvim* [neovim/nvim-lspconfig](https://github.com/neovim/nvim-lspconfig) ⚡ 🤝 \ -*Vue language server configuration for Neovim* \ +*Vue language server configuration for Neovim* +
How to configure vue language server with neovim and lsp? @@ -78,7 +79,7 @@ mason_lspconfig.setup({ However, after version `2.0.7`, you can explicitly disable hybrid mode therefore there's two more options to config vue-language-server. -__Make sure you have typescript installed globally or pass the location to volar__ +*Make sure you have typescript installed globally or pass the location to volar* ```lua -- If you would like to keep only vue-language-server for all vue, typescript and javascript files you can have the configuration simliar with take over mode From f7e88e1ab73f7f86dab90f502c4a494d478a0014 Mon Sep 17 00:00:00 2001 From: Ray Guo <33137074+RayGuo-ergou@users.noreply.github.com> Date: Thu, 21 Mar 2024 18:56:58 +1100 Subject: [PATCH 3/8] docs: nvim configured with lspconfig and drop mason As not everyone is using mason, it's better to use plain lspconfig --- README.md | 100 +++++++++++++++++++++++------------------------------- 1 file changed, 43 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index 18cc923916..c070d6ba5c 100644 --- a/README.md +++ b/README.md @@ -35,62 +35,48 @@ Since version `2.0.0`, take over mode has been removed. You have to run `@vue/language-server` alongside a TypeScript server that is running `@vue/typescript-plugin`. Here is a minimal configuration for Neovim's LSP to make the language server work after upgrading to version `2.0.0`. ```lua -local mason_registry = require('mason-registry') -local ts_plugin_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server/node_modules/@vue/typescript-plugin' - -local servers = { - tsserver = { - init_options = { - plugins = { - { - name = '@vue/typescript-plugin', - location = ts_plugin_path, - -- If .vue file cannot be recognized in either js or ts file try to add `typescript` and `javascript` in languages table. - languages = { 'vue' }, - }, +-- If you are using mason.nvim, you can get the ts_plugin_path like this +-- local mason_registry = require('mason-registry') +-- local ts_plugin_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server/node_modules/@vue/typescript-plugin' + +local ts_plugin_path = '/path/to/@vue/typescript-plugin' + +local lspconfig = require('lspconfig') + +lspconfig.tsserver.setup { + init_options = { + plugins = { + { + name = '@vue/typescript-plugin', + location = ts_plugin_path, + languages = { 'vue' }, }, }, - filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, }, - volar = {}, + filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, } -local mason_lspconfig = require('mason-lspconfig') +lspconfig.volar.setup {} -- Auto cmd (LspAttach) to setup keybind, codelens, and formatting stuff -- I assume everyone should have this configured already but just for reference -- @see https://github.com/nvim-lua/kickstart.nvim/blob/65a5ac404b56c4718d79f65ac642e19e89346eda/init.lua#L451-L522 -Util.lsp.lsp_autocmd() - -local capabilities = vim.lsp.protocol.make_client_capabilities() --- If you need cmp -capabilities = vim.tbl_deep_extend('force', capabilities, require('cmp_nvim_lsp').default_capabilities()) -mason_lspconfig.setup({ - ensure_installed = vim.tbl_keys(servers), - handlers = { - function(server_name) - local server = servers[server_name] or {} - server.capabilities = vim.tbl_deep_extend('force', {}, capabilities, server.capabilities or {}) - require('lspconfig')[server_name].setup(server) - end, - }, -}) ``` - -However, after version `2.0.7`, you can explicitly disable hybrid mode therefore there's two more options to config vue-language-server. +configuration for 2.0.7 or newer. (You can still use configuration above, `2.0.7` gives you more options) *Make sure you have typescript installed globally or pass the location to volar* ```lua -- If you would like to keep only vue-language-server for all vue, typescript and javascript files you can have the configuration simliar with take over mode -local servers = { - -- tsserver = {}, - volar = { - filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, - init_options = { - vue = { - hybridMode = false, - }, +local lspconfig = require('lspconfig') + +-- lspconfig.tsserver.setup {} +lspconfig.volar.setup { + filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, + init_options = { + vue = { + -- Turn the hybrid mode on so you do not need to run tsserver + hybridMode = true, }, }, } @@ -98,26 +84,26 @@ local servers = { ```lua -- If you only want to use vue-language-server for vue files and tsserver for typescript and javascript files -local servers = { - tsserver = { - init_options = { - plugins = { - { - name = '@vue/typescript-plugin', - location = ts_plugin_path, - languages = { 'vue' }, - }, - }, +local lspconfig = require('lspconfig') + +lspconfig.tsserver.setup {} +init_options = { + plugins = { + { + name = '@vue/typescript-plugin', + location = '/path/to/@vue/typescript-plugin', + languages = { 'vue' }, }, }, - volar = { - init_options = { - vue = { - hybridMode = false, - }, +}, + +lspconfig.volar.setup { + init_options = { + vue = { + hybridMode = false, }, }, -} +}, ```
From 40617793c981afe7b5ee092597561c64d23d5125 Mon Sep 17 00:00:00 2001 From: Ray Guo <33137074+RayGuo-ergou@users.noreply.github.com> Date: Thu, 21 Mar 2024 19:00:43 +1100 Subject: [PATCH 4/8] docs: indent of code block --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c070d6ba5c..6f9c70bdc6 100644 --- a/README.md +++ b/README.md @@ -47,9 +47,9 @@ lspconfig.tsserver.setup { init_options = { plugins = { { - name = '@vue/typescript-plugin', - location = ts_plugin_path, - languages = { 'vue' }, + name = '@vue/typescript-plugin', + location = ts_plugin_path, + languages = { 'vue' }, }, }, }, From 53d45c159d48b74a763f0401151620eb161bf8d9 Mon Sep 17 00:00:00 2001 From: Ray Guo <33137074+RayGuo-ergou@users.noreply.github.com> Date: Thu, 21 Mar 2024 19:19:25 +1100 Subject: [PATCH 5/8] docs: nvim configuration tweak --- README.md | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 6f9c70bdc6..ebb3afef87 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,9 @@
How to configure vue language server with neovim and lsp? -Since version `2.0.0`, take over mode has been removed. You have to run `@vue/language-server` alongside a TypeScript server that is running `@vue/typescript-plugin`. Here is a minimal configuration for Neovim's LSP to make the language server work after upgrading to version `2.0.0`. +## Configuration for versions: `^2.0.0` + +Note: take over mode has been removed. You have to run `@vue/language-server` alongside a TypeScript server that is running `@vue/typescript-plugin`. Here is a minimal configuration for Neovim's LSP to make the language server work after upgrading to version `2.0.0`. ```lua -- If you are using mason.nvim, you can get the ts_plugin_path like this @@ -62,12 +64,12 @@ lspconfig.volar.setup {} -- I assume everyone should have this configured already but just for reference -- @see https://github.com/nvim-lua/kickstart.nvim/blob/65a5ac404b56c4718d79f65ac642e19e89346eda/init.lua#L451-L522 ``` -configuration for 2.0.7 or newer. (You can still use configuration above, `2.0.7` gives you more options) +### Hybrid mode(similar to takeover mode) configuration (Requires `@vue/language-server` version `^2.0.7`) *Make sure you have typescript installed globally or pass the location to volar* +Use `hybridMode` to enable full typescript functionality in all `.{vue,js,ts,tsx,jsx}` files. If `hybridMode` is set to `true` `Volar` will run embedded `tsserver` therefore there is no need to run it separately. ```lua --- If you would like to keep only vue-language-server for all vue, typescript and javascript files you can have the configuration simliar with take over mode local lspconfig = require('lspconfig') -- lspconfig.tsserver.setup {} @@ -75,27 +77,29 @@ lspconfig.volar.setup { filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, init_options = { vue = { - -- Turn the hybrid mode on so you do not need to run tsserver + -- `hybridMode` provides full typescript functionality. + -- If `hybridMode` is set to `true` `Volar` will run embedded `tsserver` therefore there is no need to run it separately. + --- @see https://github.com/vuejs/language-tools/pull/4119 hybridMode = true, }, }, } ``` +Use only `volar` for `.vue` files and `tsserver` for `.ts` and `.js` files. ```lua --- If you only want to use vue-language-server for vue files and tsserver for typescript and javascript files local lspconfig = require('lspconfig') -lspconfig.tsserver.setup {} -init_options = { - plugins = { - { - name = '@vue/typescript-plugin', - location = '/path/to/@vue/typescript-plugin', - languages = { 'vue' }, +lspconfig.tsserver.setup { + init_options = { + plugins = { + { + name = '@vue/typescript-plugin', + location = '/path/to/@vue/typescript-plugin', + languages = { 'vue' }, + }, }, }, -}, lspconfig.volar.setup { init_options = { From 10d15b00c510cc6d16523cacf64ec5b0303862b5 Mon Sep 17 00:00:00 2001 From: Ray Guo <33137074+RayGuo-ergou@users.noreply.github.com> Date: Thu, 21 Mar 2024 19:24:59 +1100 Subject: [PATCH 6/8] docs: add hybridMode default value to README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index ebb3afef87..88eaca6e59 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,7 @@ lspconfig.volar.setup { vue = { -- `hybridMode` provides full typescript functionality. -- If `hybridMode` is set to `true` `Volar` will run embedded `tsserver` therefore there is no need to run it separately. + -- `hybridMode` default to be `true` if not set. --- @see https://github.com/vuejs/language-tools/pull/4119 hybridMode = true, }, From cf67f5775438dd0b8c367b54c7702063c36405d2 Mon Sep 17 00:00:00 2001 From: Ray Guo <33137074+RayGuo-ergou@users.noreply.github.com> Date: Thu, 21 Mar 2024 20:02:21 +1100 Subject: [PATCH 7/8] docs: update readme for nvim lsp --- README.md | 38 ++++++++++++++++++-------------------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 88eaca6e59..295eb990b2 100644 --- a/README.md +++ b/README.md @@ -32,16 +32,16 @@
How to configure vue language server with neovim and lsp? -## Configuration for versions: `^2.0.0` +### Hybrid mode configuration (Requires `@vue/language-server` version `^2.0.0`) -Note: take over mode has been removed. You have to run `@vue/language-server` alongside a TypeScript server that is running `@vue/typescript-plugin`. Here is a minimal configuration for Neovim's LSP to make the language server work after upgrading to 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 template section. 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 +```lua -- If you are using mason.nvim, you can get the ts_plugin_path like this -- local mason_registry = require('mason-registry') --- local ts_plugin_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server/node_modules/@vue/typescript-plugin' +-- local vue_language_server_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server' -local ts_plugin_path = '/path/to/@vue/typescript-plugin' +local vue_language_server_path = '/path/to/@vue/language-server' local lspconfig = require('lspconfig') @@ -50,7 +50,7 @@ lspconfig.tsserver.setup { plugins = { { name = '@vue/typescript-plugin', - location = ts_plugin_path, + location = vue_language_server_path, languages = { 'vue' }, }, }, @@ -58,36 +58,34 @@ lspconfig.tsserver.setup { 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`) --- Auto cmd (LspAttach) to setup keybind, codelens, and formatting stuff --- I assume everyone should have this configured already but just for reference --- @see https://github.com/nvim-lua/kickstart.nvim/blob/65a5ac404b56c4718d79f65ac642e19e89346eda/init.lua#L451-L522 - ``` -### 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 `hybridMode` to enable full typescript functionality in all `.{vue,js,ts,tsx,jsx}` files. If `hybridMode` is set to `true` `Volar` will run embedded `tsserver` therefore there is no need to run it separately. +Use volar for all `.{vue,js,ts,tsx,jsx}` files. ```lua local lspconfig = require('lspconfig') --- lspconfig.tsserver.setup {} +-- lspconfig.tsserver.setup {} lspconfig.volar.setup { filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' }, init_options = { vue = { - -- `hybridMode` provides full typescript functionality. - -- If `hybridMode` is set to `true` `Volar` will run embedded `tsserver` therefore there is no need to run it separately. - -- `hybridMode` default to be `true` if not set. - --- @see https://github.com/vuejs/language-tools/pull/4119 - hybridMode = true, + hybridMode = false, }, }, } ``` -Use only `volar` for `.vue` files and `tsserver` for `.ts` and `.js` files. +Use `volar` for only `.vue` files and `tsserver` for `.ts` and `.js` files. ```lua local lspconfig = require('lspconfig') @@ -96,7 +94,7 @@ lspconfig.tsserver.setup { plugins = { { name = '@vue/typescript-plugin', - location = '/path/to/@vue/typescript-plugin', + location = '/path/to/@vue/language-server', languages = { 'vue' }, }, }, From a44f3b2ee635de5f4f242d3d6a1dfa3718f375d4 Mon Sep 17 00:00:00 2001 From: Ray Guo <33137074+RayGuo-ergou@users.noreply.github.com> Date: Thu, 21 Mar 2024 20:05:41 +1100 Subject: [PATCH 8/8] docs: readme nvim lsp tweak --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 295eb990b2..12d55b132c 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ ### 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 template section. 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`. +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