[技術探討] Cordova的編譯好幫手-Visual Studio Code & Git

Cordova的編譯好幫手-Visual Studio Code & Git

在前面的文章有介紹到Cordova的開發,使開發者能省下時間並達到跨平台的效果,但對於原生IOS與Android都有各個自的開發工具XCode、Android Studio等等,而且近年來Hybrid APP也越來越多人在開發,這時後就來稍微介紹一下Visual Studio Code這個好用的編譯工具。

在進入前,先簡單的淺談了解一下Visual Studio Code:

  1. 是由微軟所開發,且能夠在Windows、OS X和Linux的作業系統下安裝和執行。
  2. 支援多種程式語言,且還能安裝多種的擴充功能或輔助工具來幫助使用著開發。
  3. 能夠使用Git版本控制,方便使用者進行程式碼管理(後面會再詳細介紹)。
  4. 具有命令面板,讓開發者能夠輸入命令或安裝其他模組。

 

首先安裝好並開啟你所建立的Cordova專案,先特別介紹一下,當執行Hybrid APP時最需要的就是能夠在不同平台執行與測試,這時候可以透過擴充功能來安裝Cordova Tool,之後再DEBUG頁面點選->(齒輪按鈕)Configure or Fix”launch.json”->Cordova

Visual Studio Code

Visual Studio Code

如此一來便可以方便產生launch.json檔在不同平台進行測試,開發者不用再開啟其他原生的編譯工具來進行程式測試,是不是非常方便呢!

 

接下來在Visual Studio Code裡面也有Terminal唷,對於Cordova的開發而言,常常需要透過一些指令像是:

*Plugin的安裝:  cordova plugin add cordova-plugin-camera

*Platform的指令: cordova platform add ios/android

利用這樣的方式,來達到管理程式與命令的執行,對於程式的開發者來說方便又清楚。

 

Visual Studio Code

 

既然是一款編譯器,那不得不介紹一下它的功能,在一開始已經內建了Angularjs的Intellisense的功能,輸入關鍵字便會出現angularjs的提示,

 

Visual Studio Code

 

而前面也提到你若是要有其他輔助功能等,更可以到Extensions頁面,輸入關鍵字便可跳出相關的擴充功能來使用,來豐富其他語言的支持與改善你編譯的流程與方便性,像是還有查詢功能或是DEBUG CONSOLE的頁面,都能讓你開發更加便利。

 

最後來談到Visual Studio Code裡Git的整合功能,首先我可以在Github上建立新的Respository,接著透過 git clone [URL] 來到電腦的local端,接著再到Visual Studio Code開啟剛剛下載的資料夾,便會發現Git的頁面裡會自動匯入這個目錄Git的資訊,在你更改檔案中程式碼的同時,便會在CHANGEA清單裡發現有更改的部分,

 

Visual Studio Code

 

而可以看到畫面上有許多的ICON圖示,像是選取其中一個便可以點選加號來確認變更或是點選箭頭來取消變更,在上方也有能註解這次變更的Message來輸入,接下來透過上面的勾勾或是點選更多(ICON)來執行COMMIT的動作,

 

Visual Studio Code

 

另外透過Visual Studio Code的命令輸入框,並帶入git的相關指令,並可以做一些互動與指令的功能,最後點選PUSH的選項,然後要求使用者輸入帳號與密碼便能成功地完成更新囉!是不是讓你很心動,也想開始在Visual Studio Code上開發Cordova的程式呢?推薦能夠去擴充Git History來快速進行Git的管理,或是使用Visual Studio Team Services來與你的夥伴們一起管理都很幫便唷,你也可以自己開發的擴充套件包來讓大家一起體驗你獨特的套件功能吧!!

 

Visual Studio Code是個非常方便的編譯器,能夠同時對應不同的平台,也有許多的擴充功能,希望大家能夠嘗試看看,也期待它未來的發展吧。

 

參考資料:

https://zh.wikipedia.org/wiki/Visual_Studio_Code

https://dotblogs.com.tw/lapland/2016/04/19/172848

https://code.visualstudio.com/docs

 

 


發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料