通常我們在寫腳本程序時大多會使用本地集成開發(fā)環(huán)境,比如idea、eclipse、vscode等,這也是我們大多數(shù)程序員熟悉的工作環(huán)境。近幾年基于js核心的web ide逐漸流行,比較常見的有:monaco editor、code mirror、ice等,其中monaco editor功能最強(qiáng)大,和vscode的功能幾乎一樣強(qiáng)大,使用起來也方便很多,效率非常高,可以說比傳統(tǒng)的本地IDE更好用。下面我們就詳細(xì)介紹下現(xiàn)代流行的web IDE。
web IDE的優(yōu)點(diǎn)
1.功能強(qiáng)大。目前以微軟開源的monaco editor功能最強(qiáng)大,因為它和vscode是同一個內(nèi)核,所以vscode有的功能它也具有。
2.使用方便。只要有瀏覽器就可以運(yùn)行非常方便,不需要提前安裝任何插件,即使在手機(jī)中也可以運(yùn)行。
3.容易集成各種其他的工具。
4.開源,完全免費(fèi)。
5.配置簡單,不需要做其他配置,直接上手就可以用。
6.如果有設(shè)備,一般也不需要用usb連接設(shè)備,直接可以在網(wǎng)頁操作。
舉例說明
說了這么多,大家可能還比較陌生,下面我舉個例子說明:
上圖是一個典型的web IDE,整個編輯區(qū)域可以分成三部分,左上為腳本代碼編輯區(qū)域;左下為調(diào)試區(qū),包括log和錯誤等信息顯示區(qū)域;右邊為對應(yīng)手機(jī)設(shè)備的UI樹,顯示了ui細(xì)節(jié)。下面分別詳細(xì)介紹
代碼編輯區(qū)域
代碼編輯區(qū)域使用monaco editor,功能非常強(qiáng)大,支持代碼提示,引用,跳轉(zhuǎn),重命名,搜索。快捷鍵等等,總之本地IDE具有的它都有
1.代碼提示功能,直接把鼠標(biāo)移動到對應(yīng)的函數(shù)上,立馬顯示函數(shù)對應(yīng)的詳情,非常方便。
2.寫代碼時,直接列出所有可能的函數(shù),和對應(yīng)的函數(shù)原型,參數(shù)可以提示,非常便利。
3.在app函數(shù)上點(diǎn)擊右鍵,選擇引用,則會顯示所有引用app函數(shù)的地方,雙擊即可跳轉(zhuǎn)到對應(yīng)的函數(shù)地方。
4.在mac電腦中按command + F可以開始全文搜索,如上圖所示
還有很多功能,限于篇幅這里我就不一一列舉了,大家可以自己去體驗下。
調(diào)試區(qū)
可以實時查看遠(yuǎn)程設(shè)備的log信息,可以在腳本代碼中選擇某一段代碼執(zhí)行,log信息會在下面顯示,如下所示:
顯示錯誤信息,當(dāng)代碼有錯誤時,可以實時顯示并指出具體錯誤信息。
設(shè)備UI信息顯示區(qū)
在整個界面右邊顯示了當(dāng)前選擇的遠(yuǎn)程手機(jī)設(shè)備的UI樹,每個ui控件的詳細(xì)信息等。
可以在這個ui界面中全局搜索ui控件,非常直觀,效率非常高。
總結(jié)
web IDE總體上來說比傳統(tǒng)本地IDE的效率更高,操作更簡便,入門門檻更低,大家可以考慮試下,有任何問題,歡迎在評論區(qū)提問,有問必答。