Use latest available @vue/language-server package

[April-Gras]

Copied from:
zed-industries/zed#18807 (comment):

This PR relates to #9846 which pinned the @vue/language-server package to a version approximately 12 months old. This PR brings behaviour inline with how other JS language extensions works by pulling the latest available package.

I have tested on Zed 0.155.2 and it now seems to be behaving.

Release Notes:

• N/A

Originaly Authored by @rowanwins

[reslear]

By the way, can someone put it in beta to check it out?

[April-Gras]

Is there anything additional required for this PR to move forward ?
I wouldn't mind addressing any potential issues if I'm given directions
Hope I can help

[reslear]

@April-Gras maybe do friendly ping developers?

[maxdeviant]

My comments from the original PR still haven't been addressed:

Last I checked, there were changes in v2 of the Vue language server that broke certain aspects of the functionality:

The Vue bits of the language server work, but the TypeScript stuff doesn't. And they have a separate language server plugin you can use to add Vue support to tsserver, but then they also put out another release after v2 that added back the old built-in TypeScript support.

It's possible that they have remedied this since last I looked, but we'll need to do due diligence to make sure all of the workloads are still working as expected.

We need to do thorough testing of this, particularly with TypeScript, and make sure that it works as expected.

[ThatOneCalculator]

Out of curiosity, when building Zed from source, what do I have to do to test this PR? Would love to give it a shot in a Vue-based codebase with Typescript scripts (setup syntax) and SCSS scoped styles

[maxdeviant]

Out of curiosity, when building Zed from source, what do I have to do to test this PR? Would love to give it a shot in a Vue-based codebase with Typescript scripts (setup syntax) and SCSS scoped styles

Whether you're building Zed from source or using a pre-built version, the steps are the same.

You just need to install it as a dev extension following the instructions here: https://zed.dev/docs/extensions/developing-extensions#developing-an-extension-locally

[phisch]

From my testing, just using the latest version didn't work out. I didn't get any language server features inside typescript blocks. But I also didn't get any telling language server errors or logs, so no idea why this didn't seem to work.

[ThatOneCalculator]

I get this error:

Language server error: vue-language-server

installed package '@vue/language-server' did not contain expected path 'node_modules/@vue/language-server/bin/vue-language-server.js'
-- stderr--

[Imna29]

I get this error:

Language server error: vue-language-server

installed package '@vue/language-server' did not contain expected path 'node_modules/@vue/language-server/bin/vue-language-server.js'
-- stderr--

Could you share more details please? What version zed you are running, OS, the exact steps you took to install the extension from this PR. Are you sure you were checked out to this PR exactly? Does this error occur during the downloading of the server?

[ThatOneCalculator]

• Zed 0.162.3, Arch Linux rolling x86_64
• Steps taken: git clone the main repo, add April's fork as an origin, fetch and merge that origin, go to zed extensions, load dev extension

[notpeter]

@April-Gras

We require contributors to sign our Contributor License Agreement, and we don't have @April-Gras on file. You can sign our CLA at https://zed.dev/cla.

Normally this would've been handled by clabot but there have been some recent outages with that bot so for the moment please sign and I will manually verify.

Thanks.

[Imna29]

• Zed 0.162.3, Arch Linux rolling x86_64

  • Steps taken: git clone the main repo, add April's fork as an origin, fetch and merge that origin, go to zed extensions, load dev extension

I think there is an issue open for this with a corresponding PR. #4 issue and #5 pr

[Imna29]

My comments from the original PR still haven't been addressed:

Last I checked, there were changes in v2 of the Vue language server that broke certain aspects of the functionality:

The Vue bits of the language server work, but the TypeScript stuff doesn't. And they have a separate language server plugin you can use to add Vue support to tsserver, but then they also put out another release after v2 that added back the old built-in TypeScript support.

It's possible that they have remedied this since last I looked, but we'll need to do due diligence to make sure all of the workloads are still working as expected.

We need to do thorough testing of this, particularly with TypeScript, and make sure that it works as expected.

This issue still persists. The extension works for vue template but not for any code inside the script tag. It does show the correct highlighting though.

They have it set up so that the autocomplete for the script tag is now handled by typescript-language-server or tsserver but you have to add @vue/typescript-plugin to it.

