工欲善其事,必先利其器,安裝 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的方法