如何创建集成 LSP 的 Web 代码编辑器（支持多语言）

最新推荐文章于 2024-08-09 08:08:06 发布

favxxx

最新推荐文章于 2024-08-09 08:08:06 发布

阅读量327

点赞数

文章标签： docker;kubernetes;

本文链接：https://blog.csdn.net/favxxx/article/details/133076830

版权

本文介绍了如何创建一个集成LSP的Web代码编辑器，利用Monaco Editor和语言服务器协议（LSP），理论上支持所有编程语言。通过后端的Python语言服务器pyright与前端Monaco Editor的配合，实现了轻量级的Web IDE。文章详细阐述了Server端和Web端的开发过程，展示了如何通过WebSocket和jsonrpc将语言服务器与编辑器连接起来，提供代码智能提示等功能。

摘要由CSDN通过智能技术生成

对于一个云开发平台来说，一个好的 Web IDE 能很大程度地提高用户的编码体验，而一个 Web IDE 的一个重要组成部分就是代码编辑器。

目前有着多款 web 上的代码编辑器可供选择，比如 Ace、CodeMirror、Monaco，这三款编辑器的比较在这篇文章中有着详细的介绍，在此就不作过多赘述。这篇文章我们选择 Monaco Editor 来对 LSP 进行集成，从而在理论上能够支持所有的编程语言。

什么是 LSP

file

LSP(Language Server Protocol)，也就是语言服务协议，更具体更通俗地说就是定义了在代码编辑器和语言服务器之间的一套规范，从而让原本

m 个编辑器与 n 个编程语言之间的对应关系

变为

m 个编辑器与 LSP 的关系和 n 个编程语言与 LSP 之间的关系，

从而将开发的复杂度由 m*n 降到了 m+n。

除了对编辑器开发者和编程语言开发者友好，对我们这种尝试让一个编辑器支持多种语言的开发者也更是友好，有 vscode 这样的编辑器珠玉在前，便能轻松地根据 vscode 的设计思路实现我们的需求。

LAF预览

在这篇文章中，我们会开发一个最小最轻量的编辑器 Demo 作为演示，架构非常简单，就是前端创建一个 Monaco Editor，后端创建一个语言服务器，二者之间通过 vscode-ws-jsonrpc 和 WebSocket 服务进行传输，实际实现的 Web 端 Python 编辑器如下：

file

Server 端开发

在 Web 端能接入语言服务前，我们得先在服务端运行一个语言服务，https://langserver.org/ 这个网站收录了许多语言服务的实现，

file

这里我们选择微软官方维护的 pyright 提供语言服务

首先创建 Express 服务器，配置静态文件服务，使用 fileURLToPath 和 dirname 来获取当前文件的路径，并将服务设置在 30000 端口

const app = express();
const __filename = fileURLToPath(import.meta.url);
const dir = dirname(__filename);
app.use(express.static(dir));
const server = app.listen(30000);

然后我们需要