​​開發 Angular 必備 VSCode 擴充套件
  • ​​注意事項：
  1. ​​請記得在套件名稱上加入超連結，連結到該套件在 Visual Studio Marketplace 上的套件位址。
  1. ​​如果找的到 GitHub 可以標示上去，有教學文連結或影片連結，也可以放上去。
  1. ​​請記得寫上推薦理由。
​​
​​套件名稱
​​推薦理由
​​Angular v4 TypeScript Snippets
​​[ GitHub ]
​​開發 Angular 4 的時候經常有許多語法糖，對初學者來說經常會打錯，有了這些 Code Snippets 就可以降低打錯字的機會。
​​Auto Import
​​[ GitHub ]
​​在開發 TypeScript 的時候由於會經常用到 ES2015 的 import 語法匯入另一個模組的型別，透過 Auto Import 可以將許多型別自動化載入，大幅縮短開發時間。
​​Path Intellisense
​​[ GitHub ]
​​只要是在程式碼中輸入「路徑」或「檔名」時，會自動提供輸入建議，並且有路徑檔名的自動完成功能，可以少打一些字。
​​EditorConfig for VS Code
​​[ GitHub ]
​​統一程式碼撰寫的排版格式，適合運用在多人開發上，有些人習慣 tab 縮排，有些則習慣 space 縮排，或是斷行類型( CRLF or LF )的設定，或著當存檔的時候最後一行要留空白，以及檔案的編碼類型、縮排的單位大小、把多餘的空白移除…等相關設定，改善程式碼排版的一致性並有效提升程式碼可讀性。
​​透過 Angular CLI 進行專案開發時，會有預設的 editorcofig 的設定檔，檔名為 .editorconfig，因此套件安裝完成之後 reload window 立即生效，設定方式可參考連結
​​Relative Path
​​[ GitHub ]
​​有時資料夾結構深，要Import時路徑可能會很多層，這個套件只要用Ctrl+Shift+H​ (Mac: Cmd+Shift+H​) ，直接輸入檔名關鍵字，會以當前的檔案位置，直接將該檔案相對路徑加入。
​​AngularDoc for Visual Studio Code 
​​
​​http://angulardoc.io/
​​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.
​​Wallaby.js
​​Intelligent and super fast test runner for JavaScript/TypeScript/CoffeeScript.
​​vscode-icons
​​Icons for Visual Studio Code
​​VSCode simpler Icons with Angular
​​A fork from vscode-great-icons. With fewer different icons and some angular icons
​​安裝 vscode-icons 的時候，每次開啟一個新的 Angular 專案都會建立一個使用者設定檔，專案還會閃爍一下，我後來都改用 VSCode simpler Icons with Angular 專門給 Angular 用的 Icons
​​refactorix
​​TypeScript refactoring tools for Visual Studio Code
​​Latest TypeScript and Javascript Grammar
​​This is development branch of VSCode JS/TS colorization. Please file any issues you find against https://github.com/Microsoft/TypeScript-TmLanguage/issues
​​TypeScript Hero
​​[ GitHub ]
​​有許多可以幫你調整 TypeScript 程式碼的好用功能
​​Settings Sync
​​可以幫你把設定與擴充套件同步
​​File Peek
​​根據路徑字符串，快速定位到文件
​​Auto Rename Tag
​​修改HTML標籤時，自動修改匹配的標籤
​​Angular2 Switcher
​​可在View中直接切換到對應Component的property
​​HTML CSS Class Completion
​​只要在css檔中的所有class都可以具有auto complete的功能，在Angular的專案架構中很方便
​​Bracket Pair Colorizer
​​在巢狀functoin中用不同顏色提示，比較清楚；但要注意bad smell
​​Angular 2 TypeScript Emmet
​​在inline template中依然可以使用emmet的功能
​​Angular Language Service
​​[ GitHub ]
​​使編輯器提供Angular Template IntelliSense
​​(Requires @angular/language-service@4.1.0-beta​  and typescript@2.1.5​ 
​​Output Colorizer
​​讓Output console有顏色分別顯示
​​Auto-Open Markdown Preview
​​[ GitHub ]
​​可自動開啟 Markdown 文件預覽視窗
​​JavaScript (ES6) code snippets
​​有些 ES5/ES6 常用的 Code Snippets 還蠻實用的
​​move-ts
​​可以移動檔案/資料夾，並更新相對應的 import 路徑
​​
​​
​​以下這一套安裝一次就可以把常用的全裝起來
​​
​​
​​