@[toc]
全面對比
從活躍方面來看
[圖片上傳失敗...(image-accb63-1587000095911)]
從功能方面來看
代碼高亮是必須的，社區(qū)必須活躍凉当，不然修復(fù)bug沒有一點(diǎn)點(diǎn)參考，太費(fèi)時(shí)間。自動(dòng)補(bǔ)全縮進(jìn)而涉，快捷鍵操作是尖，搜索和替換等功能不是必須的惫撰，如果有瞭空，能拿來裝逼當(dāng)然最好，不能也不影響使用雁仲。
故而挑出了以下幾個(gè)仔夺，再具體分析，逐個(gè)調(diào)查攒砖，查看后續(xù)開發(fā)缸兔，部署的坑，坑少方便的就被我選中吹艇。
深入對比
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ù)覽叶堆、行號、選擇/搜索結(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é)論
[圖片上傳失敗...(image-c097ac-1587000095911)]
[圖片上傳失敗...(image-eaf22b-1587000095911)]
總的來說含滴，這三者功能都挺強(qiáng)的诱渤，那通過其缺點(diǎn)來挑選一款來使用吧，
ace谈况，沒有代碼對比的功能勺美，這不行啊递胧，還要做各版本代碼差異對比呢，出局赡茸。（我找了找缎脾，發(fā)現(xiàn)有ace-diff這個(gè)插件，可以實(shí)現(xiàn)代碼差異對比占卧。出局主要是因?yàn)槲铱匆姶虬鼤袀€(gè)坑遗菠，ace部署失敗主要原因是不支持webpack打包，ace在本地搭建完成后华蜒，會有一個(gè)小型的worker幫助我們對內(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主題拾酝，代碼差異對比效果也最好。引入文件量巨大卡者，瞅了一眼蒿囤，大概70多M，引入方式兼容性不太好崇决，打包容易出問題（大部分問題可通過monaco-editor-webpack-plugin插件打包解決）材诽。移動(dòng)瀏覽器或移動(dòng)Web框架不支持Monaco編輯器。demo真的少恒傻，官網(wǎng)都沒有脸侥，官網(wǎng)很好看的做了本英文參考書，有種英文字典的感覺盈厘，密密麻麻羅列了一堆屬性睁枕，就是不知道從哪開始動(dòng)手，怎么拼接這些成為demo。
