腳本之家 設(shè)為“星標?”

第一時間收到文章更新

出品 | 前端充電寶（ID：FE-Charge)

如若轉(zhuǎn)載請聯(lián)系原公眾號

Visual Studio Code 是目前最流行、最常用的代碼編輯器之一，它是開源的并且可以免費使用。它還提供對多種語言和框架的支持。下面就來看看VS Code中常用的快捷鍵有哪些！

注意，以下 Visual Studio Code 快捷方式取自于 VS Code 官方文檔。如果某些快捷方式不起作用，可能是由于編輯器或文件格式中的快捷方式發(fā)生了變化，或者安裝的擴展影響了該快捷方式。

一、快捷導航1. 搜索文件

當需要搜索特定的文件，當項目很大時，就會耗費大量時間。即使已經(jīng)知道文件在哪，使用這個快捷鍵也會很方便，可以輕松打開項目中的文件。

Windows/Linux:ctrl + P

macOS:command + P

Windows/Linux:ctrl + P

macOS:command + P

Visual Studio Code 有許多功能和設(shè)置，可以根據(jù)需要進行更改。此快捷鍵可以在必要時輕松地打開設(shè)置。

Windows/Linux: ctrl + ,

macOS: command + ,

展開全文

Windows/Linux: ctrl + ,

macOS: command + ,

很多時候，我們需要更多空間來放置需要處理的文件。因此，此快捷鍵可以方便地顯示或隱藏側(cè)邊欄。

Windows/Linux: ctrl + B

macOS: command + B

Windows/Linux: ctrl + B

macOS: command + B

當打開了許多選項卡并且需要在它們之間進行切換時，就可以使用這個快捷鍵，它會顯示選項卡列表并在它們之間導航，我們可以選擇要打開的選項卡。

Windows/Linux: ctrl + shift + tab

macOS: control + shift + tab

Windows/Linux: ctrl + shift + tab

macOS: control + shift + tab

Visual Studio Code 提供了創(chuàng)建選項卡組功能。選項卡組允許我們將選項卡分組，每個選項卡組會占屏幕的一部分。使用該快捷鍵可以在不同的選項卡組進行切換。如果在快捷方式中選擇的選項卡組大于當前打開的組數(shù)，此快捷鍵就會創(chuàng)建一個新組。

Windows/Linux: ctrl + 1或2或3

macOS：command + 1或2或3

Windows/Linux: ctrl + 1或2或3

macOS：command + 1或2或3

在開發(fā)過程中，會經(jīng)常使用終端。Visual Studio Code 允許我們在編輯器內(nèi)打開終端窗口。這樣就無需在編輯器和終端之間切換了，讓我們可以專注于編輯器和代碼。

Windows/Linux: ctrl + J

macOS: command + J

Windows/Linux: ctrl + J

macOS: command + J

7. 打開命令面板

我們可以在 Visual Studio Code 中執(zhí)行許多命令。使用這個快捷鍵可以輕松打開命令面板。命令面板允許搜索可以使用的命令并執(zhí)行它們。

Windows/Linux: ctrl + shift + P

macOS: command + shift + P

Windows/Linux: ctrl + shift + P

macOS: command + shift + P

二、快捷選擇

在開發(fā)過程中，經(jīng)常需要在代碼中進行選擇，包括復制、剪切等操作。與其使用鼠標進行操作，不如使用鍵盤進行操作可以節(jié)省時間。這些快捷鍵專注于快速做出選擇。

1. 選擇當前行

可以使用這個快捷鍵來快速選擇光標所在行的整行代碼。

Windows/Linux: ctrl + L

macOS: command + L

Windows/Linux: ctrl + L

macOS: command + L

使用此快捷鍵只需選中一次要查找的文本，就可以在文件中選中所有這個文本，這樣就可以同時編輯這些文本了。

Windows/Linux: ctrl + shift + L

macOS: command + shift + L

Windows/Linux: ctrl + shift + L

macOS: command + shift + L

