在monaco中引入额外tsType库，极大地增强Edit器体验

前言

在之前的文章中，我们介绍了如何在monaco中为某一个方法增加注释，可以通过codelen 也可以通过Marker来显示某个变量，常量，或方法的Document。但这种方法不太适合大规模的库，比如一个js库有上百个方法，作为一名懒惰的程序员不可能将每一个方法都添加到monaco中。那么本篇文章就来给大家介绍一种借助typescript的Type声明文件，来增强Edit器的体验。不仅仅能够显示某个方法的详细Document，还有该方法的自动Complete。

核心方法只有一个 addExtraLib()

addExtraLib

由于monaco不像vscode接入来 LSP（语言服务协议），所有要大批量地实现自动Complete，方法注释比较麻烦，但是monaco增加了addExtraLib 这个方法，这个方法可以传人一个Type声明的字符串。如下面这样的内容

declare class Facts {
  /**
   * Returns the next fact
   */
  static next(): string
}

将这段Text使用addExtraLib 添加到monaoc语言服务中，那么在用户在编写Facts.next()时，就能够自动Complete，并且在next方法显示该方法的注释。如下图

如果你使用tsType声明内容创建了一个语言模型，那么你就可以在该方法上View具体的声明，如下图：

这种Scene有非常多的好处，特别对于不熟悉某个方法的编程小白。可以直接鼠标悬浮在方法名上，View documentation。非常友好，方便。

当你在使用lodash 或jquery 这些js库时，有时会忘记某个方法的完整名称，或者不记得某个方法的参数顺序。这种就需要方法Document了。

下面我就以lodash和jquery库为例，将其两个库添加到monaco中。

将loadash库集成到monacoEdit器中

首先我们先获取lodash的ts声明文件。经过简单的Search，我找到了这个git仓库，https://github.com/DefinitelyTyped/DefinitelyTyped
这个仓库里存放了非常多的我们常用的库的ts声明。
我们知道lodash的ts声明。在此处可以获取
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/lodash/v3/index.d.ts
注意有些库的index.d.ts 只是一个外壳，实质内容都是分散在各个子文件中的。
我们将上面链接的内容保存到lodash.d.ts文件中

然后html中使用fetch获取该文件的具体内容，核心代码如下

const monacoTypesUrl = './lodash.d.ts'
const libSource = await (await fetch(monacoTypesUrl)).text();
console.log(libSource)

var libUri = "ts:filename/lodash.d.ts";
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
// When resolving definitions and references, the editor will try to use created models.
// Creating a model for the library allows "peek definition/references" commands to work with the library.
monaco.editor.createModel(libSource, "typescript", monaco.Uri.parse(libUri));

这样集成后，看看在Edit器中的表现，当我们打出lodash的命名空间_ 时

然后我们调用 它的 cloneDeep 方法，表现如下图：

是不是非常的棒？

下面再来看一下jquery库的集成

将jquery库集成到monacoEdit器中

遵循其上的步骤，我们先要获取jqueyr的ts声明文件。
从下面的链接，你可以拿到jquery v2版本的 ts声明。
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/v2/index.d.ts

文件内容拷贝出来，放到本地文件jquery.d.ts中
修改 monacoTypesUrl 变量为 './jquery.d.ts'

我们在来看一下调用jquery ajax的自动Complete。

Viewajax的方法参考

这就是在monaco中集成额外库的优秀体验。能够极大地提升Edit器的用户体验。

除此之外，你还可以同时注入多个ts声明库，也可以自己编写ts声明库来Complete自动提示，自动Complete。

总结

Edit器是一个非常复杂的软件产品，任何一个可以提升用户体验的Function都需要重视。
开发体验直接决定了该产品能否成功。