Is this something you can do @April-Gras . I've been tinkering with it but haven't been able to do it yet

[reslear]

someone can take care of it? I so don't want to go back to vscode.

[danieldickison]

I'd love to help out with this effort also.

It does appear that the vscode extension essentially delegates its functionality to a plugin for the TypeScript extension. It looks like it does some funky monkey-patching of fs.readFileSync to make the TS extension handle Vue files, perhaps?
https://github.com/vuejs/language-tools/blob/886309e053118f50ab3de455c667878c6e208c31/extensions/vscode/src/nodeClientMain.ts#L145

I'm not familiar with the zed extensions architecture but is there a way for the Vue extension to add a plugin to the TS language server?

[jl4nz]

Would it be possible to init the extension with hibridMode: false on the language-server ?

https://github.com/vuejs/language-tools?tab=readme-ov-file#non-hybrid-modesimilar-to-takeover-mode-configuration-requires-vuelanguage-server-version-207

I understand that this would be like the old behavior and use the embedded ts server for version >= 2.0.7

[ThatOneCalculator]

I think it's hybridMode 😄

[reslear]

last year's issue :))

[0x-jerry]

I have done some local tests, it works perfectly when disabling hybridMode with the latest version of @vue/language-server.

Here is what I changed:

1. Change @vue/language-serverto the latest version

        let version = "2.2.0".to_string();

        if !server_exists
            || zed::npm_package_installed_version(PACKAGE_NAME)?.as_ref() != Some(&version)
        {

2. Disable "hybridMode", follow the @vue/language-server docs: https://github.com/vuejs/language-tools/blob/master/packages/language-server/lib/types.ts#L1-L8

    fn language_server_initialization_options(
        &mut self,
        _language_server_id: &zed::LanguageServerId,
        _worktree: &zed::Worktree,
    ) -> Result<Option<serde_json::Value>> {
        Ok(Some(serde_json::json!({
            "typescript": {
                "tsdk": self.typescript_tsdk_path
            },
            "vue": {
                "hybridMode": false,
            }
        })))
    }

[cla-bot]

We require contributors to sign our Contributor License Agreement, and we don't have @April-Gras on file. You can sign our CLA at https://zed.dev/cla. Once you've signed, post a comment here that says '@cla-bot check'.

[April-Gras]

Thank you so much @0x-jerry 🙏
I updated the branch with your changes and tried it out locally, look pretty good to me too

Screencast.from.2025-01-19.10-36-06.mp4

[ThatOneCalculator]

Any reason why it was left pinned to 2.2.0 instead of using the latest available version?

[April-Gras]

It works with latest on my machine but I would assume @0x-jerry had a reason ?

[0x-jerry]

I think pinning the version will make the extension more stable. This ensures that it will not break the extension even if @vue/language-server makes some breaking changes.

[April-Gras]

Sounds fair tbh 🤝
@maxdeviant You mentioned testing previously, are the screenshots and recordings we have proof enough or would you require something more of us ?
Personally I've been running this updated version since @0x-jerry's patch and it works

[ThatOneCalculator]

Same here ^^

[jl4nz]

Thanks, last changes are an improvement.

However, I think I found an issue. In ts files things likeimport App from './App.vue'; are not working properly... I get ts: Cannot find module './App.vue' or its corresponding type declarations.

What I had to do is:

1. Update the extension.toml

[language_servers.vue-language-server]
name = "Vue Language Server"
# language = "Vue.js"
languages = ["Vue.js", "TypeScript"]
language_ids = { "Vue.js" = "vue", "TypeScript" = "typescript" } ##prob also add js?
# REFACTOR is explicitly disabled, as vue-lsp does not adhere to LSP protocol for code actions with these - it
# sends back a CodeAction with neither `command` nor `edits` fields set, which is against the spec.
code_action_kinds = ["", "quickfix", "refactor.rewrite"]

2. Configure my settings.json

"TypeScript": {
      "prettier": { "allowed": false },
      "language_servers": ["vue-language-server", "!vtsls"]
 }

[phisch]

Been using this branch + the from @jl4nz suggested changes the entire day at work, and did not find a single issue so far!

[maxdeviant]

Thank you to everyone for testing this out!