VSCode經常使用快捷鍵大全｜VSCode高級玩家寶典之第一篇

點贊是動力 💪，關注是支持 👊！ 建議、疑問、話題歡迎在評論區留言哦！

我以前也是用過不少代碼編輯器，從NotePad++、SublimeText一直到PHPStorm，最後VSCode。這個過程每個編輯器我都折騰了不少配置，插件和主題。開發者的編輯器就等同於一個刀客的隨身佩刀，一個槍手的隨身配槍。一個好的裝備的配件能夠大大提高咱們的戰鬥力。

因此對於一個好的程序員，一個好的代碼編輯器能夠起到很大的做用，在開發的過程當中能夠給咱們帶來不少便利、幫助、效率和影響。甚至一個好的編輯器能夠給開發者平常編程中帶來更高的喜悅感。

槍手挑選一把槍會經過幾個緯度來選擇：重量，擊倒力，子彈量和精準度等等。那對開發者來講也同樣的，咱們會考慮這個編輯器的插件，擴展性，兼容性，功能性，美觀和快捷鍵等等。

其中咱們最在意的就是：

• 「 有多少實用的插件給咱們帶來開發便利和效率」
• 「 可否兼容咱們的編程語言」
• 「 有沒有定義或者方法跳轉，讓我在複雜的代碼中定位到方法、變量和函數」
• 「 代碼要看的舒服，代碼高亮要優美好看，養眼」
• 「 有經常使用的快捷鍵，提升開發效率（最好讓我不須要用鼠標）」

🌟總結一下其實就是「讓咱們寫代碼更快速，更愉悅，更舒服」

「始」前沿

要全面教你們高效使用VSCode，就要講到3大板塊：快捷鍵，插件和配置。由於內容很是之多，因此我拆分紅了3篇文章提供給你們學習。（感興趣的童鞋能夠關注一下哦 😁）

這篇文章主要詳細講解VSCode的經常使用快捷鍵，讓你們在VSCode中編寫代碼時，更加的順手，基本能夠脫離鼠標。

基本上記住這些經常使用的快捷鍵，咱們就能夠立刻提升使用VSCode的效率，也會提高咱們編寫代碼的速度！

讓咱們一塊兒成爲VSCode的高級玩家！

「一」編輯器使用

先講講使用編輯器功能的快捷鍵，這些可讓咱們更快捷和順手的使用VSCode的一些經常使用功能。同時可使用這些快捷鍵挖掘更多編輯器的隱藏功能哦。

快捷鍵列表查看「View Shortcut」

若是想查看全部快捷鍵的童鞋，可使用一下快捷鍵：

Mac：Command + K，再按Command + S

Linux/Windows：Ctrl + K，再按Ctrl + S

🌟若是須要快速查看某一個特定的快捷鍵，只須要快捷鍵列表上方的搜索欄輸入直接搜索便可

快速打開文件「Quick open」

能夠用於快速搜索，而後打開項目中的文件，當你想在一個大型項目中打開某一個代碼文件時，此方法很是實用。

Mac: Command + P

Linux/Windows：Ctrl + P

🌟小技巧

• 輸入 ?能夠查看幫助文檔
• 搜索中會優先列出最近打開過的文件
• 若是想打開多個文件有兩種方法：（會在背後打開新的文件，搜索不會被關閉）

  • 打開新文件 Mac: Option + → 或者 Linux/Windows： Alt + →
  • 多窗口打開 Mac: Command + → 或者 Linux/Windows： Ctrl + →

編輯器命令「Command Palette」

在搜索加上>前綴就能夠調用命令了。編輯器的命令能夠作不少，能夠快速搜索快捷鍵，還能夠執行插件的一些命令，很是實用哦！

Mac: Command + P

Linux/Windows：Ctrl + P

🌟小技巧

想快速查看快捷鍵按鈕也能夠經過這種方式搜索。

拆分編輯器「Split Editor」

在開發的過程當中，咱們會常常打開幾個文件同時編輯，特別是高度封裝的代碼就會同時在更改多個文件。

前端就更不用說的，不少時候咱們都在同時編輯HTML，CSS和JavaScript文件。

