由于项目上要在已有的代码编辑器上做AI自动补全相关功能,类似于下面这种
这里可以复用已有的代码补全功能,只是有个难点是项目上的编辑器没有预览功能,如图:
为了实现这个预览效果,查询了非常多的教程,最后还是看源码看到的。只需要在初始化monaco-editor时加上配置 suggest - preview - true(吐槽一句,官方教程是真不友好,给完属性也不解释,全靠猜)
this.codeEditor = monaco.editor.create(this.$el as HTMLElement, {
value: this.value,
language: this.language,
theme: this.theme,
automaticLayout: true,
readOnly: this.readonly,
scrollbar: {
horizontalScrollbarSize: 7,
verticalScrollbarSize: 7,
},
suggest: {
preview: true,
},
});
最终实现的效果如下: