自從微軟收購了 Github 後， Github 開發的 Atom 代碼編輯器已經開始沒這麼頻繁的更新，而微軟的親生子 VSCode 的朋友比較多，網絡上有豐富的教學資源以及插件。雖然使用 Electron 框架開發，但並不會給人慢的感覺，而且因爲是 ？Electron 會計啊開發的，所以在任何平臺上有一致的體驗，這也包括雲端上的體驗。
爲什麼學習快捷鍵 #
在鼠標還未問世之前，電腦使用者的唯一操作工具就是鍵盤，可見歷史之悠久，即便鼠標問世鍵盤還是文字輸入的首選。
我不害怕曾經練過一萬種踢法的人，但我害怕一種踢法練過一萬次的人
大部分生產力相關的工作輸入都離不開鍵盤輸入，大部分人在使用鍵盤的時候都是雙手在鍵盤上，學會鍵盤快捷鍵就能讓我們更快速的到達我們想要的功能，這也是爲什麼有些人特別喜歡用 Markdown 的原因。GitHub - lzm0x219/vscode-markdown-github: 📝 A GitHub-style VSCode built-in markdown preview plugin.📝 A GitHub-style VSCode built-in markdown preview plugin. - GitHub - lzm0x219/vscode-markdown-github: 📝 A GitHub-style VSCode built-in markdown preview plugin. 
VSCode Markdown
例如在 Chrome 上更換標籤頁，使用 Ctrl + Tab 以及 Shift Ctrl + Tab 遠比用鼠標有效率。而且有些快捷鍵執行起來的效率會比鼠標還要方便，而且能同時做到相輔相成的效果。
⌨️
Touch Typing 盲打在文字輸入很重要，我覺得好的鍵盤很重要，大部分的時候我使用的是Keychron K3，但是少部分我還是會使用筆電的鍵盤，最重要的就是感覺。
VSCode 快捷鍵介紹 #
💾Ctrl + S， 🚉 Terminal， 📑 分頁， 📝 編輯， 🧹 替換， 📎 複製粘貼， ❌🪲 Debug
VSCode 快捷鍵 #
- `ctrl + `` 在 VSCode 中打開 Terminal。
alt + num就能用鍵盤的快捷鍵切換標籤頁，有或者是ctrl + Tab（只不過沒有瀏覽器是用起來這麼直覺）。可以ctrl + p就能搜索標籤頁名字。ctrl + w關閉標籤頁ctrl + a搜索side bar 的文件，關閉side barctrl + b- 我最喜歡的功能
ctrl + \開啓另一個標籤頁，這麼做的好處debug更有效率。ctrl + num就可以切換。 ctrl shift arrow選擇段落ctrl + x是 cut 同時也是刪除整行代碼ctrl + /將段落更換味commendctrl + d可以做到的是更換固定字體，比起ctrl + H，ctrl + d能讓我們有更多的控制權。alt + click也有一樣的效果。alt + arrow移動條ctrl + shift + o找到函數或是變量ctrl + g可以輸入 line numberctrl + hover可以看到代碼End回到所在那行代碼的最後。
💾 Ctrl + S
即便不小心忘了儲存，VSCode 還是很貼心的將至儲存起來在 VSCode 裏，可是代碼要執行就必須儲存到本地硬盤，同樣的快捷鍵不論是任何軟體都一樣例如：Office。記得 Ctrl + s 。
🚉 Terminal
Photo byGoran Ivos/Unsplash
當寫好代碼的時候，要測試的話都是需要在 終端執行 ，一般不知道有着功能的話都是需要在開啓另一個終端程式執行，其實在 VSCode 中就有就能直接執行 Terminal ，除了可以點擊 VSCode 下方的 TERMINAL 外，也可以使用 VSCode 的快捷鍵 (Ctrl + )。也可以是使用指令code 文件夾位置` 打開相應的 Project。
📑 分頁 #
就像不少朋友在瀏覽器中打開不少過一個分頁一樣，VSCode 也是可以打開多個標籤頁，我們可以 alt + num 到相應的分頁，關掉標籤頁也可以 Ctrl + W 關掉。如果真的開啓太多的話可以 Ctrl + P 搜索標籤頁名。隱藏側邊欄可以用 Ctrl + b 。
現在主流的屏幕的比例都是 16:9 16:10 21:9 ，都是寬屏幕，爲了更有效的運用屏幕以及寫代碼更有效率我們讓屏幕同時顯示 HTML ，CSS ，甚至更多，但是同一個 Project 同時開啓兩個 VSCode 比較吃電腦的資源，VSCode 可以使用快捷鍵 Ctrl + \ 在右邊打開一個新的編輯頁面 （Split Editor Right) alt + ctrl + \ 實在下方開啓一個編輯頁面，而這個編輯頁面也可以打開多個標籤頁。 ctrl + num 可以實現切換。
📝 編輯 #
文字編輯的快捷鍵跟其他軟體差不多一樣的，無非就是 shift + 方向鍵 選取， ctrl 多選，打配上方向鍵（ ctrl + 方向鍵 ）就可以快速跳過區塊，搭配上 shift 就是快書跳過區塊的選取（ ctrl + 方向鍵 ）。
一般情況下不論是 HTML ，CSS， JavaScript 在寫的過程中爲了維護，通常我們都在代碼上方加入備註，備註的代碼是不會執行的，像是 HTML 的備註是 <! - - --> ，JavaScript 則是 // 。用快捷鍵 ctrl + / 就可以將選取的段落備註起來。
Title
</body>
</html>
HTML 的備註 Comment // JavaScript Hello Testing var helloWorld = console.log(“Hello World”);
JavaScript 的備註 Comment
🧹 替換 #
ctrl + f 是查找 ctrl + h 是替換，不過 ctrl + h 可以是一個個字替換也可以替換全部，介於兩者之間的是 ctrl + d 只需要選取接着 ctrl + d 就會選取下一個一樣的詞彙，就可以做到同時修改多個代碼。Alt + 鼠標選取 效果也是一樣但是有更多的控制權。
📎 複製粘貼 #
ctrl + c 是複製， ctrl + x 剪去整行代碼， ctrl + v 是粘貼。
❌🪲 Debug #
當編輯好了後，嘗試執行但是遇到報錯或沒有達到預期中的表現就是出錯 debug 環節了。
不少時候只是因爲順序不對，Alt + 方向鍵 移動整行程式碼。
⌨️
Variable 變量 ｜ Function 函數
執行 JavaScript 有錯誤會在錯誤中顯示那一行的代碼有問題，那個代碼的快捷鍵是 ctrl + g 輸入要到的行數即可。 ctrl + shift + o 類似查找，但查找的是變量 Variable 以及函數 Function。當我們想查看某一個變量或是函數的代碼，可以按着 ctrl 鍵不放用鼠標停在上面，就能預覽函數的程式碼，點擊就會帶你到程式碼所在的位置。
ctrl + 鼠標