此快捷鍵會執(zhí)行與上面快捷鍵相同的操作，但無需選擇任何內(nèi)容。當光標放在一個詞上時，按此快捷鍵就可以選擇這個單詞在當前文件中的所有的位置。

Windows/Linux: ctrl + F2

macOS: command + F2 + fn

Windows/Linux: ctrl + F2

macOS: command + F2 + fn

4. 選擇直到單詞的結(jié)尾

選擇代碼的某部分時，可以移動和擴展此快捷方式的選擇。可以使用右箭頭或左箭頭朝想要的方向前進。

Windows/Linux: shift + alt + →或←

macOS: shift + option + →或←

Windows/Linux: shift + alt + →或←

macOS: shift + option + →或←

將光標拖過代碼就會從頭到尾選擇每一行。但是也可以使用此快捷來選擇部分代碼行，但只能選擇拖動的多行代碼。

Windows/Linux: shift + alt + 拖動光標

macOS: shift + option + 拖動光標

Windows/Linux: shift + alt + 拖動光標

macOS: shift + option + 拖動光標

使用該快捷鍵也可以執(zhí)行上述操作，但無需使用鼠標，而是使用鍵盤上的箭頭鍵。

Windows/Linux: ctrl + shift + alt + → 或 ← 或 ↓或↑

macOS: command + shift + option + → 或 ← 或 ↓或↑

Windows/Linux: ctrl + shift + alt + → 或 ← 或 ↓或↑

macOS: command + shift + option + → 或 ← 或 ↓或↑

三、快捷查找

所有編輯器都具有查找功能，以便可以在當前文件或多個文件中查找某些單詞，例如函數(shù)或變量名稱、短語或代碼塊等。下面就來看看查找功能相關(guān)的快捷鍵。

1. 結(jié)果導航

可以使用此快捷鍵在文件中的查找結(jié)果之間進行移動。

Windows/Linux：F3

macOS：F3 + fn

Windows/Linux：F3

macOS：F3 + fn

如果想要修改多個搜索結(jié)果，就可以使用此快捷鍵在文件中選擇查找結(jié)果中的多個內(nèi)容，每次按下此鍵后都會選擇一個結(jié)果，然后就會按搜索結(jié)果的順序進行選中。

Windows/Linux: ctrl + D

macOS: command + D

Windows/Linux: ctrl + D

macOS: command + D

如果想使用查找功能對所有查找結(jié)果進行修改，則此快捷鍵就可以選擇所有查找結(jié)果。

Windows/Linux: alt + enter

macOS: option + enter

Windows/Linux: alt + enter

macOS: option + enter

隨著文件或項目變得復雜，找到代碼的某些部分就變得越來越困難。手動查找錯誤或轉(zhuǎn)到某一行代碼可能比較困難。下面這些快捷鍵就可以省去很多麻煩，讓我們將更多時間投入到真正想做的事情上。

1. 跳轉(zhuǎn)指定行

當遇到指定一行代碼導致編譯或運行時錯誤時，就可以使用該快捷鍵跳轉(zhuǎn)到這一行代碼，只需按下這個快捷鍵，輸入代碼行數(shù)，按下回車即可跳轉(zhuǎn)到這行代碼。當一個文件中代碼特別多時，這個快捷鍵就非常有用。

Windows/Linux: ctrl + G

macOS: control + G

Windows/Linux: ctrl + G

macOS: control + G

我們可能會需要查找匹配代碼塊的右括號。當文件內(nèi)容很長時，就很困難了。使用此快捷鍵可以輕松找到當前塊的右匹配括號。在 HTML 標簽中，它可以移動到當前標簽的末尾。

Windows/Linux: ctrl + shift + \

macOS: command + shift + \

Windows/Linux: ctrl + shift + \

macOS: command + shift + \

在包含大量代碼的文件時，我們可以折疊（隱藏）當前不關(guān)注的某個代碼塊，以便可以專注于其他內(nèi)容。此快捷鍵就是用來折疊或展開代碼塊的。單擊代碼塊中的任意位置，然后按以下鍵即可。

