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

秦羽 2021-12-30 PM 605℃ 0条

## 报错1

- 报错描述

> src/client.ts:32:24 - error TS2345: Argument of type 'import("path/to/project/monaco-languageclient/example/node_modules/monaco-editor/esm/vs/editor/editor.api").editor.IStandaloneCodeEditor' is not assignable to parameter of type 'monaco.editor.IStandaloneCodeEditor'.

- 解决方法

`monaco-editor` 和 `monaco-editor-core` 不能同时存在，将后者卸载

- 参考

https://github.com/TypeFox/monaco-languageclient/issues/283

## 报错2

- 报错描述

> model.getLanguageId is not a function

或者

> monaco Cannot read properties of undefined reading getModels

- 解决方法

将`@codingame/monaco-jsonrpc`和`@codingame/monaco-languageclient`替换为`vscode-ws-jsonrpc`和`monaco-languageclient`，并修改如下代码：

```
// client.ts 原代码

import { listen } from '@codingame/monaco-jsonrpc';
import * as monaco from 'monaco-editor-core'
import {
    MonacoLanguageClient, MessageConnection, CloseAction, ErrorAction,
    MonacoServices, createConnection
} from '@codingame/monaco-languageclient';

...

// install Monaco language client services
MonacoServices.install(monaco);

```

```
// client.ts 新代码

import { listen, MessageConnection } from "vscode-ws-jsonrpc";
import * as monaco from "monaco-editor";
import {
  MonacoLanguageClient,
  CloseAction,
  ErrorAction,
  MonacoServices,
  createConnection,
} from "monaco-languageclient";

...

const editor = monaco.editor.create(document.getElementById("container")!, {
  model: monaco.editor.createModel(
    value,
    "python",
    monaco.Uri.parse("inmemory://model.json")
  ),
  glyphMargin: true,
  lightbulb: {
    enabled: true,
  },
});

// install Monaco language client services
MonacoServices.install(editor);
```

- 参考

https://medium.com/dscddu/language-server-protocol-adding-support-for-multiple-language-servers-to-monaco-editor-a3c35e42a98d

## 报错3

- 报错描述

> Can't resolve 'vscode-languageserver-protocol/lib/main' in 'xxx\monaco-languageclient\node_modules\monaco-languageclient\lib'

- 解决方法

添加以下配置到webpack配置

```
resolve: {
    alias: {
      'vscode-languageserver-protocol/lib/main': 'vscode-languageserver-protocol/lib/browser/main',
      'vscode-languageserver-protocol/lib/utils/is': 'vscode-languageserver-protocol/lib/common/utils/is',
    },
  },
```

- 参考

https://github.com/TypeFox/monaco-languageclient/issues/242

标签: moncao, monaco-languageclient

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

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

上一篇 vue使用monaco-languageclient报错

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

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

评论啦~

栏目分类

标签云

友情链接申请

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

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请