monaco-editor编辑器使用jsonrpc-ws-proxy和python-language-server实现python代码提示功能

秦羽 2021-12-31 PM 811℃ 3条

## 背景

- 使用monaco-editor时，若想实现Python代码提示和错误检测等功能，需连接python语言服务
- 可通过`jsonrpc-ws-proxy`配合`python-language-server`实现

## 效果

![](https://www.qinyu.cc/usr/uploads/2021/12/4231671222.gif)

## 关键词

- monaco-editor
- python-language-server
- jsonrpc-ws-proxy
- python-jsonrpc-server
- websocket

## 教程

1. 安装`python-language-server`
```
pip install python-language-server
```

2. 克隆仓库`https://github.com/wylieconlon/jsonrpc-ws-proxy.git`

3. 进入`jsonrpc-ws-proxy`文件夹创建`servers.yml`，内容如下：
```yml
langservers:
  python:
    - python
    - -m
    - pyls
```

4. 启用代理服务
```
npm install
npm run prepare
node dist/server.js --port 5000 --languageServers servers.yml
```

5. 配合client.ts即可

## 后记

~~之前尝试过另一种方案，即直接使用`python-jsonrpc-server`（github仓库https://github.com/palantir/python-jsonrpc-server）  ，但测试发现存在提示延迟较长、卡顿、偶然性失效、内存占用高等问题，后来换用此方案。感兴趣的可以自行测试研究。~~

也可不使用步骤5的node代理，使用`python-jsonrpc-server`（github仓库https://github.com/palantir/python-jsonrpc-server） 也可，之前我测试不行是因为前端没配置好`monaco.Uri.parse`，所以会出现使用一段时间就卡死没有提示的情况。
```
model: monaco.editor.createModel(
	this.data,
	"python",
	
	// 新增
	monaco.Uri.parse("inmemory://model.json")
)
```

或者

```
this.editor = monaco.editor.create(document.getElementById(codeid), {
	value: '',
	language: 'python',
	automaticLayout: true,
	mimetypes: ["application/json"],
	theme: "vs-dark"
});

// 新增
this.editor.getModel(monaco.Uri.parse("inmemory://model.json"));
```

## 源码

- Github 完整代码
	https://github.com/shanghaobo/monaco-editor-python

## 参考

- https://medium.com/dscddu/language-server-protocol-adding-support-for-multiple-language-servers-to-monaco-editor-a3c35e42a98d
- https://github.com/wylieconlon/jsonrpc-ws-proxy
- https://github.com/palantir/python-language-server
- https://www.tabnine.com/code/javascript/functions/monaco-editor/Uri/parse

标签: python, monaco-editor, python-language-server, jsonrpc-ws-proxy, python-jsonrpc-server, websocket, node.js

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://www.qinyu.cc/archives/137.html

上一篇使用monaco-editor配合monaco-languageclient的常见问题踩坑

下一篇 monaco-editor笔记

monaco-editor编辑器使用jsonrpc-ws-proxy和python-language-server实现python代码提示功能

评论啦~

已有 3 条评论

栏目分类

标签云

友情链接申请

monaco-editor编辑器使用jsonrpc-ws-proxy和python-language-server实现python代码提示功能

 评论啦~

已有 3 条评论

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请