Integrating with volar 2

[kmoschcau]

This commit in nvim-lspconfig mentions that vue integration is now done via a tsserver plugin instead of using volar in take-over-mode. I think I got that working with typescript-tools.nvim, by installing @vue/typescript-plugin globally and adding this to my setup:

require("typescript-tools").setup {
  filetypes = {
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",

    "vue", -- This needed to be added.
  },
  settings = {
    tsserver_plugins = {
      -- Seemingly this is enough, no name, location or languages needed.
      "@vue/typescript-plugin",
    },
  },
}

From what I can tell I think I go it working, but I am running into this problem as well. It seems to only happen in vue files, so it might just as well be volar, that's misbehaving and not typescript-tools.

Is there anything else we need to do for this setup? Also it might be good to add this setup to typescript-tools.nvim's README once vue integration fully works.

[chaozwn]

This commit in nvim-lspconfig mentions that vue integration is now done via a tsserver plugin instead of using volar in take-over-mode. I think I got that working with typescript-tools.nvim, by installing @vue/typescript-plugin globally and adding this to my setup:

require("typescript-tools").setup {
  filetypes = {
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",

    "vue", -- This needed to be added.
  },
  settings = {
    tsserver_plugins = {
      -- Seemingly this is enough, no name, location or languages needed.
      "@vue/typescript-plugin",
    },
  },
}

From what I can tell I think I go it working, but I am running into this problem as well. It seems to only happen in vue files, so it might just as well be volar, that's misbehaving and not typescript-tools.

Is there anything else we need to do for this setup? Also it might be good to add this setup to typescript-tools.nvim's README once vue integration fully works.

I am using the same configuration as you.but after create a vue project with yarn create vite, i found some mistakes.

[ilyaliao]

This commit in nvim-lspconfig mentions that vue integration is now done via a tsserver plugin instead of using volar in take-over-mode. I think I got that working with typescript-tools.nvim, by installing @vue/typescript-plugin globally and adding this to my setup:

require("typescript-tools").setup {
  filetypes = {
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",

    "vue", -- This needed to be added.
  },
  settings = {
    tsserver_plugins = {
      -- Seemingly this is enough, no name, location or languages needed.
      "@vue/typescript-plugin",
    },
  },
}

From what I can tell I think I go it working, but I am running into this problem as well. It seems to only happen in vue files, so it might just as well be volar, that's misbehaving and not typescript-tools. Is there anything else we need to do for this setup? Also it might be good to add this setup to typescript-tools.nvim's README once vue integration fully works.

I am using the same configuration as you.but after create a vue project with yarn create vite, i found some mistakes.

Same problem.

I plan to use tsserver to observe whether the issue occurs in typescript-tools.

[chaozwn]

link: https://github.com/pmizio/typescript-tools.nvim/issues/250

[catgoose]

You can now use takeover mode again in volar v2

[chaozwn]

You can now use takeover mode again in volar v2

If you could tell us the method, we would be very grateful.

[ilyaliao]

現在您可以在 volar v2 中再次使用接管模式

如果您能告訴我們方法，我們將不勝感激。

volar = {
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
  init_options = {
    vue = {
      hybridMode = false,
    },
  },
 },

But I still hope this issue can be resolved. I prefer a hybridMode.

[chaozwn]

現在您可以在 volar v2 中再次使用接管模式

如果您能告訴我們方法，我們將不勝感激。

volar = {
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
  init_options = {
    vue = {
      hybridMode = false,
    },
  },
 },

But I still hope this issue can be resolved. I prefer a hybridMode.

Does this mean we need to give up the typescript-tools.nvim plugin and use volar exclusively?

[chaozwn]

Or does it mean that typescript-tools works only with TypeScript files, while vue files are handled by volar?

[ilyaliao]

Or does it mean that typescript-tools works only with TypeScript files, while vue files are handled by volar?

