全面對比

從活躍方面來看

從功能方面來看

程式碼高亮是必須的，社群必須活躍，不然修復bug沒有一點點參考，太費時間。自動補全縮排，快捷鍵操作，搜尋和替換等功能不是必須的，如果有，能拿來裝逼當然最好，不能也不影響使用。

故而挑出了以下幾個，再具體分析，逐個調查，檢視後續開發，部署的坑，坑少方便的就被我選中。

深入對比

1，ace

Ace是一個用javascript編寫的嵌入式程式碼編輯器。它與Sublime，Vim和TextMate等原生編輯器的功能和效能相匹配。它可以很容易地嵌入到任何網頁和javaScript應用程式中。

點選檢視官網

2，codemirror

CodeMirror是一個用於編輯http://www.cppcns.com

CodeMirror支援大量語言的語法高亮，包括C、C++、C#、Java、Perl、php、JavaScript、python、Lua、Go、Groovy、Ruby等，以及diff、LaTeX、SQL、wiki、Markdown等檔案格式。此外，CodeMirror還支援程式碼自動完成、搜尋/替換、HTML預覽、行號、選擇/搜尋結果高亮、視覺化tab、Emacs/VIM鍵繫結、程式碼自動格式等。

CodeMirror採用MIT開源許可協議，目前已經被集www.cppcns.com

點選檢視官網

3，monaco

Monaco Editor是為VS Code提供支援的程式碼編輯器，執行在瀏覽器環境中。編輯器提供程式碼提示，智慧建議等功能。供開發人員遠端更方便的編寫程式碼。移動瀏覽器或移動Web框架不支援Monaco編輯器。簡單的理解就是VSCode中的程式碼編輯器和Monaco Editor使用的很多相同的核心模組。

4，結論

總的來說，這三者功能都挺強的，那通過其缺點來挑選一款來使用吧，

ace，沒有程式碼對比的功能，這不行啊，還要做各版本程式碼差異對比呢，出局。（我找了找，發現有ace-diff這個外掛，可以實現程式碼差異對比。出局主要是因為我看見打包會有個坑，ace部署失敗主要原因是不支援webpack打包，ace在本地搭建完成後，會有一個小型的worker幫助我們對內容進行渲染，webpack打包之後就變成完完全全的靜態資源了，動態渲染的效果也就沒了，雖然按找官網的意思是可以支援的，但是某博主實踐了很多方法，均以失敗告終。）

codemirror，其使用者互動效果差些，www.cppcns.com很多東西需要自己拓展來實現其效果，學習這些拓展肯定是需要花時間來犯錯的。其多檔案的引入方式帶來一定的管理不方便以及瀏覽器端的網路效能影響。

monaco，微軟的VSC程式設計客棧ode用的和其通用了很多核心模組，憑藉成熟可靠的產品，使用者互動邏輯最好，原生Visual Studio主題，程式碼差異對比效果也最好。引入檔案量巨大，瞅了一眼，大概70多M，引入方式相容性不太好，打包容易出問題（大部分問題可通過monaco-editor-webpack-plugin外掛打包解決）。移動瀏覽器或移動Web框架不支援Monaco編輯器。demo真的少，官網都沒有，官網很好看的做了本英文參考書，有種英文字典的感覺，密密麻麻羅列了一堆屬性，就是不知道從哪開始動手，怎麼拼接這些成為demo。

以上就是vue 程式碼高亮外掛全面對比測評的詳細內容，更多關於vue 程式碼高亮外掛的資料請關注我們其它相關文章！