編寫Vue的時候就更難受了，HTML和CSS和腳本都是在一個文件中，代碼會很是的長，把當前文件在同一個編輯器拆分開，而後分別滑動到HTML，CSS和腳本部分就能夠同時更改了。​

Mac: Command +\ 或者 2,3,4

Windows: Shift + Alt + \ 或者 2,3,4

Linux: Shift + Alt + \ 或者 2,3,4

編輯器網格佈局「Editor Grid Layout」

默認狀況下，編輯器組是垂直列布局的（例如，當您拆分一個編輯器，默認會橫向拆分到右手邊的）。可是不少時候拆分了多幾個編輯器就會發現每一個編輯器的寬度會愈來愈窄，可視度就會大大降低。這個時候咱們但願可使用網格佈局。因此咱們能夠用編輯器的2x2 網格佈局。

首先咱們須要建立空的編輯器組：打開方式查看 > 編輯器佈局 > 2x2 網格：

默認狀況下，關閉編輯器組的最後一個編輯器也將關閉整個編輯組，下次要使用的時候須要從新開啓網格佈局，可是咱們能夠在setting.json的配置裏改變workbench.editor.closeEmptyGroups: false。

快速打開和關閉側邊欄「Opening and Closing the Sidebar」

在咱們專一於編程的時候，左邊的側邊欄會佔用咱們必定的寬度，特別是使用雙屏（尤爲是豎向的屏幕）或者是使用拆分編輯器模式。​收起側邊欄能夠幫咱們節省不少空間。

Mac: Command + B

Windows/Linux: Ctrl + B

快速打開集成終端「Open new Terminal」

在開發的過程當中，咱們常常須要用到終端來執行命令。快速打開終端會給咱們帶來不少便捷。

Mac: Control + `

Windows/Linux: Ctrl + `

「二」輔助代碼編寫

接下來咱們來說講在編程中經常使用的輔助快捷鍵。這些快捷鍵能夠輔助咱們提高編寫代碼的速度和效率，讓咱們的雙手更集中​在鍵盤上，減小消耗在鍵盤和鼠標切換過程的時間。

合併行「Join Line」

Mac：Control + J

Linux/Windows：使用上面說到的快捷鍵打開快捷鍵查詢列表，搜索"合併行"（editor.action.joinLines），鼠標放在合併行的快捷鍵上，而後點擊編輯圖標，這裏能夠設置一個你喜歡的快捷鍵。

代碼格式化「Code Formatting」

這個快捷鍵幫咱們快速調整代碼縮減，不過我更加推薦使用Prettier插件，這邊文章後面會講到。

Mac: Shift + Option + F

Windows：Shift + Alt + F

Linux：Ctrl + Shift + I

清楚多餘空格「Trim Trailing White Space」

這個命令幫助咱們清楚代碼先後的多餘空格，若是咱們項目有設置嚴格的Lint規範，這個會幫咱們減小多餘空格的報錯。

Mac: Command + K Command + X

Windows/Linux：Ctrl + K Ctrl + X

🌟小技巧

這個功能是能夠自動執行的，不須要咱們一個個選擇去清除，咱們能夠在VSCode的配置裏面設置自動清除。下面教你們兩種配置方式。

使用settings.json

1. 打開 編輯器命令（Mac： Command+ P/Windows： Ctrl+ P）
2. 在搜索框輸入 > Open Settings，而後選擇 首選項：打開設置(json)
3. 而後settings.confg中加入 "files.trimTrailingWhitespace": true，若是已存在這個配置，確保值是 true。
4. 保存文件便可生效（若是沒有立刻生效，能夠重啓VSCode）

使用可視化（UI）設置

1. 打開 編輯器命令（Mac： Command+ P/Windows： Ctrl+ P）
2. 在搜索框輸入 > Open Settings，而後選擇 首選項：打開設置(ui)
3. 在 文本編輯器> 文件中找到 Trim Trailling Whitespace而且勾上（咱們也能夠在搜索框直接輸入 Trim Trailling Whitespace快速找到這個配置的位置），可參考下面的截圖。

代碼摺疊「Code Folding」

