Enable vetur to work with VS Code on the Web

[isidorn]

:wave: I'm Isidor, a PM from the VS Code team, and we recently announced VS Code for the Web at https://vscode.dev/, which provides a free, zero-install Microsoft Visual Studio Code experience running entirely in your browser. You can learn more here.

We'd like to ensure vetur can run in the web, and we have a guide for enabling extensions for the web here. As a couple of highlights:

• In VS Code for the Web, both the UI and extension host run inside the browser.
• A web extension is structured like a regular extension, but with a different main file: it's defined by the browser property
• Access to workspace files needs to go through the VS Code file system API accessible at vscode.workspace.fs
• There are currently three ways to test a web extension

I checked your extension and I see there are quite some node dependencies, so this transition to web might not be trivial. However it would be cool if you could at least contribute grammars for web, and using when clauses disable all other contributions which can not work on the web.

We are also open to helping here. Let us know what you think. Thanks!

@aeschli @octref

[bamurtaugh]

Hi @octref! I was wondering if you might have any thoughts on this? We're happy to discuss if you have any questions or feedback. Thanks!

[johnsoncodehk]

Sorry to bother, I was hoping for some guidance, this question should be generic.

Typescript's language service API with language service host is synchronous, so it is not possible to request vscode.workspace.fs from a language client asynchronously. How does the typescript extension solve this problem to support the Web IDE? Or TS language service can't solve it, but it be solved by tsserver?

Thanks in advance. 🙏

[isidorn]

@johnsoncodehk good question. I do not know. @jrieken or @mjbvz would know better here.

[jrieken]

How does the typescript extension solve this problem to support the Web IDE?

This is being worked on. Today, the TypeScript web extension is more or less single file, e.g it doesn't support cross file features like find references. You correctly pointed out that tsserver is all sync and unfortunately that won't change. The current plan is to add logic to tsserver to add a virtual, synchronous file system which is updated and initialized by async messages. This is the corresponding issue: https://github.com/microsoft/TypeScript/issues/47600.

[johnsoncodehk]

@jrieken If I understand correctly, I need to migrate from TS language service API to tsserver after tsserver supports virtual file system, or I have to implement virtual file system for TS language service host in LSP langauge server, and sync by language client's vscode.workspace.fs.

Your comment is very helpful, thank you. 🙏

[jrieken]

@jrieken If I understand correctly, I need to migrate from TS language service API to tsserver after tsserver supports virtual file system, or I have to implement virtual file system for TS language service host in LSP langauge server, and sync by language client's vscode.workspace.fs.

That's something I have a hard time answering. I don't know what approach you have taken right now

[johnsoncodehk]

@jrieken It's okay, I think I know how to do it now. :)

But my concern is whether synchronizing workspace files to virtual file system of language server will cause performance issues, it seems not proven in tsserver yet and I have to try.

[jrieken]

of language server will cause performance issues, it seems not proven in tsserver yet and I have to try.

I do something similar with vscode-anycode and it seems to work. What I do is this: build a glob pattern with all types of files that I support and search for them. I later open them one by one to digest them. There is some tricks and a tad of remote hub knowledge to not get blocked. We are thinking about better API for this but meanwhile that works

[FossPrime]

In the meantime, Rahul Kadyan made an extension called Vue that brings some sintax highliting to Vue SFC's. The extension ID is znck.vue, last update was April 9th, 2020...

For the clue-less: this is what we're getting:

[yoyo930021]

@johnsoncodehk Does volar support it? If yes, I think vetur should not do a repeat

[johnsoncodehk]

@yoyo930021 yes it do, you can try by clone https://github.com/johnsoncodehk/volar and run pnpm I && npm run build && npm run chrome to try.

But it was only working on the local dev browser, not working on github.dev, I have no idea how to debug this problem for github.dev.

[FossPrime]

@yoyo930021 yes it do, you can try by clone https://github.com/johnsoncodehk/volar and run pnpm I && npm run build && npm run chrome to try.

But it was only working on the local dev browser, not working on github.dev, I have no idea how to debug this problem for github.dev.

Debugger statements work on stackblitz cloudflow. Alternatively, https://github.com/eclipse-theia/theia/issues/11797#issue-1421613172 or locally running a VSCode build in VSCode.dev mode could also help.

[ameerthehacker]

https://github.com/johnsoncodehk/volar/pull/2177/ this fixes issues and makes volar language features work in vscode.dev

[johnsoncodehk]

FYI, we've got TS + Vue (based on Volar) support for Web IDE by https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-web. And Astro support is coming soon.