- Ionic 移動開發入門與實戰
- 秦超 李一鳴
- 744字
- 2019-07-30 17:53:16
2.4 安裝開發工具Visual Studio Code(推薦)
在本節前面,讀者根據開發機的操作系統,應該分別通過2.2或2.3的閱讀和安裝實驗,完成了Ionic環境和硬件設備環境的安裝調試,可以正式進入開發了。Ionic框架本身是開源項目,目前并沒有專有的IDE開發環境用于開發。本節筆者推薦介紹適合使用Ionic進行跨平臺移動App開發的免費代碼工具Visual Studio Code供讀者選用。
2.4.1 安裝開發工具Visual Studio Code
Visual Studio Code是當前比較適合Ionic開發的跨平臺(支持Windows、Linux、OSX)文本編輯器,它的優勢在于其漂亮的用戶界面、多窗口視圖布局和強大的功能。其開發商Microsoft也開發了Ionic的主要編程語言TypeScript,所以用起來有很多方便之處。讀者可以到其官方網站:https://code.visualstudio.com/根據開發機的操作系統下載安裝,參見圖2.42所示。

圖2.42 Visual Studio Code官方網站下載頁
Visual Studio Code被安裝完畢后,讀者可以啟動它,嘗試使用它打開任何目錄,可以通過直接將文件夾拖入或者點擊文件然后點擊打開文件夾的方式打開項目,如圖2.43所示。在這個歡迎使用界面,我們可以清晰地看到它的方便之處,可以直接打開文件夾,也可以自定義對于各種編程語言的支持,甚至可以根據用戶對于其他軟件的習慣安裝鍵盤的快捷方式,對于顏色主題也可以進行自定義。在幫助模塊也對于使用方法進行了指導,有興趣的讀者可以自行查閱。

圖2.43 Visual Studio Code窗口布局
2.4.2 安裝Ionic輔助編碼插件
Visual Studio Code的擴展功能非常強大,可以直接進行搜索和安裝,如圖2.44所示。

圖2.44 安裝Visual Studio Code的Ionic擴展
為了方便Ionic的開發,讀者可以自行選擇當前最新并且評分比較高的擴展進行安裝。點擊安裝等待完成后,點擊重新加載即可。這些擴展主要包括了相關的代碼提示等功能,可以方便我們進行開發,但并不是必需的。
在鍵盤上分別按下Ctrl+K、Ctrl+T(Mac上是Command+K、Command+T)可以進行主題顏色設置,也可以選擇安裝擴展的主題顏色、擴展的圖標等,如圖2.45所示。筆者為了圖書印刷效果,選擇了方便讀者觀看的淺色主題。

圖2.45 Visual Studio Code的顏色主題