Neovim Vue 语言服务器配置一次到位vue_ls vtsls 协同实战指南【免费下载链接】nvim-lspconfigQuickstart configs for Nvim LSP项目地址: https://gitcode.com/GitHub_Trending/nv/nvim-lspconfig打开一个.vue文件模板标签补全都正常唯独script setup里的 TS 类型提示完全没反应——这是 Neovim 只启用了 vue_ls、没接上 vtsls 时的典型表现。本文面向有基本 Neovim 使用经验的读者基于 nvim-lspconfig 把这套 Vue 语言服务器配置一次配好并覆盖 Vue 2 兼容与大项目提速两个特殊场景。Neovim Vue LSP 的两个引擎vue_ls 与 vtsls 各管什么两者的分工很明确vue_lsvue/language-server负责.vue单文件组件的结构解析管模板、HTML 与 CSS 部分vtslsvtsls/language-server负责 TypeScript 类型管script里的补全、跳转与诊断。关键背景从 Vue 语言服务器 v3.0.0 起takeover mode接管模式被移除vue_ls 转为混合模式只独占 CSS/HTML 部分TS 请求必须转发给 vtsls 处理。nvim-lspconfig 的on_init已内置了这条转发链路所以两个服务器必须同时启用。早期的 Volar 是 vue-language-server 的前身nvim-lspconfig 现已统一为官方vue_ls配置旧的volar写法不必再沿用。建议配图位置vue_ls 与 vtsls 请求转发关系示意图16:9横版安装与最小配置两行启用 vue_ls 和 vtsls先用一条命令装好两个语言服务器用 mason.nvim 的话可以跳过全局安装后面第四节再提npm install -g vue/language-server vtsls/language-server然后在你的配置里启用两个服务器这就是最小可运行片段vim.lsp.enable(vue_ls) vim.lsp.enable(vtsls)保存后重启 Nvim打开.vue文件模板结构补全此时应该已经生效但 TS 类型还差一步。让 TypeScript 补全在 .vue 里生效接上 globalPlugins原理vtsls 底层是 tsservertsserver 不认识.vue文件通过globalPlugins让它在启动时加载vue/typescript-plugin由插件接管.vue虚拟代码的类型逻辑。核心片段如下local vue_language_server_path vim.fn.stdpath(data) .. /mason/packages/vue-language-server/node_modules/vue/language-server local vue_plugin { name vue/typescript-plugin, location vue_language_server_path, -- 必填指向 vue/language-server 所在目录 languages { vue }, -- 必须显式包含 vue漏掉则 TS 提示失效 configNamespace typescript, } vim.lsp.config(vtsls, { settings { vtsls { tsserver { globalPlugins { vue_plugin } } } }, filetypes { typescript, javascript, javascriptreact, typescriptreact, vue }, })三个注意点location必须写。若插件装在node_modules里值可以是任意有效路径languages必须包含vue即使filetypes里已经写了vue也不例外filetypes需额外扩展vue否则 vtsls 不会 attach 到.vue缓冲区。建议配图位置配置生效后 .vue 文件内 TS 类型提示的编辑器截图16:9 或 4:3特殊场景Vue 2 兼容与大项目提速Vue 2 兼容vue_ls 默认只支持 Vue 3 项目。Vue 2 项目需要在配置里声明target 2vim.lsp.config(vue_ls, { settings { vue { target 2, -- 声明为 Vue 2 项目 }, }, })同时确认项目内vue/compiler-sfc的版本与target匹配否则会出现语法解析报错。大项目提速 ⚡大 monorepo 里不必让两个服务器随 Nvim 启动即拉起用FileType按需加载即可。另外建议用 mason.nvim 统一管理安装ensure_installed { vue_ls, vtsls }这样前面location里的 mason 路径才能对上。注意不要同时启用ts_ls和vtsls两者会互相干扰。vim.api.nvim_create_autocmd(FileType, { pattern { vue, typescript, javascript }, callback function() vim.lsp.enable({ vue_ls, vtsls }) end, })排错速查vue_ls vtsls 协同的三个高频问题 症状常见原因处理.vue里 TS 无智能提示globalPlugins中languages漏了vue给vue_plugin补上languages { vue }语言服务器起不来Node 环境或 npm 全局包缺失用vim.fn.exepath(vue-language-server)、vim.fn.exepath(vtsls)检查可执行文件是否可找到Vue 2 项目报语法错target与vue/compiler-sfc版本不匹配设target 2并装对应版本的vue/compiler-sfc如果 Nvim 里弹出了 Could not findts_ls,vtsls, ortypescript-toolslsp client required byvue_ls. 的报错说明 vue_ls 已启动但找不到 TS 客户端回到第一节确认vim.lsp.enable(vtsls)是否生效即可。延伸阅读doc/configs.mdnvim-lspconfig 全部服务器配置的完整索引可按需查其他语言服务器lsp/vue_ls.luavue_ls 配置源码重点看on_init中 tsserver 请求转发给 vtsls 的实现lsp/vtsls.luavtsls 配置源码包含 monorepo 根目录识别与 Vue 插件的完整示例。配置跑通之后script setup里的类型提示、跳转和重构就都归 vtsls 管模板部分归 vue_ls 管两个引擎各就各位。【免费下载链接】nvim-lspconfigQuickstart configs for Nvim LSP项目地址: https://gitcode.com/GitHub_Trending/nv/nvim-lspconfig创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考