Turning off hybridMode means reverting to the old version 1.8 mode, where takeover mode needs to be enabled for Volar to handle TS and Vue files.

Re-importing the TS server is due to some unresolved compatibility issues. Perhaps for now, discontinuing hybridMode can lead to a better development experience, but hybridMode is what Volar aims for in the future.

I prefer using tsserver or typescript-tools + Volar for development.

[catgoose]

Or does it mean that typescript-tools works only with TypeScript files, while vue files are handled by volar?

Turning off hybridMode means reverting to the old version 1.8 mode, where takeover mode needs to be enabled for Volar to handle TS and Vue files.

Re-importing the TS server is due to some unresolved compatibility issues. Perhaps for now, discontinuing hybridMode can lead to a better development experience, but hybridMode is what Volar aims for in the future.

I prefer using tsserver or typescript-tools + Volar for development.

I would prefer to use typescript-tools as well, but when I use hybridMode with typescript-tools I have the issue described here:

https://github.com/pmizio/typescript-tools.nvim/issues/250

[mcchrish]

You can temporarily disable semantic token for the client until it's fixed.

client.server_capabilities.semanticTokensProvider = false

[catgoose]

You can temporarily disable semantic token for the client until it's fixed.

client.server_capabilities.semanticTokensProvider = false

When I do that I get no tsserver diagnostic:

[mcchrish]

@catgoose you can try out vtsls if you don't mind changing a tool. https://github.com/yioneko/vtsls/issues/148#issuecomment-2015051938

[catgoose]

@catgoose you can try out vtsls if you don't mind changing a tool. yioneko/vtsls#148 (comment)

Thanks I will try it out!

[KostkaBrukowa]

Hey! I've fixed semantic tokens issue. Is there anything else that is wrong with with vue? You can check out linked PR

[chaozwn]

Hey! I've fixed semantic tokens issue. Is there anything else that is wrong with with vue? You can check out linked PR

maybe i can try it.

[9mm]

I'm new to typescript (but not neovim/lsps, etc)... What exactly do I have to do to get this working with a fresh nuxt 3 project?

This 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 = {
        tsserver_plugins = {
          "@vue/typescript-plugin",
        },
        separate_diagnostic_server = true,
        publish_diagnostic_on = "insert_leave",
      },
    })
  end,
}

I can see popups if I do K to view info

But do I have to do anything to show errors?

Right now they show in Nuxt 3 devtools in Chrome undervue-tsc headings (like this screenshot below), but they dont show in my editor as LSP warnings/errors

[Drew-Daniels]

@9mm You shouldn't need to, here's my config. I've also installed @vue/typescript-plugin globally with npm and volar with mason.nvim & mason-lspconfig.nvim.

require("mason-lspconfig").setup({
	ensure_installed = {
                -- ...
		"volar",
                -- ...
	},
})

local capabilities = require("cmp_nvim_lsp").default_capabilities()
local lspconfig = require("lspconfig")
local servers = {
        -- ...
	"volar",
        -- ...
}
for _, lsp in ipairs(servers) do
	lspconfig[lsp].setup({
		capabilities = capabilities,
	})
end

require("typescript-tools").setup({
	filetypes = {
		"javascript",
		"javascriptreact",
		"typescript",
		"typescriptreact",
		"vue",
	},
	settings = {
		capabilities = capabilities,
		root_dir = root_pattern_exclude({
			root = { "package.json" },
			exclude = { "deno.json", "deno.jsonc" },
		}),
		single_file_support = false,
		tsserver_plugins = {
			"@vue/typescript-plugin",
		},
	},
})

You might try running :LspInfo to see if typescript-tools is running on that buffer and not some other language server?

[9mm]

thanks @Drew-Daniels ! it was actually 2 separate issues in volar and some other plugin that were both fixed simultaneously. just bad luck would have it that it was the DAY that i switched over, so i thought that it was something in my config. works perfect now!