在開發項目中，不少時候前端的代碼在單個文件下都會越寫越多，當咱們想專一看一部分或者尋找某段代碼時就很有困難了​。通常這個時候咱們都會把一些不重要的代碼段摺疊起來。可是手動用鼠標一個一個點擊效率是很低的。代碼摺疊快捷鍵在這種狀況就很是實用了。

摺疊代碼快捷鍵

Mac: Command + Option + [

Windows/linux: Ctrl + Shift + [

展開代碼快捷鍵

Mac: Command + Option + ]

Windows/linux: Ctrl + Shift + ]

往上/下複製行「Copy Line Up/Down」

在寫代碼的時候，咱們常常會編寫一些很是類似的代碼連續幾遍或者是先複製而後稍微更改一下。​特別是在JS中的require或者import這種引入包的時候。若是咱們須要選中一行而後複製，回車而後粘貼，這波操做確實不夠快呀，有沒有更快速的複製方式呢？有的！

Mac: Shift + Option + ⬆️ / ⬇️

Windows: Shift + Alt + ⬆️ / ⬇️

Linux: Ctrl + Shift + Alt + ⬆️ / ⬇️

固然，若是你不喜歡這個默認的快捷鍵，能夠在快捷鍵列表中修改。

選擇單詞「Select Word」

不少時候在開發過程當中，咱們都會須要多個相同單詞（多個變量名）同時修改，多是局部方法中的單詞，也多是這個文件中的同名單詞的修改。比較古老的方法就是用全局搜索而後替換。

在VSCode中有一個更加快速和簡便的方法，而且可讓你局部選擇或者是快速所有選擇。選中後就能夠同時修改選中的單詞了。

局部選擇

首先選中你須要的單詞而後按下面的快捷鍵便可：

Mac: Command + D

Windows/Linux: Ctrl + D

若是咱們屢次按下快捷鍵，編輯器會繼續往下找到相同的單詞，而後自動選中。

全局選中

同樣首先選中你須要的單詞，而後按下快捷鍵便可：

Mac: Command + Shift + L

Windows/Linux: Ctrl + Shift + L

這個惟一不同的就是，這個會找到當前文件下的全部相同的單詞，而且選中。

跳轉到特定行數「Navigate to a Specific Line」

在排查錯誤的時候常常會用到的一個快捷鍵，咱們須要找到當前文件下特定行的代碼。

Mac: Command + G

Windows/Linux: Ctrl + G

🌟小技巧 結合咱們上面學習到的，咱們也能夠先使用快捷鍵（Mac：Command + P）打開編輯器命令 而後輸入: 再輸入行數便可。

文件中跳轉特定符號「Go to Symbol in File」

這裏我講解一下符號指的是什麼，它就是在代碼中的方法、類或者是屬性。

因此在一個比較大的代碼文件中，這個快捷鍵會很是實用。能讓咱們快速找到想要編輯的方法、屬性或者類！

Mac: Command + Shift + O

Windows/Linux: Ctrl + Shift + O

🌟小技巧

若是文件中的符號過多，咱們能夠在@後面加上:，就能夠爲全部符號分類讓，咱們更好找到須要的符號和位置。

項目中跳轉特定符號 「Go to Symbol in Workspace」

這個快捷鍵與文件中跳轉的雷同，惟一區別就是這個能夠搜索出整個項目中的方法、類和屬性，而且快速跳轉到這些符號的位置。

Mac: Command + T

Windows/Linux: Ctrl + T

刪除整個單詞「Delete Previous Word」

在咱們打錯一個單詞的時候，咱們常常都會連續按刪除鍵直到咱們想要從新開始的地方。其實對咱們程序員來講，打字都是飛快的，從新打過遠遠比一個一個字母刪除來的快的多。（有些童鞋可能還會用鼠標來選中要刪除的，其實在寫代碼的時候，能夠不用鼠標儘可能不用鼠標，這樣速度會更快哦）只要按下這個快捷鍵就能夠整個單詞刪除掉。

Mac: Command + Delete

Windows/Linux: Ctrl + Backspace

按單詞選擇「Select by words」

爲了在編程中脫離使用鼠標，咱們常常須要選中一行代碼中的幾個單詞，這個快捷鍵可讓咱們快速作到這樣的操做。

