工欲善其事，必先利其器，安裝 VS Code
Visual Studio Code(簡稱VS Code)是微軟出品的強大文字編輯 IDE ，功能如同前端開發人員熟知的 Sublime 環境，可以透過圖形化介面來搜尋/查看所需的擴充套件 (Extensions)，以下課程可以使用此工具作為前端開發環境；以下列出常用的快速鍵及擴充功能供大家參考，沒有使用過的朋友可以玩看看。
快捷鍵速成班
能善用快捷鍵，可以幫助你寫程式寫得更快喔！
電腦上的快捷鍵
| Windows 快速鍵 | Mac 快速鍵 | |
|---|---|---|
| 全選 | Ctrl + A | ⌘ + A |
| 存檔 | Ctrl + S | ⌘ + S |
| 重新命名檔案 | F2 | ↩︎ |
| 顯示桌面 | Win + D | ⌘ + F3 |
| 開啟我的電腦 | Win + E | |
| 切換視窗 | Alt + Tab | ⌘ + Tab |
| 關閉目前的視窗 | Alt + F4 鍵 | ⌘ + Q |
Chrome上的快捷鍵
參考資料：https://support.google.com/chrome/answer/157179?hl=zh-Hant
| Windows 快速鍵 | Mac 快速鍵 | |
|---|---|---|
| 開啟新視窗 | Ctrl + N 鍵 | ⌘ + N |
| 開啟並切換至新分頁 | Ctrl + T 鍵 | ⌘ + T |
| 切換至下一個開啟的分頁 | Ctrl + Tab鍵或Ctrl + PgDn鍵 | ⌃ + Tab (⌃ = control) |
| 切換至上一個開啟的分頁 | Ctrl + Shift + Tab鍵或Ctrl + PgUp鍵 | ⌃ + Shift + Tab |
| 開啟目前分頁瀏覽紀錄中的上一頁 | Alt + 向左鍵 | ⌘ + 向左鍵 |
| 開啟目前分頁瀏覽紀錄中的下一頁 | Alt + 向右鍵 | ⌘ + 向右鍵 |
| 將網頁上的所有內容都回復為預設大小 | Ctrl + 0 鍵 | ⌘ + 0 |
| 關閉目前的分頁 | Ctrl + W鍵或Ctrl + F4鍵 | ⌘ + W |
| 放大網頁上的所有內容 | Ctrl 鍵和 + 鍵 | ⌘ 和 +鍵 |
| 縮小網頁上的所有內容 | Ctrl 鍵和 - 鍵 | ⌘ 和 -鍵 |
| 切換到網址列 | Ctrl + L 鍵、Alt + D 鍵或 F6 鍵 | ⌘ + L |
VS Code快捷鍵
參考資料：https://code.visualstudio.com/docs/getstarted/keybindings
Windows版本：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Mac版本：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
| Windows 快速鍵 | Mac 快速鍵 | |
|---|---|---|
| 快速搜尋(列出專案中的其他檔案) | Ctrl +P | ⌘ + P |
| 註解 / 反註解 | Ctrl +/ | ⌘ + / |
| 快速建立程式碼 | 在剛輸入的程式碼後按Tab | 在剛輸入的程式碼後按Tab |
| 上下移動單行程式 | Alt+↑/Alt+↓ | ⌥+↑ / ⌥+↓ |
| 導航至前後編輯區塊 | Alt+→/Alt+← | ⌘+→ / ⌘+← |
| 以字為單位跳躍游標 | Ctrl +→/Ctrl+← | ⌥+→ / ⌥+← |
| 切換最近使用的兩頁籤 | Ctrl+Tab | ⌃ + Tab |
| 格式化文件 | Shift + Alt + F | Shift + ⌥ + F |
| 程式碼縮排操作 | Ctrl+[ Ctrl+] | ⌘+[ / ⌘+] |
| 程式碼縮排操作 | Ctrl+Shift+[ Ctrl+Shift+] | ⌘+Shift+[ / ⌘+Shift+] |
| 命令輸入框 | F1 | F1 |
| 在頁面下方開啟Terminal | Ctrl+` | ⌃ + ` |
| 編輯相同文字區塊 | Ctrl+D ... | ⌘ + D |
| 向上下做跨欄選取 | Ctrl+Shift+ Alt+Top / Down | ⌘ + Shift + ⌥ + ↑/↓ |
| 游標拖曳做上下跨欄選取 | Alt+Shift+滑鼠左鍵拖曳 | ⌥ + Shift + 滑鼠左鍵拖曳 |
| 游標點選做跨欄選取 | Alt +滑鼠左鍵點選 ... | ⌥ + 滑鼠左鍵點選 |
| 在當前行下方插入一行 | Ctrl + Enter | ⌘ + ↩︎ |
| 在當前行上方插入一行 | Ctrl + Shift + Enter | ⌘ + Shift + ↩︎ |
| 開啟擴充套件畫面 | Ctrl+Shift+X |
超酷的Emmet，Coding加速器
大多數的編輯器都有相對應的 Emmet 套件可以安裝，它能加快並縮短開發者在編寫 HTML 及 CSS 的時間。
VS Code有內建Emmet，但是Sublime沒有，所以這邊堤供喜歡Sublime的朋友安裝Emmet的方法