普通の人のIDEまたはモナコを選んだ理由

編集者のメモ

前回の記事では、Voximplantコントロールパネルのリリースについて説明しましたが、更新されたIDEについて言及することを忘れていません。 今日、私たちはこのツールに別のロングライドを捧げます-同僚のGeloosaは、テクノロジーの選択プロセスと、タブ、オートコンプリート、カスタムスタイルを使用した実装の両方を慎重に説明しました。 より便利に座って、残りの事柄を脇に置いて、モナコの勇気が好奇心を待っているタックルに行きます-滑らないで、たくさんあります:)読書をお楽しみください。

コードエディターに選択するライブラリはどれですか？

Npmは、コードエディターに対して400以上の結果を生成します。 ほとんどの場合、これらは特定のフレームワークまたはプロジェクト用に作成されたいくつかの最も人気のあるライブラリのUIラッパー、同じライブラリのプラグインまたはそれら自身の変更を加えたフォークであり、ブラウザでコードを編集するためではなく、単にキーワードによって出力されます。 そのため、幸いなことに、選択肢ははるかに狭くなります。 いくつかのライブラリ-CodeFlaskは 、軽量ですがあまり機能的ではなく、小さなスニペットやインタラクティブなサンプル用に設計されていますが、デスクトップエディターで使用されている機能を備えた本格的なWeb IDE用ではありません。

最終的に、 Ace 、 CodeMirror 、およびMonaco Editorから選択できる3つのライブラリがあります。 これらの初期のCodeMirrorは、Berlineer Marijn Haverbekeによる個人的なイニシアチブであり、オンラインチュートリアルEloquent JavaScriptでエクササイズコードエディターが必要でした。 エディターの最初のバージョンは2007年にリリースされました。 2010年、Aceの最初のバージョンが同じベルリンのJSConf.euで発表され、Ajax.orgがクラウドIDE Cloud9用に開発しました（実際、AceはAjax.org Cloud9 Editorの略です）。 2016年、Cloud9はAmazonに買収され、現在はAWSの一部です。 最新のMonaco EditorはVS Codeのコンポーネントであり、2015年末にMicrosoftによって公開されました。

各エディターには長所と短所があり、それぞれが複数の大規模プロジェクトで使用されます。 たとえば、CodeMirrorは、ChromeおよびFirefox開発ツール、BitbucketのIDE、npmのRunKitで使用されます。 エース-MODX、カーンアカデミー、コードアカデミーで Monaco-GitLab IDEおよびCodeSandbox内。 以下は、プロジェクトに最適なライブラリを選択するのに役立つ比較チャートです。

	図書館
	エース	CodeMirror	モナコ
開発者	Cloud9 IDE（Ajax.org）、 現在、AmazonMozillaの一部	まりあん	マイクロソフト
ブラウザのサポート	Firefox ^ 3.5 クロム Safari ^ 4.0 IE ^ 8.0 オペラ^ 11.5	Firefox ^ 3.0 クロム Safari ^ 5.2 IE ^ 8.0 Opera ^ 9.2	Firefox ^ 4.0 クロム サファリ（v-？） IE ^ 11.0 Opera ^ 15.0
言語サポート （構文の強調表示）	> 120	> 100	> 20
の文字数 最新バージョン cndjs.com	366 608（v1.4.3）	394,269（v5.44.0）	2,064,949（v0.16.2）
最新バージョンの重量、 gzip	2.147 KB	1.411 KB	10.898 KB
レンダリング	ドム	ドム	DOMおよび部分的に<canvas> （スクロールとミニマップ用）
ドキュメント	10点中7点：検索なし、必ずしも明確ではない メソッドが返される、疑いがある 完全性と関連性 （すべてのリンクがドックで機能するわけではありません）	10のうち6：ユーザーガイドと統合、 Ctrl + Fで検索、 完全性に疑問がある	10点中9点：美しい、検索あり 相互参照 説明不足の場合は-1ポイント そのアプリケーションのいくつかのフラグに 名前からは明らかではない
クイックスタートデモ	ハウツー-コード例を含むテキストドキュメント、 個別にコード例のデモがあります （本当、それらは異なるページに散らばっており、 すべての人が働いているわけではなく、Googleで最も簡単に検索されます） さまざまな機能に触れることができるデモがあります。 ただし、UIコントロールを使用して管理することを提案しています。 つまり、メソッドを個別に検索する必要があります それらを接続する	ハウツーは本当に貧弱です 基本的にすべてがgithubに散らばっています とstackoverflowが、例と機能のデモがあります 実装のためのコード	遊び場の形式で組み合わせる： コメントと多数のデモを使用してコードを作成できます。 すぐに試して評価する 多くの可能性
コミュニティ活動	平均	高い	平均
開発者の活動	平均	平均	高い