Mac: Command + Shift + ← / →

Windows/Linux: Ctrl + Shift + ← / →

快速複製當前行「Duplicate Line」

用過IDE的基本都很熟悉這個操做，就是快速往下複製當前行的代碼。這個在編程過程當中也是很是實用。​

其實咱們能夠選中一段代碼，按下這個快捷鍵也能夠​往下複製整個內容哦。

Mac: Command + Shift + D

Windows/Linux: Ctrl + Shift + D

刪除一行「Deleting a Line」

用於快速刪除一整行的代碼。

Mac: Command + X

Windows/Linux: Ctrl + X

往上/下添加同時編輯「Add Cursor Above/Below」

用過SublimeText的同窗應該都很熟悉這個功能。咱們能夠在多個位置添加鼠標編輯點，而後同時編輯。VSCode也有這樣的快捷鍵。

Mac: Command + Option + ↑ / ↓

Windows/Linux: Ctrl + Alt + ↑ / ↓

🌟小技巧

若是想和上圖同樣，在屬性的單詞前添加好同時編輯鼠標點後，一會兒即跳到全部屬性名的最後面，咱們只須要先在全部名字前面加入同時編輯鼠標而後用一下快捷鍵便可：

---

Mac: Command + →

Windows/Linux: Ctrl + →

多行選中同時編輯 「Column Selection」

這個快捷鍵須要配合鼠標一塊兒使用。咱們常常會在編寫代碼的時候選中一大串代碼進行編輯，這個時候這個快捷鍵就很是使用。

咱們還能夠按住這個快捷鍵，而後選擇咱們須要同時修改的位置，而後多個鼠標位置同時編輯哦！

Mac: Shift + Option

Windows/Linux: Shift + Alt

修改「符號」 「Rename Symbol」

VSCode默認支持JavaScript和TypeScript的方法名、類名和屬性名等符號修改。在修改後，文件下引用到這些符號的地方都會被自動的同時修改。其餘語言的支持須要插件。

Mac: F2

Windows/Linux: F2

「待續」總結

這裏我已介紹完全部經常使用的快捷鍵和編輯器中的使用小技巧。不少須要學習快捷鍵的小夥伴們不可能一會兒就會使用和記住。舒適提示：​因此能夠先收藏本文章，當須要的時候就能夠立刻搜索找到並使用。當咱們用多了，也就天然而然熟能生巧了。

當咱們習慣於使用這些快捷鍵，咱們就會發現咱們代碼編寫速度都會有所提高的。

下一篇VSCode高級玩家寶典，我會講解VSCode中的全部經常使用插件（包括前端/後端），敬請期待！

好文推薦

• 🔥 《前端必看的8個HTML+CSS技巧》 --- CSS是一個很獨特的語言。看起來很是簡單，可是某種特殊效果看似簡單，實現起來就很有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧，一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們，從新燃起對前端排版和特效的熱愛和熱情！🔥
• 🔥 《寫給想學和在學編程的大家，學習編程的7個好處》 --- 其實選擇學編程是能改變人生的。可能起初不少人學編程，報了一個編程培訓班，爲了就是能拿到更高的工資或者有更好的工做環境。最後堅持着堅持着，最後會發現編程還會給咱們帶來不少我的能力和技能上的提高。
• 🔥 《5大法則助你 成爲更出色的開發者》 --- 這篇文章傳授5大法則助咱們成爲更出色的開發者，在衆多開發者中脫穎而出的訣竅，也會在咱們的技術職業生涯中給咱們不少的幫助。
• 🔥 《用「易於改編」原則，提高編程水平，寫出更好的代碼》 --- 不管新手仍是資深開發者都會常常問一個問題，「怎麼寫好的代碼？」，要知道怎麼寫好代碼，首先咱們要知道怎麼樣纔是好的代碼。要有明確的目標，才能知道如何達成目標。在《程序員修煉之道》中提到的「ETC Principle」 -- 易於改編原則。這個原則看似簡單，可是咱們越是深刻思考越是以爲「簡約而不簡單」。

本文使用 mdnice 排版