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

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

MS

Dec 25, 2022 — 7 min read

VSCode Shortcuts Cover

自從微軟收購了 Github 後， Github 開發的 Atom 代碼編輯器已經開始沒這麼頻繁的更新，而微軟的親生子 VSCode 的朋友比較多，網絡上有豐富的教學資源以及插件。雖然使用 Electron 框架開發，但並不會給人慢的感覺，而且因爲是？Electron 會計啊開發的，所以在任何平臺上有一致的體驗，這也包括雲端上的體驗。

爲什麼學習快捷鍵

在鼠標還未問世之前，電腦使用者的唯一操作工具就是鍵盤，可見歷史之悠久，即便鼠標問世鍵盤還是文字輸入的首選。

我不害怕曾經練過一萬種踢法的人，但我害怕一種踢法練過一萬次的人

大部分生產力相關的工作輸入都離不開鍵盤輸入，大部分人在使用鍵盤的時候都是雙手在鍵盤上，學會鍵盤快捷鍵就能讓我們更快速的到達我們想要的功能，這也是爲什麼有些人特別喜歡用 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 bar ctrl + b
我最喜歡的功能 ctrl + \ 開啓另一個標籤頁，這麼做的好處debug更有效率。 ctrl + num 就可以切換。
ctrl shift arrow 選擇段落
ctrl + x 是 cut 同時也是刪除整行代碼
ctrl + / 將段落更換味commend
ctrl + d 可以做到的是更換固定字體，比起 ctrl + H， ctrl + d 能讓我們有更多的控制權。 alt + click 也有一樣的效果。
alt + arrow 移動條
ctrl + shift + o 找到函數或是變量
ctrl + g 可以輸入 line number
ctrl + hover 可以看到代碼

💾 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 鍵不放用鼠標停在上面，就能預覽函數的程式碼，點擊就會帶你到程式碼所在的位置。