Monaco Editor：删除多个编辑器实例的完成提供程序中的重复项

Question

我目前有一个语言服务器，它为关键字、函数、表、列等提供 SQL 自动补全......

语言服务器在后端运行，它根据客户端的请求提供自动完成功能。 在前端，我有一个带有以下组件的反应应用程序：

import React, { Component } from 'react';
import * as monaco from 'monaco-editor';
import { listen } from '@codingame/monaco-jsonrpc';
import {
    MonacoLanguageClient,
    MonacoServices,
    createConnection,
    MessageConnection,
} from "monaco-languageclient";
import ReconnectingWebSocket from "reconnecting-websocket";
import { URI } from 'vscode-uri';

const LANGUAGE_ID = 'sql';

let languageClient: MonacoLanguageClient;

class MonacoEditor extends Component {
    componentDidMount() {
        const {
            wordWrap,
            showLineNumbers,
            readOnly,
            id
        } = this.props;
        
        // creating the editor
        this.editor = monaco.editor.create(document.getElementById(id) as HTMLElement, {
            model: monaco.editor.createModel('', LANGUAGE_ID, monaco.Uri.parse(`inmemory://model${id}.sql`)),
            minimap: { enabled: false },
            glyphMargin: true,
            lightbulb: {
                enabled: true
            },
            language: LANGUAGE_ID,
            fontSize: 14,
            matchBrackets: 'always',
            wordWrap: wordWrap ? 'on' : 'off',
            lineNumbers: showLineNumbers ? 'on' : 'off',
            readOnly,
            scrollBeyondLastLine: false
        });

        // installing the language client
        MonacoServices.install(monaco);

        function createLanguageClient(
            connection: MessageConnection
        ): MonacoLanguageClient {
            return new MonacoLanguageClient({
                name: "SQL Language Server MonacoClient",
                clientOptions: {
                    documentSelector: ["sql"],
                    workspaceFolder: {
                        uri: URI.file('/opt/monaco_editor'),
                        name: 'workspace',
                        index: 0
                    }
                },
                connectionProvider: {
                    get: (errorHandler, closeHandler) => {
                        return Promise.resolve(
                            createConnection(connection, errorHandler, closeHandler)
                        );
                    },
                },
            });
        }

        function createWebSocket(url: string): ReconnectingWebSocket {
            const socketOptions = {
                maxReconnectionDelay: 10000,
                minReconnectionDelay: 1000,
                reconnectionDelayGrowFactor: 1.3,
                connectionTimeout: 10000,
                maxRetries: Infinity,
                debug: false,
            };
            return new ReconnectingWebSocket(url, [], socketOptions);
        }

        const URL = "ws://localhost:8080";
        const webSocket = createWebSocket(URL) as WebSocket;
        listen({
            webSocket,
            onConnection: (connection) => {
                languageClient = createLanguageClient(connection);
                const disposable = languageClient.start();
                connection.onClose(() => disposable.dispose());
            },
        });
    }

    render() {
        const { id } = this.props;
        return (
            <div>
                <h1 style={{textAlign: 'center'}}>SQL Syntax checking</h1>
                <div id={id} style={{height: '600px', width: '100%' }} />
            </div>);
    }
}

export default MonacoEditor;

我想要实现的是在同一页面上有多个编辑器实例。但是，当我尝试这样做时，我会在完成建议中得到重复的关键字（见下文）。

我试图做一些研究，但我找不到任何适合我的情况的东西。 正如您从代码中看到的那样，我没有可以处理的任何monaco.languages.registerCompletionItemProvider()。所有的自动完成数据都由后端发送。 是否有任何解决方法来解决此问题？

Answer 1

---

你可以试试这个，而组件卸载你可以，处置编辑器

this.editor.dispose()