最近我的项目实现一个提醒性能，输出某个符号，展现匹配的内容，和代码提醒性能相似。最终抉择了monaco-editor,微软开发的js库，vscode也是基于这个库开发的。

在开发过程中，遇到些问题，因为文档不是很敌对，花了半天才解决问题。上面次要记录一下问题以及解决办法，心愿当前遇到这些问题的童鞋能疾速避坑。

遇到的问题以及解决办法

问题：

在Antd Modal中应用monaco-editor，显示Modal后敞开Modal，再次关上Modal，monaco-editor的提醒内容就会反复，显示几次Modal，对应的内容就会反复几次，如下图：

解决办法

思路1：
通过调试发现，registerCompletionItemProvider办法屡次执行，首先猜到的可能是插件屡次创立，没有销毁造成的，查阅对应的文档后，发现有插件提供了一个销毁的办法:

monaco.editor.dispose()

于是，尝试在组件销毁之前调用下面的办法，然而运行后发现并不失效，上述问题仍旧存在，此法不通~

思路2：
既然registerCompletionItemProvider屡次执行，那么给组件中增加一个全局的计数器count，组件注册一次后执行一次count+1，只有当count===0时，才走对应的插件注册逻辑，否则间接取缓存的数据。局部代码片段如下：

 let count = 0;      monaco.languages.registerCompletionItemProvider(languageName, {        triggerCharacters: ['['],        provideCompletionItems: function (model, position, context) {          count=count+1;          if(count===1){            let suggestions = [];            if (context.triggerCharacter === '[') {              [...dimensions, ...modules].forEach((item, index) => {                suggestions.push({                  label: item.customName,                  insertText: `${item.customName}]`,                  kind: 12,                });              });            }            return { suggestions };          }        },      });

这种形式简略粗犷，如果须要插件提醒的内容是固定的，间接用缓存的数据是能够解决这个问题。然而！！！我遇到的需要是，提醒的内容是依据接口动静取的。所以，此法仍旧不通~

思路3：
因为谷歌和百度都没用找到称心的答案，于是去monaco-editor的GitHub 的 issues中查找答案，刚开始依据registerCompletionItemProvider关键字搜寻，然而并没有相似的问题，而后又尝试搜寻provideCompletionItems关键词，最终在issues中找到了2个相似的问题，链接如下：

https://github.com/microsoft/monaco-editor/issues/2217

https://github.com/microsoft/monaco-editor/issues/2084

最终解决办法：
在registerCompletionItemProvider注册创立时，将创立的对象存储起来，如下：

 monacoProviderRef.current = monaco.languages.registerCompletionItemProvider(languageName, {

在组件销毁时，将editor和registerCompletionItemProvider生成的对象一起销毁。代码如下：

useEffect(() => {      // todo      // xxxxxx      return () => {        // 销毁        monacoProviderRef.current?.dispose();        monacoRef.current?.dispose();              };    }, []);

最初测试，bug完满解决！

问题：

设置editor的默认主题，然而Modal第一次展现时，默认主题没有失效，第一次之后主题才会失效，如下图：

设置默认主题代码如下：

monaco.editor.defineTheme('myCoolTheme', {        base: 'vs',        inherit: false,        colors: { token: 'value', foreground: '#00c1de' },        rules: [{ token: 'value', foreground: '#00c1de' }],      });

解决办法

去官网文档中找设置主题的api，发现以上代码是对主题的定义操作，如果要首次运行失效，还须要手动设置一次下面对应定义的主题

monaco.editor.setTheme('myCoolTheme');

最终，问题解决，成果如下：

愿天下没有难解的bug！祝大家中秋节高兴！！！