Vue コード強調プラグインの総合的な比較と評価

総合的な比較

アクティブの観点から

機能的な観点から

コードのハイライト表示は必須であり、コミュニティはアクティブでなければなりません。そうでないと、参照なしでバグを修正するのに時間がかかりすぎてしまいます。自動インデント補完、ショートカットキー操作、検索・置換などの機能は不要です。あれば自慢できるほど使えればベストですが、無くても使い勝手には影響ありません。

そこで、以下のものをピックアップし、詳細に分析し、一つ一つ調査し、その後の開発や展開の落とし穴をチェックしました。落とし穴が少なく、利便性が高いものを私が選択しました。

詳細な比較

1. エース

Ace は JavaScript で書かれた埋め込み可能なコード エディターです。 Sublime、Vim、TextMate などのネイティブ エディターのパワーとパフォーマンスに匹敵します。あらゆる Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。

クリックして公式サイトを見る

2. コードミラー

CodeMirror は、エディターのテキストエリアのコードを強調表示するための JavaScript プラグインです。さまざまなプログラミング言語のキーワード、関数、変数などを強調表示できます。豊富な API、拡張可能な機能、複数のテーマ スタイルを備えており、さまざまなプロジェクトのニーズに対応します。

CodeMirror は、C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby などの多数の言語の構文強調表示と、diff、LaTeX、SQL、wiki、Markdown などのファイル形式をサポートしています。さらに、CodeMirror は、コードの自動補完、検索/置換、HTML プレビュー、行番号、選択/検索結果の強調表示、ビジュアル タブ、Emacs/VIM キー バインディング、コードの自動フォーマットなどもサポートしています。

CodeMirror は MIT オープンソースライセンス契約を採用しており、Adobe Brackets、CoDev、Light Table などの開発環境など、さまざまなアプリケーションに統合されています。また、さまざまな SQL、Haxe、JavaScript オンラインエディターの基本ライブラリとしても使用されています。

クリックして公式サイトを見る

3. モナコ

Monaco エディターは、VS Code を強化し、ブラウザー環境で実行されるコード エディターです。エディターは、コードヒント、スマート提案、その他の機能を提供します。これにより、開発者はリモートでより便利にコードを記述できるようになります。 Monaco エディターは、モバイル ブラウザーまたはモバイル Web フレームワークではサポートされていません。簡単に言えば、VSCode のコード エディターと Monaco エディターは、同じコア モジュールの多くを使用します。

4. 結論

一般的に、これら 3 つの機能は非常に強力なので、それぞれの欠点に基づいて使用するものを選択してください。

ace、コード比較機能がありません。これは良くありません。各バージョンのコード間の違いを比較する必要があるので、アウトです。 (検索して、コード差分比較を実現できる ace-diff というプラグインを見つけました。ace のデプロイが失敗した主な理由は、webpack パッケージングをサポートしていなかったことです。ace をローカルでビルドした後、小さなワーカーがコンテンツのレンダリングを手伝ってくれました。webpack パッケージングした後、完全に静的なリソースになり、動的なレンダリング効果がなくなりました。公式サイトによるとサポートされているものの、ブロガーがさまざまな方法を試しましたが、すべて失敗に終わりました。)

Codemirror はユーザーインタラクション効果が乏しく、その効果を得るには多くのことを自分で拡張する必要があります。これらの拡張機能を学習するには間違いなく時間がかかり、間違いも発生します。複数のファイルを導入する方法は、管理上の不便さをもたらし、ブラウザのネットワーク パフォーマンスに影響を与えます。

monaco は、Microsoft の VSCode と多くのコアモジュールを共通で使用しています。成熟した信頼性の高い製品で、ユーザーインタラクションロジックが最高で、ネイティブの Visual Studio テーマ、コード差分比較効果も最高です。インポートされたファイルの量が膨大です。見てみたところ約 70M あります。インポート方法に互換性があまりなく、パッケージングに問題が発生しやすいです (monaco-editor-webpack-plugin プラグインでパッケージングすることでほとんどの問題は解決できます)。 Monaco エディターは、モバイル ブラウザーまたはモバイル Web フレームワークではサポートされていません。デモは本当に少なく、公式サイトにさえありません。公式サイトは非常に見栄えがよく、英語の辞書のような英語の参考書があります。そこにはたくさんの属性が密集してリストされていますが、どこから始めればよいのか、どのようにそれらをデモに組み合わせればよいのかわかりません。

上記は、vue コードハイライトプラグインの総合的な比較と評価の詳細な内容です。vue コードハイライトプラグインの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。