- 1. 前言
- 2. addExtraLib
- 3. 将loadash库集成zumonacoHerausgeber器中
- 4. 将jquery库集成zumonacoHerausgeber器中
- 5. 总结
前言
在之前的Artikel中，我们介绍了如何在monaco中为某一个方法增加注释，可以通过codelen 也可以通过Marker来显示某个变Quantität，常Quantität，或方法的Dokumentation。但这种方法不太适合大规模的库，比如一个js库有上百个方法，作为一名懒惰的程序员不可能将每一个方法都添加zumonaco中。那么本篇Artikel就来给大家介绍一种借助typescript的Typus声明文件，来增强Herausgeber器的体验。不仅仅能够显示某个方法的详细Dokumentation，还有该方法的自动abgeschlossen.。
核心方法只有一个 addExtraLib()
addExtraLib
由于monaco不像vscode接入来 LSP（语言服务Vereinbarung），所有要大批Quantität地实现自动abgeschlossen.，方法注释比较麻烦，但是monaco增加了addExtraLib 这个方法，这个方法可以传人一个Typus声明的Charaktere串。如下面这样的内容
declare class Facts {
/**
* Returns the next fact
*/
static next(): string
}将这段Text使用addExtraLib 添加zumonaoc语言服务中，那么在用户在编写Facts.next()时，就能够自动abgeschlossen.，并且在next方法显示该方法的注释。如下图
如果你使用tsTypus声明内容创建了一个语言模型，那么你就可以在该方法上Überprüfen具体的声明，如下图：
这种Szene有非常多的好处，特别对于不熟悉某个方法的编程小白。可以直接鼠标悬浮在方法名上，Dokumente ansehen。非常友好，方便。
当你在使用lodash 或jquery 这些js库时，有时会忘记某个方法的vollständigName，或者不记得某个方法的Parameter顺序。这种就需要方法Dokumentation了。
下面我就以lodash和jquery库为例，将其两个库添加zumonaco中。
将loadash库集成zumonacoHerausgeber器中
首先我们先获取lodash的ts声明文件。经过简单的Suche nach，我找zu了这个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 只是一个外壳，实质内容都是Unterteilung散在各个子文件中的。
我们将上面链接的内容保存zulodash.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));这样集成后，看看在Herausgeber器中的表现，当我们打出lodash的命名空间_ 时
然后我们调用 它的 cloneDeep 方法，表现如下图：
是不是非常的棒？
下面再来看一下jquery库的集成
将jquery库集成zumonacoHerausgeber器中
遵循其上的步骤，我们先要获取jqueyr的ts声明文件。
从下面的链接，你可以拿zujquery v2版本的 ts声明。
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/v2/index.d.ts
文件内容拷贝出来，放zu本地文件jquery.d.ts中
修改 monacoTypesUrl 变Quantität为 './jquery.d.ts'
我们在来看一下调用jquery ajax的自动abgeschlossen.。
Überprüfenajax的方法参考
这就是在monaco中集成额外库的优秀体验。能够极大地提升Herausgeber器的用户体验。
除此之外，你还可以同时注入多个ts声明库，也可以自己编写ts声明库来abgeschlossen.自动提示，自动abgeschlossen.。
总结
Herausgeber器是一个非常复杂的软件产品，任何一个可以提升用户体验的Funktion都需要重视。
开发体验直接决定了该产品能否成功。
Antwort veröffentlichen