FEATURED · 精选文章

Neovim Vue 配置完整指南:nvim-lspconfig 中三步搭好 vue_ls + vtsls 双服务器

发布时间 / 2026/9/12 18:11:28
来源 / 创域科博编辑部
栏目 / 资讯中心
Neovim Vue 配置完整指南:nvim-lspconfig 中三步搭好 vue_ls + vtsls 双服务器 Neovim Vue 配置完整指南nvim-lspconfig 中三步搭好 vue_ls vtsls 双服务器【免费下载链接】nvim-lspconfigQuickstart configs for Nvim LSP项目地址: https://gitcode.com/GitHub_Trending/nv/nvim-lspconfig在 Neovim 里打开.vue文件光标停在script里却毫无补全这是文件格式和语言服务器不匹配的典型信号Vue 单文件组件一半是 TypeScript、一半是模板单个服务器覆盖不了全部。nvim-lspconfig 现在的做法是两个服务器分工协作——官方vue_ls负责模板与样式部分vtsls负责 TypeScript 部分。本文从这个分工讲起给你一套能直接落地的三步配置。一个 vue_ls 为什么不够v3.0.0 改了什么当前版本的 Vue 支持由vue_ls承担不再依赖早期教程里的 volar。仓库里的 volar.lua 已简化成一行转发代码加一条弃用提示老配置里写的vim.lsp.enable(volar)仍能运行但每次都会触发弃用警告建议直接改写成新名字。真正的变化在语言服务器本体自 v3.0.0 起Vue 语言服务器移除了 takeover mode。过去一个服务器可以接管.vue文件的全部语言功能现在它固定运行在 hybrid mode只管 HTML 与 CSS 这类模板区域的诊断和补全。TypeScript 相关的请求则走转发链路——vue_ls的on_init里注册了tsserver/request处理器遇到 TS 请求就在当前 buffer 里找ts_ls或vtsls客户端转交重试十次仍找不到就直接报错提示缺少 TS 服务器。所以结论很明确只启用vue_ls时.vue文件的script区域是裸的必须再启用一个 TypeScript 服务器官方推荐 vtsls补全、跳转、类型检查才完整。三步搭好 Vue 智能开发环境第一步安装两个服务器。全局装一条 npm 命令即可如果你用 mason.nvim把vue_ls和vtsls加进ensure_installed交给它统一托管下面的手动步骤都可以跳过。npm install -g vue/language-server vtsls/language-server第二步在 Neovim 配置里启用两者两行调用vim.lsp.enable(vue_ls) vim.lsp.enable(vtsls)第三步做桥接。这一步是让 vtsls 知道vue 文件里的 TS 也归我管。核心是在 vtsls 的settings.vtsls.tsserver.globalPlugins里注册vue/typescript-plugin插件的location指向 vue-language-server 包内node_modules/vue/language-server的路径mason 托管时取 mason 安装路径npm 全局安装可用npm root -g定位languages必须显式包含vueconfigNamespace固定为typescript同时给 vtsls 的filetypes追加vue。local vue_plugin { name vue/typescript-plugin, location /path/to/vue-language-server/node_modules/vue/language-server, languages { vue }, -- 必须显式列出只在 filetypes 里加 vue 不够 configNamespace typescript, } vim.lsp.config(vtsls, { settings { vtsls { tsserver { globalPlugins { vue_plugin } } } }, filetypes { typescript, javascript, javascriptreact, typescriptreact, vue }, })如果 Neovim 启动偏慢、而项目里只有少数文件是 Vue可以把上面两行 enable 挪进一个 FileType 自动命令里仅在打开.vue文件时才拉起这两个服务器日常启动开销为零。两种特例Vue 2 老项目与大型 monorepovue_ls 默认只按 Vue 3 处理语法Vue 2 老项目需要两步修正。其一在 vue_ls 配置里把settings.vue.target设为 2vim.lsp.config(vue_ls, { settings { vue { target 2 } }, })其二项目依赖里的vue/compiler-sfc要用 2.x 版本别沿用默认的 3.x否则模板区域的诊断会大面积报语法错误。monorepo 则是 vtsls 的主场它原生支持 monorepo会自动定位到你当前正在编辑的 package 对应的tsconfig.json或jsconfig.json不需要为每个子包起一个服务器实例内存占用保持在单实例水平。建议把各子包的 TypeScript 版本统一并放在 workspace 根目录二进制位置只解析一次。另外注意官方提示vtsls和ts_ls不建议同时启用选一个即可。智能提示不生效用症状反查原因出了问题先别急着重装对照下面三种最常见的形态反查基本能覆盖九成故障症状原因解决.vue文件里 TS 无补全纯.ts文件正常globalPlugins 里languages漏了vue在 vue 插件定义中补上vue重启 Neovim 后重新加载 buffer服务器起不来:LspInfo里看不到客户端npm 包未安装或二进制不在 PATH用vim.fn.exepath(vue-language-server)与vim.fn.exepath(vtsls)检查返回为空则重新执行安装命令Vue 2 项目模板区一片红线未指定 targetvue_ls 按 3.x 编译器解析设置settings.vue.target 2并把vue/compiler-sfc降到 2.x收尾Neovim 的 Vue 支持现在就是这套格局vue_ls 管模板、vtsls 管类型靠 typescript-plugin 串起来三步配置加上 Vue 2 的 target 设置就是日常要掌握的全部内容。更多参数与默认值可直接翻 doc/configs.md两个服务器的完整实现分别在 vue_ls.lua 和 vtsls.lua值得各花两分钟读一遍。【免费下载链接】nvim-lspconfigQuickstart configs for Nvim LSP项目地址: https://gitcode.com/GitHub_Trending/nv/nvim-lspconfig创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED — 相关阅读

相关资讯

LATEST — 最新资讯

最新发布

TODAY — 本日精选

新闻

WEEKLY — 本周精选

新闻

MONTHLY — 本月精选

新闻