1. 準備開發工具

一、安裝

1. 本次研習用 Visual Studio Code 來進行開發  https://code.visualstudio.com/Download
2. https://nodejs.org/en/
3. 請下載適合的版本來安裝使用。

二、安裝擴充套件

1. 以下是建議安裝的套件：
   • AutoFileName : 讓編輯器自動完成圖片或檔案路徑。
   • Auto Rename Tag : 讓成對的標籤自動一起修改。
   • Auto Close Tag : 讓標籤自動閉合的。
   • Bootstrap 4 & Font awesome snippets : 插入 snippets 的工具，插入 Bootstrap 4 或 Font awesome 圖示。
     • 輸入b4 或fa 即可挑選想用的程式片段
   • stylefmt：美化CSS
   • Preview on Web Server : 將編輯的頁面直接在側邊或預設瀏覽器中預覽
     • Ctrl+Shift+P：在編輯器中開出預覽視窗
     • Ctrl+Shift+L：在預設瀏覽器預覽

三、設定

1. 點擊左下左齒輪，按下「設定」
2. 可將左邊系統預設的設定項目，貼到右邊區域中變成自訂項目，並調整設定值，如：

   {
       "workbench.colorTheme": "Monokai",
       // 控制字型大小 (以像素為單位)。
       "editor.fontSize": 18,
       //  - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
       "editor.wordWrap": "on",
       // 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定文件中一個範圍的格式。
       "editor.formatOnPaste": true,
       // 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
       "editor.mouseWheelZoom": true,
       // 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
       "editor.formatOnSave": true,
   }

四、常用快捷鍵

1. Ctrl+N：建立新檔
2. Ctrl+C：複製
3. Ctrl+V：貼上
4. Ctrl+F：搜尋
5. Ctrl+Shift+F：跨檔搜尋
6. Ctrl+H：取代
7. Ctrl+/：註解
8. Ctrl+`：開終端機
9. Ctrl+B：關閉左側工具
10. Ctrl+X：刪除目前行
11. Ctrl+G：跳至某行
12. Ctrl+end：跳至文件結尾
13. Ctrl+Z：回上個動作（復原）
14. Ctrl+Y：回下個動作（再做）
15. shift+alt+F：美化（格式化）語法
16. shift+alt+滑鼠左鍵：區塊標記
17. 完整快捷鍵整理：https://poychang.github.io/vscode/