Monaco 语言客户端、VSCode WebSocket Json RPC、Monaco-Editor-Wrapper、Monaco-Editor-React 以及示例

这个仓库现在包含多个 npm 包：

monaco-languageclient：用于连接 Monaco 编辑器和语言服务器。
vscode-ws-jsonrpc：实现了通过 WebSocket 进行 jsonrpc 客户端和服务器之间的通信。
monaco-editor-wrapper：用于构建由配置驱动的 Monaco 编辑器应用程序。
monaco-editor-react：为 monaco-editor-wrapper 提供 React 封装。
monaco-languageclient-examples：提供可供外部使用的示例。

点击这里查看如何将 Monaco 编辑器连接到您的语言服务器的详细说明。

Monaco 语言客户端、VSCode WebSocket Json RPC、Monaco-Editor-Wrapper、Monaco-Editor-React 以及示例

更新日志、项目历史和兼容性

每个项目的更新日志可从以下链接位置找到：

monaco-languageclient 的更新日志在这里
vscode-ws-jsonrpc 的更新日志在这里
monaco-editor-wrapper 的更新日志在这里
@typefox/monaco-editor-react 的更新日志在这里
monaco-languageclient-examples 的更新日志在这里

重要的项目变更和项目历史说明可以在这里找到。

您可以在这里找到 monaco-editor、vscode、@codingame/monaco-vscode-api 和 @codingame/monaco-vscode-editor-api 的兼容性表格。

入门

在本地机器上，您可以按以下方式准备开发环境。首先建议构建所有内容。或者，您可以通过点击上方的 code now 徽章，在 Gitpod 中使用全新的开发环境。在本地，从终端执行以下命令：

git clone https://github.com/TypeFox/monaco-languageclient.git
cd monaco-languageclient
npm i
# 清理、编译和构建所有内容
npm run build

Vite 开发服务器

启动 Vite 开发服务器。它在 localhost 上提供所有客户端代码。您可以访问 index.html 并从那里导航到所有客户端示例。您可以直接编辑客户端示例代码（TypeScript），Vite 会确保自动更新：

npm run dev
# 或者：这会清除缓存并输出调试信息
npm run dev:debug

由于这是一个 npm 工作区，主 package.json 包含适用于整个工作区的脚本条目，如 watch、build 和 lint，但它也包含从子包中启动脚本的快捷方式，如 npm run build:examples。如果你想改变库并直接看到反映，那么你需要运行watch命令，该命令会编译两个库和示例中的所有TypeScript文件：

npm run watch

使用方法

请查看各个包中的相应部分：

monaco-languageclient的使用方法可以在这里找到
vscode-ws-jsonrpc的使用方法可以在这里找到
monaco-editor-wrapper的使用方法可以在这里找到
@typefox/monaco-editor-react的使用方法可以在这里找到

示例概览

这些示例展示了多个方面：

monaco-languageclient如何被monaco-editor-wrapper或@typefox/monaco-editor-react使用，以创建一个连接到语言服务器的编辑器，语言服务器可以在浏览器的Web Worker中运行，或者通过vscode-ws-jsonrpc使用WebSocket连接到外部进程。
不同的语言服务器如何以通用方式集成，以便它们可以通过WebSocket与在浏览器中运行的前端通信。

主要示例

JSON语言客户端和语言服务器示例（位置）

json-server运行一个外部Node.js Express应用，使用WebSocket实现语言服务器进程与客户端Web应用之间的通信（参见JSON语言服务器）。 json-client包含monaco-editor-wrapper应用，它连接到语言服务器，因此需要同时运行node服务器应用。

Python语言客户端和Pyright语言服务器示例（位置）

python-server运行一个外部Node.js Express应用，使用WebSocket实现语言服务器进程与客户端Web应用之间的通信（参见Pyright语言服务器）。 python-client包含monaco-editor-wrapper应用，它连接到语言服务器，因此需要同时运行node服务器应用。也可以使用@typefox/monaco-editor-react应用连接到服务器。

Groovy语言客户端和语言服务器示例（位置）

groovy-server运行一个外部Java应用，使用WebSocket实现语言服务器进程与客户端Web应用之间的通信（Groovy语言服务器）。 groovy-client包含monaco-editor-wrapper应用，它连接到语言服务器，因此需要同时运行node服务器应用。

Java语言客户端和语言服务器示例（位置）

java-server运行一个外部Java应用，使用WebSocket实现语言服务器进程与客户端Web应用之间的通信（Java语言服务器）。 java-client包含monaco-editor-wrapper应用，它连接到语言服务器，因此需要同时运行node服务器应用。

Langium示例（这里客户端和服务器通过vscode-languageserver-protocol/browser而不是上述三个示例中使用的WebSocket进行通信）

Langium语法DSL（位置）

它同时包含语言客户端和语言服务器（Web Worker）。在这里，你可以预先选择wrapper是以经典模式还是扩展模式启动。

状态机DSL（使用Langium创建）（位置）

它同时包含语言客户端和语言服务器（Web Worker）。也可以使用@typefox/monaco-editor-react应用连接到服务器。

裸monaco-languageclient（位置）

它演示了如何在不使用monaco-editor-wrapper的情况下实现JSON语言客户端和语言服务器示例。你可以在这里找到实现。

浏览器示例（位置）

它演示了如何将monaco-editor-wrapper与用JavaScript编写的语言服务结合使用。这个示例现在可以被视为遗留示例，因为Web Worker选项简化了客户端语言服务器的实现和分离，但它仍然展示了一种实现所需结果的有效方法。

