Diagnostics in .vue only appear after saving a *.ts file

[9mm]

I'm trying to set up a Nuxt 3 project with typescript-tools and Volar 2.

typescript-tools is properly attaching to the document because I get popup documentation about types, however... the actual error diagnostics don't appear.

Then out of the blue I happened to modify a user.d.ts file in my project, and when I went back to my .vue file suddenly all the diagnostics appeared:

I'm glad Im getting warmer... this is a great plugin as it's gotten me the closest so far.

Here is my config:

return {
  "pmizio/typescript-tools.nvim",
  dependencies = {
    "nvim-lua/plenary.nvim",
    "neovim/nvim-lspconfig",
  },
  config = function()
    require("typescript-tools").setup({
      filetypes = {
        "javascript",
        "typescript",
        "vue",
      },
      settings = {
        separate_diagnostic_server = true,
        tsserver_max_memory = "auto",
        tsserver_plugins = {
          "@vue/typescript-plugin",
        },
        tsserver_file_preferences = {
          includeInlayParameterNameHints = "all",
          includeCompletionsForModuleExports = true,
          quotePreference = "auto",
        },
        expose_as_code_action = "all",
      },
    })
  end,
}

[9mm]

I notice when I open vue file it only says:

But when I open typescript file it says:

isnt that what filetypes key does? why are they loading differently?

[9mm]

As a side question, how do I pass location to this so I can use global pnpm installed plugin?

I don't really want to make it in the same project, because I have to make the version sync with the volar LSP, according to the docs, and that means everyone in a project should manage their own versions, etc.

        tsserver_plugins = {
          "@vue/typescript-plugin",
        },

[KostkaBrukowa]

Hey! For diagnostics you can check linked PR if it helps. One thing that comes to my mind in second picture from second message: it says tsserver in the bottom right corner which is the name of typescript-language-server language server. Are you sure you don't have this LSP installed? You can run :LspInfo and see if it is the case

[9mm]

I have it installed, because I thought I had to...? In your docs it says "works with TSServer from Mason"

What i do though is leave the tsserver = {} out of my lsp config block, so it basically installs the serve with ensure_installed but i let your plugin start tsserver. does that sound right?

        -- tsserver = {
        --   -- https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#vue-support
        --   init_options = {
        --     plugins = {
        --       {
        --         name = "@vue/typescript-plugin",
        --         location = "/Users/zesty/Library/pnpm/global/5/node_modules/@vue/typescript-plugin",
        --         languages = { "javascript", "typescript", "vue" },
        --       },
        --     },
        --   },
        --   filetypes = {
        --     "javascript",
        --     "typescript",
        --     "vue",
        --   },
        -- },
        volar = {
          filetypes = { "vue" },
        },

[CofCat456]

@9mm try this

volar = {
    init_options = {
        vue = {
            hybridMode = true,
        },
    },
}

[9mm]

Thanks @CofCat456 but i deally i dont want ot use hybrid mode, i want to use the new volar 2.0 approach because that hybrid is being phased out anyway i think, and i believe the functionality of non hybrid mode is better (based on what ive read, not sure if accurate)

right now it works 99%... just have to open a file first

[CofCat456]

When the hybridMode was introduced, I used it with typescript-tools for a while. I felt it was faster and more convenient than the previous takeover mode.

I believe hybridMode is the future direction of Volar and the best choice for Neovim users using Volar.

Personally, I prefer letting typescript-tools handle all the TypeScript.

[KostkaBrukowa]

In my comment I was talking about 'typetcript-language-server' https://github.com/typescript-language-server/typescript-language-server not 'tsserver' which is part of typescript. You should not have 'typescript-language-server' and 'typescript-tools' enabled together because they are both LSP for the same language.

[9mm]

@CofCat456 ah , interesting. thanks.. i will have to look at it again then. i only gleaned that it was just a hack workaround while volar2.0 is working bu tmaybe i misunderstood

Hmm @KostkaBrukowa ... interesting. im quite confused then. what does this mean?

