Repository navigation
Allow using LSP in the Monaco Editor #262872
Description
Activity
Hi Henning Dieterichs (@hediet) I was just made aware of this issue by Loïc Mangeonjean (@CGNonofr) . We both maintain https://github.com/TypeFox/monaco-languageclient and Loïc Mangeonjean (@CGNonofr) created https://github.com/CodinGame/monaco-vscode-api which supplies a modularized VS Code Web.
Very recently I wrote a blog post about monaco-languageclient v10 which contains a good summary of the project's history.
Please reach out to us if you have any questions? We are open to collaborate on the subject.
Reacted by Miro Spönemann and Loïc MangeonjeanThanks for reaching out, Kai Salmen (@kaisalmen)! We greatly appreciate your work on making the monaco editor more useful!
It seems like the monaco-languageclient and monaco editor LSP feature as described by this issue serve different purposes.
The main motivation of adding first class/built-in LSP support to the monaco editor is to prepare the monaco editor to be used by the typescript playground with the upcoming LSP-based tsgo language server.
Besides that, it would also allow us to do some code cleanup with the existing css/json/html/typescript that uses a custom protocol to forward language requests to the web worker. These are mostly single-file use-cases for when someone needs a lightweight embedded editor, not with the intention to become a full-fledged IDE.If I understand correctly, the heavy lifting of monaco-languageclient is done by mapping the vscode API to the monaco editor API. Then, the official vscode LSP client can be used to connect an LSP server to the vscode API, and thus making it available to the monaco editor. This would also make it very easy to make VS Code extensions available to the monaco-editor.
However, the complexity of this approach is significantly higher and the control over the LSP part much lower, as it uses the vscode-languageclient package that is just intended to be used as part of VS Code extensions.For our use-case, it seems more suited to map LSP directly to monaco-editor API, instead of using
vscode-languageclientto map it to VS Code API and then mapping the VS Code API to monaco editor API.
(though I'm aware that VS Code itself maps the VS Code API to the monaco editor API)Hope that makes sense - let me know if you have any concerns!
Hi Henning Dieterichs (@hediet) thank you for your extensive answer.
monaco-languageclientwas designed to be an extension of thevscode-languageclient. So, it always followed a different approach.What you are now building makes sense if you look solely at
monaco-editor. Having LSP support directly available is good idea. 👍Before Loïc Mangeonjean (@CGNonofr) created monaco-vscode-api in 2022 there was a lot of code required in
monaco-languageclientto mimic/re-implement the real vscode-api. That approach usually suffered under compatibility issues.
Nowadays, using a single monaco-editor with LSP in a web app or building one including a partial VS Code is possible, because many transformed modules/services are available (e.g. Textmate/Theming is just a service import away). We don't want to lose those capabilities. Both solutions can/will just co-exist, I guess.If there ever will be a VS Code v2 my wish is that is modular. 🙂 Then the need for a separate
monaco-editorwould be gone.monaco-vscode-apisketches this possible future. 🚀The LSP client is now available in both the AMD and ESM build!
Verification steps:
It works nicely with web-based LSPs, such as@typefox/pyright-browser. (use this link to verify the LSP implementation)Future steps are integration with tsgo lsp, and using the html/json/css LSP servers directly.
If anyone is curious on how to use the LSP with WebSocket support, this is the code:
const transport = await monaco.lsp.WebSocketTransport.connectTo({ host, port }); new monaco.lsp.MonacoLspClient(transport);
Confirmed it works in my project.
Reacted by Mathis BrossierSome documentations may need to be updated then, like https://microsoft.github.io/language-server-protocol/implementors/tools/
Reacted by Henning DieterichsDerek Stavis (@derekstavis) glad to hear it works for you!
Loïc Mangeonjean (@CGNonofr) Tracked by microsoft/monaco-editor#5064
Please note that the API is not stable yet and the implementation may contain bugs.
Reacted by Loïc MangeonjeanThanks for the work here! It's been working great for my use-case which is mostly a local debugging tool for my own programming language. Not demanding anything here as this has already been extremely helpful, but here are a few of the things that I had to work around:
Couldn't make it work with
@monaco-editor/react
I traced this down to the multi-instance nature of such package. The LSP package currently registers model change handlers within the "global" monaco and each React editor seem to create a new monaco instance. I solved this by ditching the package and keeping only a single monaco instance.The LSP is always active for every language
This was easy. I just made the LSP check the language ID and if it didn't match, never initialize.Websocket re-connection is currently not possible
When the internet connection is spotty, or when one is restarting the LSP, the websocket connection is lost and the only way to re-connect is to refresh the page.Hey, does anyone know of a small example of a single monaco editor on a page with a minimal LSP powering the (also ideally) very small language running inside the said editor?
Looking for a starting point which won't overwhelm me with details.
Thanks in advance!Drazen Dotlic (@ddotlic) you can find an inofficial example here.
Reacted by Drazen Dotlic@ddotlic you can find an inofficial example
Henning Dieterichs (@hediet) Thanks, where's the source of that example? I mean, the small snippet in that page can't possibly be all it takes, right? 😃 Or is it really so few lines of code?
- locked and limited conversation to collaborators
on Nov 27, 2025
We should make it easy for a Monaco Editor user to easily plug in a rich language via LSP.
We should investigate if existing solutions, like https://github.com/TypeFox/monaco-languageclient , work well enough.