Windows/Linux: ctrl + shift + [或]

macOS: command + option + [或]

Windows/Linux: ctrl + shift + [或]

macOS: command + option + [或]

如果代碼塊包含子代碼塊怎么辦？使用上面的命令將會折疊父代碼塊，但當父代碼塊展開時，子代碼塊將保持不變。如果需要折疊和展開一個代碼塊及其子代碼塊，可以使用此快捷鍵來完成。

Windows/Linux: ctrl + K + [或]

macOS: command + K + [或]

Windows/Linux: ctrl + K + [或]

macOS: command + K + [或]

在代碼中查找出現(xiàn)錯誤和警告的代碼至關(guān)重要。此快捷鍵省去了滾動以找到確切問題的麻煩。它可以直接轉(zhuǎn)到下一個錯誤或警告處。

Windows/Linux：F8

macOS：F8 + fn

Windows/Linux：F8

macOS：F8 + fn

在很多情況下，可能需要有多個光標，每個光標位于文件中的不同位置。這些快捷鍵有助于更輕松地使用多個光標進行移動。

1. 特定位置插入額外光標

此鍵盤快捷鍵可以在文件中任何位置插入一個額外的光標。

Windows/Linux: alt + 鼠標點擊位置

macOS：option + 鼠標點擊位置

Windows/Linux: alt + 鼠標點擊位置

macOS：option + 鼠標點擊位置

插入光標的第二種方法是將其插入在當前光標位置的上方或下方。

Windows/Linux: ctrl + alt +↓或↑

macOS: command + option +↓或↑

Windows/Linux: ctrl + alt +↓或↑

macOS: command + option +↓或↑

如果錯誤地插入了光標，或者不再需要在該位置插入光標怎么辦？此快捷鍵可以撤消上次插入的光標。當插入多個光標時，這個快鍵鍵將非常有用，因為它可以將其他光標保持在原位并刪除最后插入的光標。

Windows/Linux: ctrl + U

macOS: command + U

Windows/Linux: ctrl + U

macOS: command + U

使用該快捷鍵可以在選中代碼的每一行的最后插入光標。

Windows/Linux: shift + alt + I

macOS: shift + option + I

Windows/Linux: shift + alt + I

macOS: shift + option + I

很多時候需要將一條行或多行代碼從一個位置移動到另一個位置。此快捷鍵并不是復制或剪切并將代碼粘貼到另一個位置，而是提供了一種更快的解決方案，只需將光標放在該代碼行上。如果想移動多行代碼，只需先選中需要移動的代碼，再使用該快捷鍵即可。

Windows/Linux: alt +↓或↑

macOS：option +↓或↑

Windows/Linux: alt +↓或↑

macOS：option +↓或↑

如果需要復制一行或多行代碼并將其粘貼到下方或上方怎么辦？這個快捷鍵不必實際復制和粘貼這些代碼，而是根據(jù)使用箭頭選擇的方向在其下方或上方復制該行。如果想復制多行代碼，只需先選中需要復制的代碼，再使用該快捷鍵即可。

Windows/Linux: shift + alt +↓或↑

macOS: shift + option +↓或↑

Windows/Linux: shift + alt +↓或↑

macOS: shift + option +↓或↑

當將代碼從一個位置復制到另一個位置時，或者更改代碼時，很多時候代碼會出現(xiàn)錯誤的縮進。這個快捷鍵就可以根據(jù)需要縮進代碼，也可以選擇多行代碼將它們一起移動。

Windows/Linux: ctrl + [或]

macOS：command + [或]

Windows/Linux: ctrl + [或]

macOS：command + [或]

使用該快捷鍵可以注釋或取消注釋光標所在行代碼。如果想要注釋或取消注釋多行代碼，只需要先選中多行代碼即可。

Windows/Linux: ctrl + /

macOS: command + /

Windows/Linux: ctrl + /

