How to connect Volar to Monaco Editor?

Question

I'm building a custom IDE (using Electron) and am trying to integrate Volar into VS Code's Monaco Editor.

Currently I have no syntax highlighting for .vue files:

My understanding is that I need to run an LSP server in a separate process and somehow connect that to Monaco using web-sockets? I'm not going to lie, I'm having a hell of a time figuring this out. And there don't seem to be any documentation/examples for this online (as of 2/20/22). Every attempt I've made so far at getting this to work has failed :(

Has anyone successfully connected Volar to the Monaco editor?

Any help would be greatly appreciated, thank you.

Answer 1

EDIT: see https://github.com/Kingwl/monaco-volar

See https://github.com/johnsoncodehk/volar/discussions/598 and https://github.com/johnsoncodehk/volar/issues/612

There's no Monaco support yet for Volar.

If somehow possible, you could play with the Monaco settings to maybe treat .vue files as HTML, that way you'd get some very basic (no TypeScript) syntax highlighting - after all, <template>, <script> and <style> are regular HTML tags.