【開發指南】（二）Ionic3開發工具外掛推薦

ionic主要使用網頁的開發方式，一般的web開發的IDE就可以了，有大型的也有輕量級的供考慮，每個開發人員都有自身喜愛和傾向的IDE，在此不一一列舉了，個人推薦VS code，比較輕量型的，下載不用翻牆，重要是開源免費！省卻經常尋找啟用碼的煩惱，此外，官方維護頻繁，功能齊全強大，外掛豐富，同時開源社群活躍，不僅IDE本身，包含外掛的更新得到很好保障。

用於ionic開發的外掛推薦：

Npm Intellisense

模糊查詢模組，已安裝模組快捷匯入，未安裝模組提供一鍵下載安裝，你還在考慮什麼？

Path Intellisense

路徑智慧提示，方便填寫完整路徑

TypeScript Importer

還在手動一個個敲入import {} ?而且還常常敲錯名字或路徑？那你就凹凸曼了，用它幫你自動完成，用得不要太爽。

ts importer

Types auto installer

當安裝一個第三方js包時，如：

npm install --save lodash

外掛會自動執行下屬命令安裝響應types檔案：

npm install --save @types/lodash

Auto Import

有C#或者java經驗的會有似成相識的感覺。

auto-import

ionic 2 Commands with Snippets

有了它，我們不用手動敲打cli的命令來建立各種元件，只需要在要建立目錄右鍵選擇，輸入名稱即可；

ionic2-command snippets

也可以html 中敲入以下命令，快捷建立ionic的標籤，但有些不全

i2-list            //add a ionic list with header and item

i2-list-grp        //add a ionic list with header, group and item

i2-list-reord-grp  //add a ionic group with reorder and iterator

……

Ionic 2 Snippets

html的智慧提示，使用“ion2-”做字首，示例：

ion2-button

ion2-button-block

ion2-button-clear

ion2-button-full

ion2-button-icon-left

……

Ionic 3 ionView Snippets

快捷輸入生命週期相關方法

ionViewDidLoad

ionViewWillEnter

ionViewDidEnter

ionViewDidLeave

ionViewWillUnload

ionViewCanEnter

Ionic2-vscode

適用於不太記得cli命令，或不太樂意手敲命令的人

Ionic Serve

Ionic Emulate Android

Ionic Run Android

Ionic Emulate Ios

Ionic Run Ios

Ionic Generate

REST Client

VSCode上的Postman，方便靈活除錯API。

Import Cost

這款外掛可以顯示import的體積，如果比較大，就可以考慮非同步載入js檔案了。

可惜系統重灌了，原有裝的外掛很多都忘記名字了，不然應付各種開發情況，生活可以更美的。