讓效率加倍的 VSCode 快捷鍵 VSCode Shortcuts

VSCode 的一些常用的快捷鍵介紹。

讓效率加倍的 VSCode 快捷鍵 VSCode Shortcuts
VSCode Shortcuts Cover

自從微軟收購了 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 快捷鍵

  1. ctrl + `  在 VSCode 中打開 Terminal。
  2. alt + num 就能用鍵盤的快捷鍵切換標籤頁,有或者是 ctrl + Tab (只不過沒有瀏覽器是用起來這麼直覺)。可以 ctrl + p 就能搜索標籤頁名字。
  3. ctrl + w 關閉標籤頁
  4. ctrl + a 搜索side bar 的文件,關閉side bar ctrl + b
  5. 我最喜歡的功能 ctrl + \ 開啓另一個標籤頁,這麼做的好處debug更有效率。 ctrl + num 就可以切換。
  6. ctrl shift arrow 選擇段落
  7. ctrl + x 是 cut 同時也是刪除整行代碼
  8. ctrl + / 將段落更換味commend
  9. ctrl + d 可以做到的是更換固定字體,比起 ctrl + Hctrl + d 能讓我們有更多的控制權。 alt + click 也有一樣的效果。
  10. alt + arrow 移動條
  11. ctrl + shift + o 找到函數或是變量
  12. ctrl + g 可以輸入 line number
  13. ctrl + hover 可以看到代碼
  14. End 回到所在那行代碼的最後。

💾 Ctrl + S

即便不小心忘了儲存,VSCode 還是很貼心的將至儲存起來在 VSCode 裏,可是代碼要執行就必須儲存到本地硬盤,同樣的快捷鍵不論是任何軟體都一樣例如:Office。記得 Ctrl + s

🚉 Terminal

Compiling
Photo by Goran 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 + / 就可以將選取的段落備註起來。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 這是標題 -->
    <h1>Title</h1>
    
</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 + 鼠標

VSCode 快捷鍵 CheatSheet.pdf 📝

  1. VSCode 快捷鍵 CheatSheet - Windows
  2. VSCode 快捷鍵 CheatSheet - MacOS
  3. VSCode 快捷鍵 CheatSheet - Linux