前の記事
以前の記事では、モナコでメソッドにコメントを追加する方法を説明しました。codelenまたはMarkerを使用して、変数、定数、メソッドのドキュメントを表示します。しかし、このアプローチは大規模なライブラリにはあまり適していません。例えば、Javaライブラリには何百ものメソッドがあり、怠惰なプログラマがすべてのメソッドをモナコに追加することは不可能です。そこで、この記事では、エディタのエクスペリエンスを向上させるためにTypeScript型宣言ファイルを紹介します。メソッドの詳細なドキュメントだけでなく、そのメソッドの自動補完も表示できます。
コアメソッドは1つだけです。 addExtraLib()
addExtraLib
モナコはvscodeアクセスLSP（言語サービスプロトコル）とは異なり、自動補完を大量に実装する必要があり、メソッドアノテーションは面倒ですが、monacoは型宣言の文字列を渡すaddExtraLibメソッドを追加しました。以下のような内容。
declare class Facts {
/**
* Returns the next fact
*/
static next(): string
}addExtraLibを使用してこのテキストをmonaoc言語サービスに追加すると、ユーザが書いています。Facts.next()これは自動的に行われ、nextメソッドにそのメソッドのコメントが表示されます。下の写真は
ts型宣言の内容を使用して言語モデルを作成した場合、次の図のようにメソッド上で具体的な宣言を見ることができます：
このシナリオには、特に特定の方法に精通していないプログラマにとって、多くの利点があります。メソッド名にマウスオーバーしてドキュメントを表示できます。とてもフレンドリーで便利です。
lodashやjQueryのようなJava Scriptライブラリを使用しているとき、メソッドの完全な名前を忘れたり、メソッドの引数の順序を覚えていないことがあります。メソッドファイルが必要です。
以下では、lodashとjQueryライブラリを例にとり、Monacoに2つのライブラリを追加します。
loadashライブラリのmonacoエディタへの統合
まず、lodashのTS宣言ファイルを取得します。簡単な検索の結果、https//github.com/DefinitelyTyped/DefinitelyTypedというgitリポジトリを見つけました。
このリポジトリには、よく使うライブラリの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 v 2のTS宣言を入手できます。
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/v2/index.d.ts
ファイルの内容をコピーして、ローカルファイルjquery.d.tsに配置します。
変更点は monacoTypesUrl 変数は './jquery.d.ts'
jQuery Ajaxの自動補完を見てみましょう。
Ajaxの参照方法
これはモナコで追加ライブラリを統合する素晴らしい経験です。エディタのユーザーエクスペリエンスを大幅に向上させます。
さらに、複数のTS宣言ライブラリを同時に注入することもできますし、自動プロンプトを完了するために独自のTS宣言ライブラリを記述することもできます。
概要まとめ
エディタは非常に複雑なソフトウェア製品であり、ユーザーエクスペリエンスを向上させる機能には注意が必要です。
開発経験は、製品の成功を直接決定します。
Leave a Reply