纯monaco-editor相关示例

参见TypeScript语言支持。

参见多编辑器使用。

服务器进程

JSON语言服务器

对于json-client、react-client或client-webpack示例，你需要确保json-server示例正在运行：

# 启动express服务器，语言服务器在同一进程中运行。
npm run start:example:server:json

Pyright语言服务器

对于python-client示例，你需要确保python-server示例正在运行：

# 启动express服务器，语言服务器作为外部node进程运行。
npm run start:example:server:python

Groovy语言服务器

对于groovy-client示例，你需要确保groovy-server示例正在运行。你需要docker-compose，它不需要任何手动设置（OpenJDK / Gradle）。从项目根目录运行docker-compose -f ./packages/examples/resources/groovy/docker-compose.yml up -d。首次启动会花费较长时间，因为需要构建容器。使用docker-compose -f ./packages/examples/resources/groovy/docker-compose.yml down来停止它。

Java语言服务器

对于java-client示例，你需要确保java-server示例正在运行。你需要docker-compose，它不需要任何手动设置（OpenJDK / Eclipse JDT LS）。从项目根目录运行docker-compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml up -d。首次启动会花费较长时间，因为需要构建容器。使用docker-compose -f ./packages/examples/resources/eclipse.jdt.ls/docker-compose.yml down来停止它。

验证示例和使用

所有验证示例都不是npm工作区的一部分。有些带来了大量的npm依赖，这会污染主node_modules依赖，因此这些示例需要独立构建和启动。所有验证示例都重用了json客户端示例的代码，因此需要启动json服务器。

angular验证示例：在2024年3月之前，这位于一个单独的仓库中。如果你想测试它，请执行：cd verify/angular && npm run verify。它在这里提供客户端服务：http://localhost:4200。
webpack验证示例演示了如何使用webpack实现打包。你可以在这里找到配置：webpack.config.js。请执行：cd verify/webpack && npm run verify。它在这里提供客户端服务：http://localhost:8081。
vite验证示例展示了如何使用vite进行打包。无需任何配置，请执行:cd verify/vite && npm run verify。它在此处提供客户端服务:http://localhost:8082。
pnpm验证示例展示了项目可以使用vite构建，但使用pnpm代替npm。请执行:cd verify/pnpm && pnpm run verify。它在此处提供客户端服务:http://localhost:8083。
yarn验证示例展示了项目可以使用vite构建，但使用yarn代替npm。请执行:cd verify/yarn && yarn run verify。它在此处提供客户端服务:http://localhost:8083。

VSCode集成

您也可以运行vscode任务以不同模式启动和调试服务器以及客户端。

特色项目

JSONA编辑器: 演示 (GitHub)
浏览器中的Clangd: 演示 (GitHub)
使用monaco-editor-wrapper的Langium minilogo: 演示 (GitHub)

故障排除

常规

无论何时使用monaco-editor、vscode、monaco-languageclient、monaco-editor-wrapper或@typefox/monaco-editor-react，请确保在执行任何与monaco-editor或vscode API相关的初始化工作或开始使用之前导入它们。请查看我们的Python语言客户端示例，了解应该如何进行。

依赖问题: monaco-editor / @codingame/monaco-vscode-api / @codingame/monaco-vscode-editor-api

如果您在monaco-editor或vscode深层出现数百个可能由缺少函数导致的编译错误，那很可能是您的package-lock.json或node_modules已损坏。删除这两个并重新执行npm install。使用npm list monaco-editor总是很有用。如果看到不同或错误的版本，这就表明出现了问题。

Volta

package.json文件中有Volta说明。当您有Volta可用时，它将确保使用指定的node和npm版本。

Vite开发服务器故障排除

当您使用vite进行开发时，请注意此建议。

如果您看到问题断言失败（已存在具有此ID的扩展），您可能为vscode / @codingame/monaco-vscode-api定义了不匹配的依赖项。您应该修复此问题或在vite配置中添加以下条目：

resolve: {
  dedupe: ['vscode']
}

提供所有必需文件

@codingame/monaco-vscode-api需要提供json和其他文件。在项目的Web服务器配置中，您必须确保不阻止这一点。

错误的Polyfills

buffer

如果您看到类似以下的错误：

Uncaught Error: Unexpected non—whitespace character after JSON at position 2

SyntaxError: Unexpected non—whitespace character after JSON at position 2
    at JSON. parse («anonymous>)

很可能是一个旧版本的buffer造成干扰（参见#538和#546）。您可以通过在项目的package.json中添加如下所示的resolution来强制使用当前版本。

"resolutions": {
  "buffer": "~6.0.3",
}

monaco-editor和react

我们现在建议您使用typefox/monaco-editor-react。

但如果您需要使用@monaco-editor/react，请在编辑器组件文件的顶部添加monaco-editor导入来源：

import * as monaco from "monaco-editor";
import { loader } from "@monaco-editor/react";

loader.config({ monaco });

pnpm

如果您使用pnpm，您必须将vscode / @codingame/monaco-vscode-api作为直接依赖项添加（您可以在这里找到兼容性表），否则安装将失败。

"vscode": "npm:@codingame/monaco-vscode-api@~8.0.1"

许可证

monaco-languageclient: MIT
vscode-ws-jsonrpc: MIT
monaco-editor-wrapper: MIT
@typefox/monaco-editor-react: MIT
monaco-languageclient-examples: MIT