開發工具
Visual Studio Code
相關套件：
必要安裝
- Angular v4 TypeScript Snippets：Angular程式碼片段提示
- Latest TypeScript and Javascript Grammar：標亮TypeScript和Javascript語法
- TypeScript Toolbox：自動化功能。包括添加import、產生建構式以及Getter和Setter方法。
- Auto Import：可在輸入時提示可用的import以及自動完成功能
- Path Intellisense：提示路徑以及自動完成功能
- vscode-icons：分類圖示
選擇安裝
- Angular-io-Code：VSCode色彩主題
- EditorConfig for VS Code：讓VSCode可自訂編輯器設定
- refactorix：重構程式碼工具
- JavaScript (ES6) code snippets：可用簡短字串提示並自動完成Javascript與TypeScript程式碼
HTML Snippets：在Template中可提示並自動完成HTML標籤
Auto Rename Tag：變更tag頭時自動一併變更tag尾
- vscode-ng-language-service1：在Template中可用ng字串提示並自動完成angular指令
- Git History：查看文件或資料夾的版控歷史
1 需手動安裝。下載後在VSCode中開啟功能指令搜尋(Ctrl + e)，輸入>後輸入vsix，選擇擴充功能：從VSIX安裝，選擇下載的ngls.vsix檔案，之後重新啟動VSCode。
常用快捷鍵：
介面相關
- 畫面縮放：
- 縮小：
Ctrl + - - 放大：
Ctrl + =
- 縮小：
- 切換開啟的編輯器頁籤
- 上一個頁籤：
Ctrl + PageUp - 下一個頁籤：
Ctrl + PageDown
- 上一個頁籤：
- 開啟/關閉檔案總管：
Ctrl + b
- 畫面縮放：
查找相關
- 查找文件：
Ctrl + f - 查找並替換文件：
Ctrl + h - 查找專案文件：
Ctrl + Shift + f
- 查找文件：
游標相關
- 跳至行首：
Home - 跳至行尾：
End - 跳至文件首：
Ctrl + Home - 跳至文件尾：
Ctrl + End - 選取當前行：
Ctrl + i - 往上選取行：
Ctrl + Alt + ArrowUp - 往下選取行：
Ctrl + Alt + ArrowDown
- 跳至行首：
定義與引用相關
- 觀看定義：
Alt + F12 - 跳至定義：
F12 - 查看引用：
Shift + F12
- 觀看定義：
程式碼相關
- 自動排版：
Alt + Shift + F - 縮排：
- 縮進：
Tab - 退回：
Shift + tab
- 縮進：
- 註解/反註解：
Ctrl + / - 重命名：
F2 - 復原/回復
- 上一步：
Ctrl + z - 下一步：
Ctrl + Shift + z
- 上一步：
- 移動程式碼：
- 往上：
Alt + ArrowUp - 往下：
Alt + ArrowDown
- 往上：
- 插入空白行：
- 當前行下方：
Ctrl + Enter - 當前行上方：
Ctrl + Shift + enter
- 當前行下方：
- 自動排版：