ライブラリをサイズで比較することは意味がありません。すべて特定のプロジェクトに接続する方法と方法に依存するためです。完成したファイルをビルドの1つでロードする（これもさまざまです）か、何らかのコレクターを介してnpmパッケージを実行します。 そして最も重要なのは、エディターの使用量です。すべてのスタイルとテーマがロードされるかどうか、使用されるアドオンとプラグインの数と数です。 たとえば、CodeMirrorでは、MonacoとAceですぐに動作するほとんどの機能は、アドオンでのみ使用できます。 表には、CDNの最近のバージョンの文字数と、どの順序が関係するかについての一般的な考えのための圧縮ファイルの重みが示されています。

すべてのライブラリには、ほぼ同じ基本機能セットがあります：コードの自動書式設定、行の折り畳み、切り取り/コピー/貼り付け、ホットキー、強調表示とテーマの新しい構文を追加する機能、構文チェック（CodeMirror-アドオンのみ、Ace-これまではJavaScriptのみ） / CoffeeScript / CSS / XQuery）、ツールチップとオートコンプリート（CodeMirrorで-アドオンを使用）、コードによる高度な検索（CodeMirrorで-アドオンを使用）、タブと分割モード、diffモード、マージツールの実装方法（CodeMirrorで） -1つのウィンドウにプラスとマイナス、またはアドオンを介した2つのパネルのいずれか、 エース - セパレート・リーブ）。 古くなったため、多くのアドオンがCodeMirror用に作成されていますが、その数はエディターの重量と速度の両方に影響します。 モナコは、すぐに使用できる多くの機能を実行できますが、私の意見では、AceやCodeMirrorよりも優れています。

モナコに滞在した理由はいくつかあります。

1. 私たちのプロジェクトにとって重要と考えられた最も開発されたツール：
   
   • IntelliSense-ヒントとオートコンプリート。
   • コンテキストメニューおよびミニマップによるスマートコードナビゲーション。
   • すぐに使える2パネルdiffモード。
   
   
2. TypeScriptで書かれています。 コントロールパネルはVue + Typescriptで記述されているため、TSサポートが重要でした。 ところで、Aceは最近TSもサポートしていますが、元々はJSで書かれていました。 CodeMirrorの場合、 DefinitelyTypedには型があります 。
3. それは最も積極的に開発されており（おそらく、それほど前にリリースされていないため）、バグはより迅速に修正され、プールリクエストが処理されます。 比較のために、CodeMirrorでは、バグが何年も修正されず、松葉杖を松葉杖に乗せて松葉杖を運転したという悲しい経験がありました。
4. インターフェースとメソッド間の相互参照を含む便利な自動生成（完全性への希望を与える）ドキュメント。
5. 私たちの好みでは、最も美しいUI（おそらく作成時間にも関連）と簡潔なAPIです。
6. どの編集者が最も頭痛の種となったのかを開発者の友人に尋ねた後、エースとCodeMirrorがリーダーでした。

また、仕事のスピードについても言う必要があります。 コストのかかる解析は、並列ワーカースレッドで行われます。 さらに、すべての計算はビューポートのサイズによって制限されます（すべてのタイプ、色、レンダリングは、表示されているラインに対してのみ計算されます）。 コードが100,000行未満の場合にのみ、ブレーキをかけ始めます-プロンプトは数秒間計算できます。 また、重いコンピューティングにワーカーを使用するエースは、より高速であることが判明しました：同じ長さのコードでは、プロンプトがほぼ瞬時に表示され、200,000行にすばやく対応します（公式Webサイトでは、400万行であっても問題ないはずです）ネジが加速され、入力が遅くなり始め、プロンプトが100万回後に消えました）。 並列計算がないCodeMirrorでは、そのようなボリュームを引き出すことは非常に困難です。テキストと構文の強調表示の両方がちらつくことがあります。 ファイル内の100,000行は現実の世界ではまれなので、これに目をつぶった。 40〜5万行のモナコでも、すばらしい仕事をしています。

Monacoの接続と主な機能の使用（Vueとの統合の例）

接続

ここでは、vueコンポーネントのコード例を示し、適切な用語を使用します。 しかし、これらはすべて他のフレームワークまたは純粋なJSに簡単に移植できます。

