Neovim中Vue LSP（Volar 2.0）脚本区域失效及相关问题求助

我近期开始使用vue3框架，作为neovim 10.0用户，配置了基于Mason、lspconfig的LSP工作流，配置代码如下：

local lspconfig = require "lspconfig"
local mason = require "mason"
local mason_lspconfig = require "mason-lspconfig"
local mason_registry = require "mason-registry"

mason.setup {}
mason_lspconfig.setup {
    ensure_installed = {
        "ts_ls",
        "volar",
    },
    handler = {
        function(server)
            lspconfig[server].setup {}
        end,
        volar = function()
            lspconfig.volar.setup {}
        end,
        ts_ls = function()
            local vue_typescript_server_path = mason_registry.get_package("vue-language-server"):get_install_path()
                .. "/node_modules/@vue/language-server"

            lspconfig.ts_ls.setup {
                init_options = {
                    plugins = {
                        {
                            name = "@vue/typescript-plugin",
                            location = vue_typescript_server_path,
                            languages = { "vue", "javascript", "typescript" },
                        },
                    },
                },
                filetypes = {
                    "javascript",
                    "javascript.jsx",
                    "javascriptreact",
                    "typescript",
                    "typescript.tsx",
                    "typescriptreact",
                    "vue",
                },
            }
        end,
    },
}

local servers = {
    "cssls",
    "html",
    "jsonls",
    "marksman",
    "ts_ls", -- typescript-language-server
    "volar", -- vue-language-server
}

for _, lsp in ipairs(servers) do
    local config = {
        on_attach = on_attach,
        on_init = on_init,
        capabilities = capabilities,
    }

    lspconfig[lsp].setup(config)
end

当前LSP在template区域和style区域功能正常，具备补全、提示等特性，但在script setup区域完全失效；同时在父模板中使用导入的子模板时无法预览组件，示例如下：

// 此区域LSP无响应
<script setup lang="ts">
import { ref } from "vue"
import { RouterView } from "vue-router" // 无法预览RouterView

let something = ref("data")
</script>

另外，main.ts文件中导入App.vue时LSP提示错误，但项目可正常编译运行：

import { createApp } from 'vue';
import App from './App.vue'; // Cannot find module './App.vue' or its corresponding type declarations.
const app = createApp(App);

需求 #

1. 让LSP在script区域正常工作
2. 实现导入模板的预览功能

解决方案 #

1. 修复script setup区域LSP失效及.vue导入类型错误 #

你的配置同时启用ts_ls和volar，二者处理Vue文件时会冲突。Volar本身已集成TypeScript支持，无需让ts_ls再处理Vue文件，调整配置如下：

• 修改ts_ls配置，移除filetypes中的vue，交给Volar处理：

ts_ls = function()
    local vue_typescript_server_path = mason_registry.get_package("vue-language-server"):get_install_path()
        .. "/node_modules/@vue/language-server"

    lspconfig.ts_ls.setup {
        init_options = {
            plugins = {
                {
                    name = "@vue/typescript-plugin",
                    location = vue_typescript_server_path,
                    languages = { "vue", "javascript", "typescript" },
                },
            },
        },
        filetypes = {
            "javascript",
            "javascript.jsx",
            "javascriptreact",
            "typescript",
            "typescript.tsx",
            "typescriptreact",
            -- 移除"vue"
        },
    }
end,

• 给Volar添加完整配置，确保它能正确解析script setup：

volar = function()
    lspconfig.volar.setup {
        filetypes = { 'vue' },
        init_options = {
            typescript = {
                tsdk = mason_registry.get_package("typescript-language-server"):get_install_path() .. "/node_modules/typescript/lib"
            },
            languageFeatures = {
                implementation = true,
                references = true,
                definition = true,
                typeDefinition = true,
                callHierarchy = true,
                hover = true,
                rename = true,
                renameFileRefactoring = true,
                signatureHelp = true,
                codeAction = true,
                workspaceSymbol = true,
                completion = {
                    defaultTagNameCase = 'both',
                    defaultAttrNameCase = 'kebabCase',
                    getDocumentNameCasesRequest = true,
                    getDocumentSelectionRequest = true,
                },
            },
        },
        on_attach = on_attach,
        capabilities = capabilities,
    }
end,

• 在项目根目录创建vue-shim.d.ts文件，解决.vue文件导入的类型报错：

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}

同时在tsconfig.json的include数组中添加"./vue-shim.d.ts"，确保TypeScript能识别该文件。

2. 实现组件预览功能 #

组件预览依赖Volar的语言特性，按以下步骤操作：

• 通过Mason更新vue-language-server到最新版本
• 使用Neovim自带的vim.lsp.buf.definition()跳转至组件定义，或搭配telescope.nvim的lsp_definitions功能查看；若需要弹窗预览，可安装lspsaga.nvim这类LSP UI插件，它提供直观的组件预览弹窗。

内容的提问来源于stack exchange，提问作者Abel Maireg