Monaco 编辑器：突出显示 Python 中的语法错误

Question

我想在浏览器中突出显示 Python 语法错误。

我发现Python有LSP实现，摩纳哥编辑器有LSP客户端。

有什么方法可以将它们连接在一起吗？

Answer 1

有一种方法可以将它们连接在一起！
这都是关于语言服务器协议的。

第一步：语言服务器

您需要的第一件事是一个正在运行的服务器，它将提供特定于语言的逻辑（例如自动完成、验证等）。
正如您的问题中提到的，您可以使用palantir 的 python-language-server。您还可以在langserver.org
上按语言找到现有语言服务器实现的列表。

在 LSP 中，客户端和服务器旨在通过JSON-RPC Websocket 进行通信。
您可以使用python-jsonrpc-server并执行此 python 脚本在您的设备上启动 python 语言服务器：

python langserver_ext.py

这将在 上托管语言服务器ws://localhost:3000/python。

第二步：语言客户端

Monaco 最初是 VSCode 的一部分。因此，Monaco 的大多数现有 LSP 客户端部件最初都是针对 VSCode 的，因此您需要使用一些 Nodejs 和 npm。

有很多模块可以链接 monaco 和 LSP 客户端，有些带有 vscode，有些则没有 - 解决这个问题变得非常耗时。
以下是我使用并最终开始工作的模块列表：

• @codingame/摩纳哥语言客户端
• @codingame/摩纳哥-jsonrpc
• 规范化 url
• 重新连接-websocket

在浏览器上使用服务器端 javascript

现在，最精彩的部分是：节点模块是服务器端JavaScript。这意味着，您不能直接在浏览器中使用它们（请参阅不可能在客户端（浏览器）上使用 RequireJS 从 node_modules 访问文件。）。
您需要使用构建工具（例如browserify）来转译节点模块以供浏览器使用：

.../node_modules/@codingame/monaco-languageclient/lib$ browserify monaco-language-client.js monaco-services.js connection.js ../../monaco-jsonrpc/lib/connection.js -r ./vscode-compatibility.js:vscode > monaco-jsonrpc-languageclient.js

这将创建一个名为 的文件monaco-jsonrpc-languageclient.js，我们将其用作 monaco-languageclient 和 monaco-jsonrpc 的捆绑包。
笔记：

• 告诉-r ./vscode-compatibility.js:vscodebrowserify 使用该vscode-compatibility.js文件来处理模块的每个依赖项vscode（请参阅包装 monaco-languageclient 时未解决的对“vscode”的依赖项）。
• 我们将这些模块浏览为一个包，以避免多次包含某些依赖项。

现在您已经有了一个与浏览器兼容的 JavaScript 文件，您需要使所需的组件可见（即将它们导出为window属性）。
在 中monaco-jsonrpc-languageclient.js，搜索导出 MonacoLanguageClient、createConnection、MonacoServices、listen、ErrorAction 和 CloseAction 的位置。在那里，添加一行以顺利导出它们：

.../node_modules/@codingame/monaco-languageclient/lib$ browserify monaco-language-client.js monaco-services.js connection.js ../../monaco-jsonrpc/lib/connection.js -r ./vscode-compatibility.js:vscode > monaco-jsonrpc-languageclient.js

对 Normalize-url 执行相同的操作：

(...)
exports.MonacoLanguageClient = MonacoLanguageClient;
window.MonacoLanguageClient = MonacoLanguageClient; // Add this line
(...)
exports.createConnection = createConnection;
window.createConnection = createConnection; // Add this line
(...)
(MonacoServices = exports.MonacoServices || (exports.MonacoServices = {}));
window.MonacoServices = MonacoServices; // Add this line
(...)
etc.

在 中normalizeurl.js，搜索normalizeUrl 导出的位置。在那里（或者默认在文件末尾）添加一行以全局导出它：

.../node_modules/normalize-url/lib$ browserify index.js > normalizeurl.js

您可以对 reconnecting-websocket 执行相同的操作，或者使用模块附带的 amd 版本。

在您的页面上包含monaco-jsonrpc-languageclient.js、normalizeurl.js以及浏览器化或 AMD 重新连接 websocket 模块。
为了加快加载时间，您还可以使用缩小工具（例如uglify-js）缩小它们。

最后，我们可以创建并连接客户端：

window.normalizeUrl = normalizeUrl;