モナコのソースコードは公式ウェブサイトからダウンロードしてプロジェクトに入れることができます。CDNからそれを拾い上げ、npm経由でプロジェクトに接続できます。 3番目のオプションについて説明し、webpackを使用してビルドします。

モナコエディターとアセンブリ用のプラグインを配置します。

npm i -S monaco-editor npm i -D monaco-editor-webpack-plugin 

webpack構成で、次を追加します。

 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { // ... plugins: [ // ... new MonacoWebpackPlugin() ] }; 

Vueとvue-cli-serviceを使用してビルドする場合、vue.config.jsに追加します。

 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { // ... configureWebpack: (config) => { // ... config.plugins.push(new MonacoWebpackPlugin()); } }; 

Monacoのすべての言語と機能が必要でない場合は、バンドルのサイズを小さくするために、設定を持つオブジェクトをMonacoWebpackPlugin転送できます。

 new MonacoWebpackPlugin({ output: '', // ,     languages: ['markdown'], //     ,     features: ['format', 'contextmenu'] //      }) 

プラグインの機能と言語の完全なリストはこちらです。

エディターを作成してカスタマイズする

editorをインポートし、 editor.create(el: HTMLElement, config?: IEditorConstructionOptions)を呼び出して、エディターを作成するDOM要素を最初の引数として渡します。

エディターコンポーネントで：

 <template> <div ref='editor' class='editor'></div> </template> <script> import {editor} from 'monaco-editor'; import {Component, Prop, Vue} from 'vue-property-decorator'; @Component() export default class Monaco extends Vue { private editor = null; mounted() { this.editor = editor.create(this.$refs.editor); } } </script> <style> .editor { margin: auto; width: 60vw; height: 200px; } </style> 

エディターのコンテナーは、高さがゼロにならないように設定する必要があります。 空のdiv（ゼロの高さ-K.O.）でエディターを作成すると、Monacoはエディターウィンドウで同じ高さをインラインスタイルで書き込みます。

editor.createの2番目のオプション引数は、エディターの構成です。 100を超えるオプションがあります。IEditorConstructionOptionsインターフェイスの詳細な説明はドキュメントにあります。

例として、言語、テーマ、初期テキストを設定し、行の折り返しを有効にします（デフォルトでは折り返されません）。

 const config = { value: `function hello() { alert('Hello world!'); }`, language: 'javascript', theme: 'vs-dark', wordWrap: 'on' }; this.editor = editor.create(this.$refs.editor, config); 

editor.create関数は、 IStandaloneCodeEditorインターフェイスを持つオブジェクトを返します。 これにより、初期設定の変更など、エディターで発生するすべてを制御できるようになりました。

 //        read-only  this.editor.updateOptions({wordWrap: 'off', readOnly: true}); 

痛みのために： updateOptionsは、 IEditorConstructionOptionsではなく、 IEditorOptionsインターフェイスを持つオブジェクトを受け入れます。 それらはわずかに異なります。IEditorConstructionOptionsはより広く、このエディターインスタンスといくつかのグローバルインスタンスのプロパティが含まれます。 updateOptionsプロパティは、 updateOptions 、グローバルeditorメソッドを介して変更されます。 したがって、グローバルに変化するものはすべてのインスタンスで変化します。 これらのオプションの中にthemeます。 テーマが異なる2つのインスタンスを作成します。 両方のyは、最後に指定したもの（ここでは暗い）になります。 グローバルなeditor.setTheme('vs')メソッドも両方​​の件名を変更します。 これは、SPAの別のページにあるウィンドウにも影響します。 そのような場所はほとんどありませんが、それらに従う必要があります。

 <template> <div ref='editor1' class='editor'></div> <div ref='editor2' class='editor'></div> </template> <script> // ... this.editor1 = editor.create(this.$refs.editor1, {theme: 'vs'}); this.editor2 = editor.create(this.$refs.editor2, {theme: 'vs-dark'}); // ... </script> 

エディターを削除

Monacoウィンドウを破棄する場合、 disposeメソッドを呼び出す必要があります。そうしないと、すべてのリスナーがクリアされず、これ以降に作成されたウィンドウが正しく機能せず、いくつかのイベントに数回反応します。

 beforeDestroy() { this.editor && this.editor.dispose(); } 

タブ

ファイルエディタで開いたタブは、同じMonacoウィンドウを使用します。 それらを切り替えるには、IStandaloneCodeEditorメソッドを使用しますsetModelを保存し、 setModelをエディターモデルを更新します。 モデルには、テキスト、カーソル位置、元に戻す/やり直しのアクション履歴が保存されます。 新しいファイルモデルを作成するには、グローバルなeditor.createModel(text: string, language: string)メソッドが使用されます。 ファイルが空の場合、モデルを作成してnullをsetModel渡すことはできません。

差分モード

差分モードの場合、エディターウィンドウの作成時に別のeditorメソッドcreateDiffEditorを使用する必要があります。

 <template> <div ref='diffEditor' class='editor'></div> </template> // ... mounted() { this.diffEditor = editor.createDiffEditor(this.$refs.diffEditor, config); } // ... 

editor.createと同じパラメーターを受け入れますが、構成にはIDiffEditorConstructionOptionsインターフェースが必要です。これは通常のエディター構成とはわずかに異なり、特にvalue持ちません。 比較のためのテキストは、 setModelを介して返されたIStandaloneDiffEditorを作成した後に設定されます 。

 this.diffEditor.setModel({ original: editor.createModel('const a = 1;', 'javascript'), modified: editor.createModel('const a = 2;', 'javascript') }); 

コンテキストメニュー、コマンドパレット、ホットキー

Monacoは、スマートナビゲーション、すべてのオカレンスを変更するマルチカーソル、VSコード（コマンドパレット）のようなコマンドパレットを備えた非ブラウザーコンテキストメニューを使用して、コード作成を高速化する多数の便利なコマンドとホットキーを使用します：

 モナコのコンテキストメニュー 

 モナココマンドパレット 

コンテキストメニューは、 addActionメソッド（ IStandaloneCodeEditorとIStandaloneDiffEditor両方で使用可能）を介して展開され、 IActionDescriptorオブジェクトを受け入れます。


ショートカットをアクションに表示せずにショートカットをアクションにバインドするには、同じメソッドが使用されます。アクションのcontextMenuGroupIdのみが指定されていません。


コマンドパレットには、追加されたすべてのアクションが含まれます。

ヒントとオートコンプリート

これらの目的のために、MonacoはIntelliSenseを使用します 。 スクリーンショットで、彼がどれだけ有用な情報を表示できるかというリンクを読んで確認できます。 言語にまだオートコンプリートがない場合は、 registerCompletionItemProviderを使用して追加できます。 また、JSとTSには、ツールチップとオートコンプリート用のTypeScript定義をロードできるaddExtraLibメソッドが既にあります。

 // ... import {languages} from "monaco-editor"; // ... // ,          private myAddedLib = null; mounted() { // languages     Monaco this.myAddedLib = languages.typescript.javascriptDefaults.addExtraLib('interface MyType {prop: string}', 'myLib'); } beforeDestroy() { //  ,   this.myAddedLib && this.myAddedLib.dispose(); } 

最初のパラメーターでは、行は定義を渡し、2番目ではオプションでlibの名前を渡します。

カスタム言語とテーマ

Monacoには、言語の構文を決定するためのMonarchモジュールがあります。 構文は非常に標準的に記述されています。この言語に特徴的な正規表現とトークンの対応が設定されています。


トークンのテーマ（ IStandaloneThemeDataインターフェイスを持つオブジェクト）を作成して、グローバルeditorインストールすることもできます。

 // ... private myTheme = { base: 'vs', // ,      inherit: true, //       rules: [ {token: 'date', foreground: '22aacc'}, {token: 'variable', foreground: 'ff6600'}, {token: 'text', foreground: 'd4d4d4'}, {token: 'bracket', foreground: 'd4d4d4'} ] }; mounted() { editor.defineTheme('myTheme', this.myTheme); // ... } 

これで、記述言語のテキストは次のようになります。


十分な想像力があれば、この機能を適用できます。 たとえば、開発者向けのパネルにコールログビューアを作成しました。 多くの場合、ログは長くてわかりにくいですが、構文の強調表示、スマート検索、行の折り畳み/展開、必要なコマンド（たとえば、Prettify params）、すべての呼び出し行のIDによる強調表示、またはログ内の時間を別のタイムゾーンに転送して表示それらの中ではるかに簡単になります（スクリーンショットはクリック可能です）：

おわりに

要約すると、モナコは火事だと言います。 彼と数ヶ月働いた後、私は非常に楽しい思い出を持っています。 コードのエディターを選択する場合は、必ずPlaygroundに移動してコードを操作し、他に何ができるかを確認してください。 おそらくこれはまさにあなたが探しているものです。