search

TypeFox / monaco-languageclient

Repo hosts npm packages for monaco-languageclient, vscode-ws-jsonrpc, monaco-editor-wrapper, @typefox/monaco-editor-react and monaco-languageclient-examples
https://www.npmjs.com/package/monaco-languageclient
MIT License
1k stars 173 forks source link

Add a Vue example #416

Open kaisalmen opened 1 year ago

kaisalmen commented 1 year ago

Should we add a Vue client to the examples?

It should only be integrated into this repository if it does not bring a ton of dependencies (like Angular) and fits the overall dev approach with vite. But with VueI am positive it will work. Otherwise, it could live in an external repo.

RSS1102 commented 8 months ago

I think we can pay attention to language-tools(volar). I am also trying to add a Vue3 language on Monaco. I think this is helpful.

kaisalmen commented 8 months ago

Hi @RSS1102 can you be more specific?

RSS1102 commented 8 months ago

Hi @RSS1102 can you be more specific?

This is my personal understanding： Each language has its own pattern, and Vue is no exception. In order to increase portability, such as compatibility with Vue systems such as vscode/vitepress, a separate warehouse has been developed for Vue.

  1. this is vue-language-configuration.json,Here are the key strings for the Vue language.
  2. @volar/monaco, is used to bridge the language capabilities implemented based on Volar.js to Monaco Editor.

https://github.com/Kingwl/monaco-volar , There is an example code here, but I don't think it is perfect, there are too many dependencies, and many features are outdated. I personally think that all you need is the vue-language-configuration.json file,and the rest needs to be done by ourself. I personally believe that these functions mainly support:

  1. Vue language support.
  2. Language highlighting
  3. Vue worker.

But I don't have enough understanding to implement it yet. But I am still working hard.

kaisalmen commented 8 months ago

My understanding is that volar helps to ease building languageservers / languageclient. What we gain with @codingame/monaco-vscode-api is there is no more monaco-editor related fiddling needed as it behaves like it is running inside vscode. So monaco-volar is not needed as you can just use your languageclient implementation. @CGNonofr anything to correct or add here?

RSS1102 commented 8 months ago

Yes, so maybe it's just a need for vue-language-configuration.json,i think.

kaisalmen commented 8 months ago

Yes that and a textmate grammar. That is what we load for the Langium Statemachine DSL as well: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/langium/statemachineClient.ts#L77-L78 (The references are used in the extension configuration (a few lines above).

It is basically done for every default language extension you can import.

RSS1102 commented 8 months ago

Okay, thank you. I'll give it a try this weekend.