macOS: command + /

與上面的快捷鍵不同，下面的快捷鍵會將選中的多行代碼注釋為單個注釋。

Windows/Linux: shift + alt + A

macOS: shift + option + A

Windows/Linux: shift + alt + A

macOS: shift + option + A

出于可讀性的原因，保持代碼指定的格式非常重要。Visual Studio Code 提供了兩個用于代碼格式化的快捷命令。

下面快捷鍵可以格式化整個文件中的代碼：

Windows/Linux: ctrl + shift + F

macOS: option + shift + F

Windows/Linux: ctrl + shift + F

macOS: option + shift + F

下面快捷鍵可以格式化已選中的代碼：

Windows/Linux: ctrl + K，然后ctr l+ F

macOS: command + K，然后command + F

Windows/Linux: ctrl + K，然后ctr l+ F

macOS: command + K，然后command + F

在很多情況下，如果出現(xiàn)一個常見或簡單的錯誤，Visual Studio Code 可以直接修復它——例如缺少分號。如果快速修復可以使用，則此該快捷鍵可以快速修復錯誤或警告。

Windows/Linux: ctrl + .

macOS: command + .

Windows/Linux: ctrl + .

macOS: command + .

如果手動重命名多次使用的變量、函數(shù)或類就很容易出錯。此快捷鍵提供了一種重命名任何符號的安全方法。

Windows/Linux：F2

macOS：F2 + fn

Windows/Linux：F2

macOS：F2 + fn

可以使用以下快捷鍵來刪除多余的空行：

Windows/Linux: ctrl + K + X

macOS: command + K + X

Windows/Linux: ctrl + K + X

macOS: command + K + X

注意：需要一直按著 ctrl 或 command 鍵，然后先按 K 鍵，再按 X 鍵。

10. 更改編程語言

默認情況下，Visual Studio Code 會檢測正在處理的文件所用的編程語言。通常，它是通過檢查文件的擴展名來完成的。但是，如果不支持文件的擴展名，就可能無法正確檢測語言。因此，當需要更改文件的編程語言，可以使用此快捷鍵。

Windows/Linux: ctrl + K, 然后按M

macOS: command + K，然后按M

Windows/Linux: ctrl + K, 然后按M

macOS: command + K，然后按M

很多時候，我們需要了解正在使用的代碼的定義是怎樣的。比如調(diào)用一個函數(shù)時，想知道這個函數(shù)是如何定義的，就可以使用這個快捷鍵。

Windows/Linux：F12

macOS：F12 + fn

Windows/Linux：F12

macOS：F12 + fn

此快捷鍵可以在檢查定義的地方打開定義。這樣可以更輕松地查看定義，而無需切換到另一個文件或代碼行。

Windows/Linux: alt + F12

macOS: option + F12 + fn

Windows/Linux: alt + F12

macOS: option + F12 + fn

3. 切換建議

在編寫代碼時，VS Code 或者一些擴展會展示代碼建議。此快捷鍵可以快速切換代碼建議以查看或隱藏它們。

Windows/Linux: ctrl + I

macOS: command + I

Windows/Linux: ctrl + I

macOS: command + I

VS Code 是目前最好用的代碼編輯器之一。它提供了許多開箱即用的功能以及豐富的第三方擴展，在 VS Code 中使用快捷鍵可以使開發(fā)更加輕松，讓我們可以專注于在更短的時間編寫高質(zhì)量的代碼。本文介紹了一些實用的 Visual Studio Code 快捷鍵，希望能幫助你提高開發(fā)效率！

最后，附上在 Windows、Linux、macOS 系統(tǒng)中 VS Code 的快捷鍵：

Windows 快捷鍵

Linux 快捷鍵

macOS 快捷鍵

這么實用的功能，Edge終于考慮了！

VS Code 1.79 發(fā)布

VSCode | 那些讓你眼前一亮的插件

2023年最新最全 VSCode 插件推薦！

微軟再出手，VS Code殺瘋了！