使用 VSCode 高效開發 ionic

VSCode

剛開始開發 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)進行主題顏色設置,也可以選擇安裝擴展的主題顏色、擴展的圖標等。

主題色選擇

使用技巧

重點中的重點。

  1. 使用插件實現 ionic 代碼提示


    代碼提示
  2. 使用插件實現代碼自動審查
    ionic 使用的是 TypeScript,在插件中尋找 TSLint 即可。審查規則在一定程度上可以自定義,好的審查可以有效避免一些潛在錯誤。

  3. 自動 import 其他文件
    會自動根據文件所在目錄 import,不過有時候路徑會錯,需要手動改。


    自動引入
  4. 代碼格式化
    Alt + Shift + F,瞬間讓你的代碼看起來干凈整潔。

  5. Control + ` 可以直接在本目錄下打開命令行
    按下快捷鍵后,會在底部彈出命令行。加號可以新建更多的命令行,垃圾箱是關閉,叉號是隱藏。所以以后可以不需要新打開一個命令行窗口,直接在里面即可運行 ionic serve。


    命令行

目前就是這么多,我如果發現新的技巧會在后面更新。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。