vue 代碼高亮插件全面對(duì)比測(cè)評(píng)
全面對(duì)比
從活躍方面來看
從功能方面來看
代碼高亮是必須的，社區(qū)必須活躍，不然修復(fù)bug沒有一點(diǎn)點(diǎn)參考，太費(fèi)時(shí)間。自動(dòng)補(bǔ)全縮進(jìn)，快捷鍵操作，搜索和替換等功能不是必須的，如果有，能拿來裝逼當(dāng)然最好，不能也不影響使用。
故而挑出了以下幾個(gè)，再具體分析，逐個(gè)調(diào)查，查看后續(xù)開發(fā)，部署的坑，坑少方便的就被我選中。
深入對(duì)比
1，ace
Ace是一個(gè)用JavaScript編寫的嵌入式代碼編輯器。它與Sublime，Vim和TextMate等原生編輯器的功能和性能相匹配。它可以很容易地嵌入到任何網(wǎng)頁和JavaScript應(yīng)用程序中。
2，codemirror
CodeMirror是一個(gè)用于編輯器文本框textarea代碼高亮javascript插件，為各種編程語言實(shí)現(xiàn)關(guān)鍵字，函數(shù)，變量等代碼高亮顯示，豐富的api和可擴(kuò)展功能以及多個(gè)主題樣式，能滿足您各種項(xiàng)目的需求。
CodeMirror支持大量語言的語法高亮，包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等，以及diff、LaTeX、SQL、wiki、Markdown等文件格式。此外，CodeMirror還支持代碼自動(dòng)完成、搜索/替換、HTML預(yù)覽、行號(hào)、選擇/搜索結(jié)果高亮、可視化tab、Emacs/VIM鍵綁定、代碼自動(dòng)格式等。
CodeMirror采用MIT開源許可協(xié)議，目前已經(jīng)被集成到各種應(yīng)用程序中，如Adobe Brackets、CoDev、Light Table等開發(fā)環(huán)境，還被作為各種SQL、Haxe、JavaScript在線編輯器的基礎(chǔ)庫來使用。
3，monaco
Monaco Editor是為VS Code提供支持的代碼編輯器，運(yùn)行在瀏覽器環(huán)境中。編輯器提供代碼提示，智能建議等功能。供開發(fā)人員遠(yuǎn)程更方便的編寫代碼。移動(dòng)瀏覽器或移動(dòng)Web框架不支持Monaco編輯器。簡單的理解就是VSCode中的代碼編輯器和Monaco Editor使用的很多相同的核心模塊。
4，結(jié)論
總的來說，這三者功能都挺強(qiáng)的，那通過其缺點(diǎn)來挑選一款來使用吧，
ace，沒有代碼對(duì)比的功能，這不行啊，還要做各版本代碼差異對(duì)比呢，出局。（我找了找，發(fā)現(xiàn)有ace-diff這個(gè)插件，可以實(shí)現(xiàn)代碼差異對(duì)比。出局主要是因?yàn)槲铱匆姶虬鼤?huì)有個(gè)坑，ace部署失敗主要原因是不支持webpack打包，ace在本地搭建完成后，會(huì)有一個(gè)小型的worker幫助我們對(duì)內(nèi)容進(jìn)行渲染，webpack打包之后就變成完完全全的靜態(tài)資源了，動(dòng)態(tài)渲染的效果也就沒了，雖然按找官網(wǎng)的意思是可以支持的，但是某博主實(shí)踐了很多方法，均以失敗告終。）
codemirror，其用戶交互效果差些，很多東西需要自己拓展來實(shí)現(xiàn)其效果，學(xué)習(xí)這些拓展肯定是需要花時(shí)間來犯錯(cuò)的。其多文件的引入方式帶來一定的管理不方便以及瀏覽器端的網(wǎng)絡(luò)性能影響。
monaco，微軟的VSCode用的和其通用了很多核心模塊，憑借成熟可靠的產(chǎn)品，用戶交互邏輯最好，原生Visual Studio主題，代碼差異對(duì)比效果也最好。引入文件量巨大，瞅了一眼，大概70多M，引入方式兼容性不太好，打包容易出問題（大部分問題可通過monaco-editor-webpack-plugin插件打包解決）。移動(dòng)瀏覽器或移動(dòng)Web框架不支持Monaco編輯器。demo真的少，官網(wǎng)都沒有，官網(wǎng)很好看的做了本英文參考書，有種英文字典的感覺，密密麻麻羅列了一堆屬性，就是不知道從哪開始動(dòng)手，怎么拼接這些成為demo。
以上就是vue 代碼高亮插件全面對(duì)比測(cè)評(píng)的詳細(xì)內(nèi)容，更多關(guān)于vue 代碼高亮插件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在?Vue?3?中的?Composition?API?中,$refs?并不直接可用于?setup?函數(shù),但是實(shí)際工作中確實(shí)有需求,那么該如何解決呢,本文為大家整理了兩個(gè)方案,希望對(duì)大家有所幫助2023-08-08
這篇文章主要介紹了vue中按鈕操作完刷新頁面的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue組件和插件是Vue生態(tài)系統(tǒng)中的兩種重要概念,它們分別服務(wù)于不同的目的,但都極大地豐富了Vue的功能性和可擴(kuò)展性,下面我們就來看看二者的用法以及區(qū)別吧2024-03-03
vue中.env文件配置環(huán)境變量的實(shí)現(xiàn)
本文主要介紹了vue中.env文件配置環(huán)境變量的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了淺談vuepress 踩坑記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
淺談axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法
在實(shí)際項(xiàng)目中，我們可能需要對(duì)請(qǐng)求進(jìn)行“防抖”處理。本文主要實(shí)現(xiàn)axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求，具有一定的參考價(jià)值，感興趣的可以了解一下2021-08-08
運(yùn)行npm?run?dev報(bào)錯(cuò)的原因及解決
剛剛創(chuàng)建好vue項(xiàng)目的時(shí)候,運(yùn)行 npm run dev 會(huì)報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于運(yùn)行npm?run?dev報(bào)錯(cuò)的原因及解決方法,需要的朋友可以參考下2022-10-10
Vue.js項(xiàng)目實(shí)戰(zhàn)之多語種網(wǎng)站的功能實(shí)現(xiàn)（租車）
這篇文章主要介紹了Vue.js項(xiàng)目實(shí)戰(zhàn)之多語種網(wǎng)站（租車）的功能實(shí)現(xiàn) ,需要的朋友可以參考下2019-08-08
Django+Vue實(shí)現(xiàn)WebSocket連接的示例代碼
這篇文章主要介紹了Django+Vue實(shí)現(xiàn)WebSocket連接的示例代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05