使用 Monaco 编辑器的一些总结

type

status

date

slug

summary

对于 monaco 编辑器的选择，我使用了 @monaco-editor/react 库

简单的对齐进行了封装使用

在使用 @monaco-editor/react 库，会通过CDN去加载编辑器的资源

但有时候，我们所需要的环境，并不能直接去访问外网，故我们需要将这些资源改变成本地加载首先我们需要一个公共位置去存放这些资源，如 vite 的 public 文件夹等等我们需要把 monaco-editor 库下载下来，主要是需要 min/vs 内容，提供给编辑器

其实还有另一种方式，是安装 monaco-editor 库，并引入即可，但之前测试的时候是有问题的，包括 webpack 等等，不太稳定，所以没有选择这种方式

通过这种方式，就可以避免编辑器去加载远程资源了

在在线代码里，我们还需要自定义一些专属的东西，如全局上下文等内容

Monaco Editor (microsoft.github.io)

基本的操作方法可以查看一下官网的案例主要就是通过 monaco.languages.registerCompletionItemProvider 方法去注册，然后返回规定格式的 suggestion 即可，最后再选择一个触发方式，即 triggerCharacters。

上面代码实现的就是按下 . 时触发提示，并提示出 test 方法

接下来，我们来根据对象结果信息，动态的去触发提示，并封装几个方法

使用

效果如下

但后面发现，这种方式只对对象有效，而且无法去判别方法和属性等等，而且实现起来很麻烦，所以就有了下面这种方式了

这种方式的话，只需要通过 typescript 的 declare 去声明类型即可，方便很多

还是上面那个例子，现在换一种实现方式

首先先定义所需要的类型声明

注意，使用的时候要变为字符串形式，传入给 monaco 编辑器

然后，在 monaco 编辑器中引入该类型提示即可

JinSo