Show and Tell: CodeMirror lsp-client with patched TS language server running in web workers

Hello world. This is a tech demo of TypeScript Server (tsserver) integration in CodeMirror powered by the new lsp-client package, along with customized diagnostics support. It looks like a minimal clone of TypeScript Playground.

I had been excited about writing a demo setup to evaluate the official language server integration of CodeMirror 6 before the license was settled. One of my criteria on such a demo was to run the LSP within a web worker so that the hosting options were broader.

I picked vtsls, a wrapper of TypeScript language service pulled out from VS Code, because the extension is known to run well on VS Code for the Web. I then worked on a diagnostic extension that converted the diagnostic notifications into CM’s linters with proper position remapping.

The demo code is not very polished, so comments and PRs are welcome.

The repo: GitHub - andy0130tw/codemirror-lsp-client-demo: Demo on wiring up tsserver with CodeMirror's lsp-client module
The demo site: https://codemirror-lsp-client.vercel.app/

3 Likes

Very cool! Everything I tried worked well.

1 Like