前言
在之前的文章中，我们介绍了如何在monaco中为某一个方法增加注释，可以通过codelen 也可以通过Marker来显示某个变量，常量，或方法的文档。但这种方法不太适合大规模的库，比如一个js库有上百个方法，作为一名懒惰的程序员不可能将每一个方法都添加到monaco中。那么本篇文章就来给大家介绍一种借助typescript的类型声明文件，来增强编辑器的体验。不仅仅能够显示某个方法的详细文档，还有该方法的自动完成。
核心方法只有一个 addExtraLib()
addExtraLib
由于monaco不像vscode接入来 LSP（语言服务协议），所有要大批量地实现自动完成，方法注释比较麻烦，但是monaco增加了addExtraLib 这个方法，这个方法可以传人一个类型声明的字符串。如下面这样的内容
declare class Facts {
/**
* Returns the next fact
*/
static next(): string
}将这段文本使用addExtraLib 添加到monaoc语言服务中，那么在用户在编写Facts.next()时，就能够自动完成，并且在next方法显示该方法的注释。如下图
如果你使用ts类型声明内容创建了一个语言模型，那么你就可以在该方法上查看具体的声明，如下图：
这种场景有非常多的好处，特别对于不熟悉某个方法的编程小白。可以直接鼠标悬浮在方法名上，查看文档。非常友好，方便。
当你在使用lodash 或jquery 这些js库时，有时会忘记某个方法的完整名称，或者不记得某个方法的参数顺序。这种就需要方法文档了。
下面我就以lodash和jquery库为例，将其两个库添加到monaco中。
将loadash库集成到monaco编辑器中
首先我们先获取lodash的ts声明文件。经过简单的搜索，我找到了这个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));这样集成后，看看在编辑器中的表现，当我们打出lodash的命名空间_ 时
然后我们调用 它的 cloneDeep 方法，表现如下图：
是不是非常的棒？
下面再来看一下jquery库的集成
将jquery库集成到monaco编辑器中
遵循其上的步骤，我们先要获取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的自动完成。
查看ajax的方法参考
这就是在monaco中集成额外库的优秀体验。能够极大地提升编辑器的用户体验。
除此之外，你还可以同时注入多个ts声明库，也可以自己编写ts声明库来完成自动提示，自动完成。
总结
编辑器是一个非常复杂的软件产品，任何一个可以提升用户体验的功能都需要重视。
开发体验直接决定了该产品能否成功。
