剛開始開發 ionic 的時候,用的是別的工具。后來發現了 VSCode 這個編輯器,發現相當好用,果斷給新接觸 ionic 的朋友們安利一波。工具這種東西,只要能提高我們的效率,就果斷上。
介紹
Visual Studio Code 是微軟開發的編輯器,界面簡潔漂亮、功能的可擴展性比較強。Ionic的主要編程語言TypeScript 也是由微軟開發的,所以在語言支持上也有不少方便之處,而且編輯器相較于 IDE 一般資源占用低、軟件占空間較小。
安裝
Visual Studio Code
進官網直接點 Download 即可,同時支持 Mac、Windows、Linux。安裝過程不難,不再贅述。編輯器的好處就是
插件安裝
這里是重點,我們點擊左側最下面的按鈕,尋找自己想要的插件,點擊安裝,再點擊重新加載即可使用。插件的種類比較多,有代碼提示、代碼格式化、代碼檢查等。
搜索后,在插件的詳情里可以看到該插件的下載人數,評價星級等。我們直接搜索 ionic,選一些評價較好的進行下載即可。覺得暗色不好看換顏色的話可以使用Ctrl+K、Ctrl+T(Mac上是Command+K、Command+T)進行主題顏色設置,也可以選擇安裝擴展的主題顏色、擴展的圖標等。
使用技巧
重點中的重點。
-
使用插件實現 ionic 代碼提示
代碼提示 使用插件實現代碼自動審查
ionic 使用的是 TypeScript,在插件中尋找 TSLint 即可。審查規則在一定程度上可以自定義,好的審查可以有效避免一些潛在錯誤。-
自動 import 其他文件
會自動根據文件所在目錄 import,不過有時候路徑會錯,需要手動改。
自動引入 代碼格式化
Alt + Shift + F,瞬間讓你的代碼看起來干凈整潔。-
Control + ` 可以直接在本目錄下打開命令行
按下快捷鍵后,會在底部彈出命令行。加號可以新建更多的命令行,垃圾箱是關閉,叉號是隱藏。所以以后可以不需要新打開一個命令行窗口,直接在里面即可運行 ionic serve。
命令行
目前就是這么多,我如果發現新的技巧會在后面更新。