詳解目前最流行的web IDE

通常我們在寫腳本程序時大多會使用本地集成開發(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ū)提問,有問必答。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容