開發 Angular 必備 VSCode 擴充套件
  • 注意事項
  1. 請記得在套件名稱上加入超連結,連結到該套件在 Visual Studio Marketplace 上的套件位址。
  1. 如果找的到 GitHub 可以標示上去,有教學文連結或影片連結,也可以放上去。
  1. 請記得寫上推薦理由
套件名稱
推薦理由
開發 Angular 4 的時候經常有許多語法糖,對初學者來說經常會打錯,有了這些 Code Snippets 就可以降低打錯字的機會。
[ GitHub ]
在開發 TypeScript 的時候由於會經常用到 ES2015 的 import 語法匯入另一個模組的型別,透過 Auto Import 可以將許多型別自動化載入,大幅縮短開發時間。
[ GitHub ]
只要是在程式碼中輸入「路徑」或「檔名」時,會自動提供輸入建議,並且有路徑檔名的自動完成功能,可以少打一些字。
統一程式碼撰寫的排版格式,適合運用在多人開發上,有些人習慣 tab 縮排,有些則習慣 space 縮排,或是斷行類型( CRLF or LF )的設定,或著當存檔的時候最後一行要留空白,以及檔案的編碼類型、縮排的單位大小、把多餘的空白移除…等相關設定,改善程式碼排版的一致性並有效提升程式碼可讀性。
透過 Angular CLI 進行專案開發時,會有預設的 editorcofig 的設定檔,檔名為 .editorconfig,因此套件安裝完成之後 reload window 立即生效,設定方式可參考連結
[ GitHub ]
有時資料夾結構深,要Import時路徑可能會很多層,這個套件只要用Ctrl+Shift+H (Mac: Cmd+Shift+H) ,直接輸入檔名關鍵字,會以當前的檔案位置,直接將該檔案相對路徑加入。
Architectural analysis and visualization for Angular 2 projects

  • Full integration of angular-cli generate commands (e.g. ng g component) on the explorer's context menu
  • Automatic metadata submission & synchronization to angulardoc.io for analysis
  • "AngularDoc" editor for visualizing the architecture, classes, modules, routes, and imports.
Intelligent and super fast test runner for JavaScript/TypeScript/CoffeeScript.
Icons for Visual Studio Code
A fork from vscode-great-icons. With fewer different icons and some angular icons
安裝 vscode-icons 的時候,每次開啟一個新的 Angular 專案都會建立一個使用者設定檔,專案還會閃爍一下,我後來都改用 VSCode simpler Icons with Angular 專門給 Angular 用的 Icons
TypeScript refactoring tools for Visual Studio Code
This is development branch of VSCode JS/TS colorization. Please file any issues you find against https://github.com/Microsoft/TypeScript-TmLanguage/issues
[ GitHub ]
有許多可以幫你調整 TypeScript 程式碼的好用功能
可以幫你把設定與擴充套件同步
File Peek
根據路徑字符串,快速定位到文件
修改HTML標籤時,自動修改匹配的標籤
可在View中直接切換到對應Component的property
只要在css檔中的所有class都可以具有auto complete的功能,在Angular的專案架構中很方便
在巢狀functoin中用不同顏色提示,比較清楚;但要注意bad smell
在inline template中依然可以使用emmet的功能
使編輯器提供Angular Template IntelliSense
(Requires @angular/language-service@4.1.0-beta  and typescript@2.1.5 
讓Output console有顏色分別顯示
可自動開啟 Markdown 文件預覽視窗
有些 ES5/ES6 常用的 Code Snippets 還蠻實用的
move-ts
可以移動檔案/資料夾,並更新相對應的 import 路徑


以下這一套安裝一次就可以把常用的全裝起來