monaco-editor,代码补全显示预览

1,569 阅读1分钟

由于项目上要在已有的代码编辑器上做AI自动补全相关功能,类似于下面这种 image.png

这里可以复用已有的代码补全功能,只是有个难点是项目上的编辑器没有预览功能,如图: image.png

为了实现这个预览效果,查询了非常多的教程,最后还是看源码看到的。只需要在初始化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,
  },
});

最终实现的效果如下:

image.png