前の記事
最近、GitlabのWeb IDEを使用しているときに、vueコンポーネントを書くとファイルのサフィックスが.vueになることがわかりました。エディタの右上隅には、現在のプログラミング言語のVueが表示され、構文やタグがハイライトされ、書式設定、折りたたみがうまく機能します。しかし、MonacoはVuejsをサポートしておらず、フロントエンド開発者として、MonacoエディタでVueコンポーネントを書く必要があることがあるので、私は余暇にVuejsをMonacoに統合することについて話しています。Vuejsはプログラミング言語ではなく、HTMLに似ていますが、ここでは説明しない多くの違いがあります。この記事では、Vuejsをモナコに統合する方法を探求し、実践しました。
探検する。
まず、GitLabのWebideでVueコンポーネントがどのように動作するかを見てみましょう。
以下は、Webideでの2つの簡単なVueコンポーネントコードの動作です。
HTMLタグ、プロパティ、JSキーワード、変数など、適切に色分けできることがわかります。欠点がないとは言えませんが、すでに優秀です。（1つの欠点は、スクリプトタグが折り畳まないことです。
この効果を達成するには、2つの部分にminかれています。1つ目は、モナコのvue言語を登録し、言語の対応するプロパティを設定することです。2つ目は、より良いテーマを設定することです。この記事では、Monaco登録にVueプログラミング言語を追加する最初のステップについて説明します。
研究の方向性を決めた後、たくさんの資料を検索しましたが、Vueにモナコを統合する方法についての記事と回答が見つかりました。
唯一重要なのはこの問題です Monaco EditorへのVue JS言語サポートの追加
多くの検索が失敗したため、モナコにVue言語のサポートを追加するという問題はしばらく保留されており、最近挑戦したいと考えています。実際には、この研究テーマは、実際の役割はそれほど大きくはなく、エディタでVueコンポーネントを書くことは直接表示して使用することはできません。一部の大規模なWeb IDEプラットフォームに加えて、個人や中小企業は基本的に使用できません。私が知らない他の用途があるはずです私が知らないものしかし、実際には、私にとっては、それはちょうど必要ではなく、興味のあるポイント、小さな研究テーマです。
この問題を解決する最も簡単な方法は、GitLabのWebideコードを抽出することです。はい、GitHubの膨大なソースコードから、Vue言語をMonacoに登録した方法と設定ファイルを見つけることができます。シンプルだが時間がかかる。不信者は自分自身を見て見つけることができる。
果実を摘むために行く道を知っていたので、私は迷わず旅に出ました。Gitlabのwebide関連のソースコードを浅い研究を開始し、研究は自分自身を誇張していると述べ、実際には段落です。 ctrl + f ctrl + shift +f 。
1つの検索、1つの検索。
実践の実践
それは検索の期間であると言うが、実際にはキーワードを見つける必要があり、検索キーワードはあなたが検索する効率を決定します。
私が使ったキーワードは、最初のステップは registerMonacoにプログラミング言語を追加するには、このメソッドを使用する必要があります。languages.register()。もう一度、キーワードを使うべきです。 registerLanguages 。すぐに欲しいものを見つけました。
GitLabはMonacoを比較的早く使用しているため、この検索にはMonacoバージョンの問題も含まれています。そのバージョンに十分な更新がない場合、バージョンは非常に低くなり、ドキュメントやAPIが一致しない状況につながりやすいです。探しているものが見つからないか、見つけても直接使えない。GitLabで使用されるMonacoバージョンは"monaco-editor": "^0.25.2",
登録言語に関連するいくつかの文書を掲載します。app/assets/javascripts/editor/source_editor.js
registerLanguagesメソッドを使用してカスタム言語を登録する
app/assets/javascripts/ide/lib/languages/vue.js vueプログラミング言語のハイライト、タグなどのプロパティを定義するファイル
app/assets/javascripts/ide/lib/editor.js
トピックの設定、言語の登録
app/assets/javascripts/ide/utils.js
このファイルには、vue.jsで定義されたプロパティを引数として使用するregisterLanguagesメソッドがあります。
モナコとの統合には純粋なHTMLを使っているので、vue.jsを使うには少し変更が必要です。
コード全体は末尾に表示できます。
インポートエクスポートを削除し、言語の列挙値を置き換えます。
vue.jsを修正した後、3つの関数を呼び出すだけでvueをmonacoに統合できます。
コアコードは
const languageId = vueLan.id;
monaco.languages.register(vueLan);
monaco.languages.setMonarchTokensProvider(languageId, vueLan.language);
monaco.languages.setLanguageConfiguration(languageId, vueLan.conf);完全な効果。
完全なコード。
<! DOCTYPE HTML>
<HTMLでは>
<ヘッドヘッドは>
<title VueコンポーネントハイライトHello World @CSDN私のチェック柄をMonacoに連れて行って編集者/title>
<meta ht-iv ="Content-Type" content="text/html;charset=utf-8" />
</head/ヘッド>
<ボディ·ボディ>
<h 2 Hello World CSDN@ Monaco Editor/h 2のチェックマークを取ってください>
<h 2統合vue言語CSDN@私のチェック柄を取るMonaco Editor/h 2>
<div id="cont" style="width 800px; height 600px; der 1px id grey"/div>
<script src="./ monaco-editor/package/min/vs/loader.js "/script>
<script src="./ vue.js"/script>
<スクリプトの作成>
require.config {paths { vs './ monaco-editor/package/min/vs'};
編集者を雇う
require 'vs/editor/editor. main'] function {
const languageId = vueLan.id;
monaco.uages.register vueLan;
monaco.uages.setMonarchensuageId vueLan.;
monaco.uages.setuageConfiguration uageId vueLan.;
editor = monaco.editor.create document.getElementById 'container'{
value vueCom
language 'vue'
});
});
<スクリプト/script>
</body/ボディ>
</htmlは>
Leave a Reply