You said installed with mason is allowed but this is the only tsserver inside mason, is the one you said not to use?

[KostkaBrukowa]

Ok, I thought you can install tsserver from mason but you actually cannot. You can install only typescript-language-server. But to clarify:

1. tsserver is app that comes directly from typescript package. It provides all of the intelisense about the project, but it does not support LSP protocol that neovim uses. Therefore you need translator that would translate tsserver to LSP. there are two we are talking about: typescript-tools and typescript-language-server. They are pretty much the same but typescript-tools is pure lua and typescript-language-server is written in TS.
2. The point in readme says Supportstsserverinstalled from [Mason](https://github.com/williamboman/mason.nvim) and I guess its because of this issue: https://github.com/pmizio/typescript-tools.nvim/issues/106 and it basically installs typescript-language-server and uses tsserver from its node_modules. But in order for it to work properly typescript-language-server should not be enabled for typescript files, because then there would be two LSP-s running at the same time. So if you have typescript installed in your project then you shouldn't need to have typescript-language-server installed and use only typescript-tools

[9mm]

Wow... this makes so much more sense now.... thank you. so i can basically uninstall the language-tools, only use typescript-tools, and that will properly use the tsserver from within my package.json right? Thanks for the clarity, great explanation

[9mm]

wow this is amazing, it also fixes all the stupid nuxt errors about missing modules. and it also fixes this above issue...

[9mm]

Actually no -- jumped the gun. doesnt fix the original issue, but i will try the PR you mentioned

[9mm]

@KostkaBrukowa that PR worked! It works amazing now. ... seriously that 1 thing solved like 4 separate issues that were driving me insane. maybe its worth adding note to readme about that, as im new to TS so i just figured that was the tsserver binary.

thanks again

[KostkaBrukowa]

It kind of is in the readme ;)

[9mm]

@KostkaBrukowa yes.. right you are. entirely my own fault. I was referring to the features bullet points where it says supports tsserver. Maybe worth adding an * astericks or something.

Thanks again!

[AzashiroMerume]

Turns out I was using typescript-language-server along with typescript tools too, so i removed it and now got no idea how to make volar work with typescript tools (when i open vue files vue elements now errors): So my typescript tools setup:

require("typescript-tools").setup({
    on_attach = function(client, bufnr)
        local opts = { noremap = true, silent = true, buffer = bufnr }
        vim.keymap.set("n", "gd", vim.lsp.buf.definition, opts)
    end,
    handlers = {},
    filetypes = {
        "javascript",
        "javascriptreact",
        "javascript.jsx",
        "typescript",
        "typescriptreact",
        "typescript.tsx",
        "vue",
    },
    settings = {
        separate_diagnostic_server = false,
        expose_as_code_action = {},
            tsserver_path = "my_path",
        tsserver_plugins = {
            "@styled/typescript-styled-plugin",
            "@vue/typescript-plugin",
        },
        tsserver_max_memory = "auto",
        tsserver_format_options = {},
        tsserver_file_preferences = {
            "javascript",
            "javascriptreact",
            "javascript.jsx",
            "typescript",
            "typescriptreact",
            "typescript.tsx",
            "vue",
        },
        tsserver_locale = "en",
        complete_function_calls = false,
        include_completions_with_insert_text = true,
        code_lens = "off",
        disable_member_code_lens = true,
        jsx_close_tag = {
            enable = false,
            filetypes = { "javascriptreact", "typescriptreact" },
        },
    },
})

lspconfig setup:

lspconfig.volar.setup({
    init_options = {
        vue = {
            hybridMode = false,
        },
    },
})

What am i missing? Quite new to nvim itself. @9mm could u share ur lsp config please

[AzashiroMerume]

Oh, my bad, turns out my tsserver_plugins were missing @vue/language-server && i had to install @vue/typescript-plugin cause i deleted it accidently while removing typescript-language-server, so it should be like this:

tsserver_plugins = {
  "@styled/typescript-styled-plugin",
  "@vue/language-server",
  "@vue/typescript-plugin",
},