阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

介紹

Visual Studio Code 允許您透過命令面板或鍵盤上的快捷鍵存取它提供的幾乎所有功能。

您可能每個工作日工作 8 小時,希望您能在這些工作時間中大部分時間進行編碼。所以你花了很多時間盯著你選擇的程式碼編輯器。

了解一些快捷方式可以幫助您更快地完成工作。知道如何更快地找到您需要的文件。您需要立即執行 NPM 命令,而不是開啟外部終端。

雙手在鍵盤上快速打字

捷徑備忘單

Visual Studio Code 的開發者

您可以下載這些備忘單,列印出來,然後將其放在辦公桌上以供快速參考,或嘗試在上班途中學習它們。不要試圖一次學會所有這些。這需要時間。所以要有耐心,你就會掌握它們。

鍵位圖

您是 Vim 用戶嗎?也許 Emacs 快捷方式已經刻在你的大腦裡了?或者,無論出於何種原因,您使用記事本++並欣賞記事本++的鍵盤快捷鍵😵?

Visual Studio 為大家提供了一個擴充功能!讓我們安裝 ⚛ Atom Keymap 。我們將在沒有我們心愛的滑鼠的幫助下(幾乎)做到這一點。

1) 開啟 Visual Studio 程式碼。

2) Visual Studio Code 開啟後,按: CTRL+SHIFT+X 。該快捷方式將打開擴展列表,並且您的遊標將聚焦在搜尋欄上。輸入以下@category:keymaps 。 (如果您想了解更多有關本節中擴展程序如何工作的訊息,請在下面發表評論!)

3) 您現在會看到鍵盤映射清單。按Tab ,然後按Down Arrow ⬇

4) 按直到選擇Atom Keymap 。現在按Enter

5)遺憾的是我找不到選擇「安裝」按鈕的方法。您現在需要點擊🖱!

您可以找到幾乎所有您能想像到的編輯器的鍵盤映射。安裝您最喜歡的那個,您就有了快捷方式!很酷吧?

鍵盤快速鍵設定 (JSON)

有多種方法可以查看鍵盤快捷鍵設定。其中一種是透過圖形介面,也可以選擇使用透過 JSON 檔案來編輯捷徑。

圖形介面

我們可以按CTRL+k開啟圖形介面,然後仍然按住CTRL ,您應該按CTRL+s

鍵盤快捷鍵設定 GUI

頂部有一個搜尋欄,您可以在其中搜尋要查看的命令或鍵盤快捷鍵。這些對話框在 Visual Studio Code 中看起來往往相同,您將開始經常看到它們。

您可以看到四列。讓我們來看看它們。

*指令:Visual Studio Code 執行的操作。

  • 鍵綁定:執行操作時必須按下的按鍵組合。

  • 何時:這是 Visual Studio Code 的過濾器,它告訴 Visual Studio Code 捷徑是否應該在該上下文中可操作。有些過濾器可能是整合終端、原始碼中的錯誤等等。

  • 來源:Visual Studio 程式碼可以透過多種方式了解捷徑。最常見的是Default ,這些命令是 Visual Studio Code 隨附的開箱即用命令。顧名思義User是由用戶建立的命令。第三種方式是透過Extension 。擴展作者還可以決定加入快捷方式。如果您最喜歡的快捷方式不起作用,這可能是它停止工作的原因。

若要變更鍵綁定,請雙擊該行,然後會彈出一個模式。然後按下所需的組合鍵並按下Enter

鍵綁定 JSON 文件

現在我們知道了鍵綁定的一般工作原理,讓我們來看看keybindings.json檔案。

其中有兩個:預設的keybindings.json和使用者特定的keybindings.json檔案。按CTRL+SHIFT+PF1開啟命令匣並鍵入keyboard shortcuts現在您應該在命令托盤中看到至少兩個條目。

  • 首選項:開啟預設鍵盤快速鍵 (JSON)。

這是 Visual Studio Code 儲存所有預設快捷方式的文件,以及底部未使用的可用捷徑清單。我會避免在這裡更改它們。

  • 首選項:開啟鍵盤快速鍵 (JSON)

這是用戶特定的鍵綁定文件,您應該編輯此文件。一開始,它只是一個空陣列而已!

要在 JSON 檔案中新增快捷方式,您只需新增一個如下所示的物件:

[
    {
        "key": "CTRL+ALT+P",
        "command": "git.pull",
        "when": ""
    }
]

您需要指定密鑰和命令。 when告訴 Visual Studio Code 應在何處執行此命令。如果你把它留空,它會到處監聽。我們在上一部分談到了這一點。

有用的快捷鍵

打開命令面板

您已經知道這一點,但也許您跳到了這一部分 😉

  • CRTL+SHIFT+PF1

這將開啟 Visual Studio Code 中最強大的功能。命令面板。只需輸入您認為想要的內容,它仍然可以找到它!

打開和關閉側邊欄

有時您想要更多的水平空間,但側邊欄卻妨礙了您!只需按

  • CTRL+B

您可以打開和關閉側邊欄

輸入禪宗模式

你喜歡 Visual Studio 程式碼中的 Zen Mod 嗎?是的,它是內建的!

為此,您需要按:

  • CTRL+k ,放開兩個按鍵並按z

這將打開和關閉 Zen Mod。

聚焦綜合終端

我最喜歡的功能之一是 Visual Studio Code 中的整合終端機。我99%的時間都在用它!因此要快速打開或關閉它,您需要按:

  • CTRL+j

這將打開整合終端並將遊標聚焦在其中。如果您再次按下它,它將關閉,並且您的遊標將返回到原來的位置。

在您的專案中搜尋文件

Visual Studio Code 有一個很棒的檔案搜尋內建功能。當您使用遠端擴展時,它也非常快。要打開它,您只需按:

  • CTRL+p

這將打開一個對話框,您可以在其中查看最近打開的文件,這本身就非常好。它還支援模糊搜尋。這意味著您可以鍵入任何單字,它會在檔案的路徑中找到。所以你不必精確!該對話還支持更多的事情。例如go-to line或除錯以及更多功能!如果您想了解更多請在下面評論。

切換到最近開啟的工作區

您在微服務架構中工作並且需要一直切換資料夾?因為你不使用 mono 倉庫?我有捷徑給你!按:

  • CTRL+r

這將開啟一個對話框,其中包含最近開啟的工作區/資料夾的清單。

額外提示:如果您在該對話方塊中按CTRL+ENTER Visual Studio Code 將在新視窗中開啟它。

分割編輯器視窗

人們喜歡 vim,因為它很容易在編輯器之間分割視圖。 Visual Studio Code 也內建了功能。只需按

  • CTRL+\

若要建立 2 列或

  • CTRL+k ,放開k並按住CTRL並按\

建立一個新行。第二個聽起來比它更難,但是一旦它進入你的大腦,它需要你幾秒鐘的時間,你現在知道如何更改或建立新的快捷方式😉

聚焦編輯器視窗

既然您知道如何拆分編輯器窗口,您還需要學習如何快速跳轉這些視圖。這非常簡單,並且還有預設的鍵綁定。你需要按

  • CTRL+[1-9]

這表示您需要按CTRL加您想要關注的視窗的編號。對於第一個視窗按CTRL+1 ,第二個視窗CTRL+2 ,您明白了 Easy 的想法嗎?

關閉目前編輯器視窗

現在您打開了太多編輯器窗口,並且您想要關閉它們。這可以透過按快速完成

  • CTRL+w

這將關閉目前開啟的視窗。

僅關閉已儲存的編輯器視窗

有時您會開啟如此多的編輯器,以至於您不再知道要儲存了什麼。是的,我知道您可以透過選項卡欄中的那個點看到這一點,但是,您仍然無法集中精力並找到正確的檔案。 Visual Studio Code 為您提供支援!只需按

  • CTRL+k然後放開CTRLk並按u

這將保存所有窗口,以便您可以檢查未保存的窗口並保存它們。

開啟一個新文件

您需要一個新檔案來繪製一些程式碼嗎?或者,您需要為您的寵物專案建立一個新檔案?按

  • CTRL+n

這將開啟一個新編輯器。

更改目前文件的語言

您想切換目前文件中選定的語言,因為您想要Javascript (react)而不是Javascript ?按

  • CTRL+k

然後放開CTRLk並按 'm`。

這將打開一個新的對話,您可以在其中搜尋所需的語言。

前往線路

現在讓我們專注於如何讓編輯變得更容易。第 1042 行有錯誤(如果您的文件那麼長,那麼問題就來了)。你不想滾動!按

  • CTRL+g

這將開啟一個對話框,您需要輸入要跳到的行號。與CTRL+p結合使用會非常強大。

轉到符號

您的第一個問題是,什麼是符號?在程式語言中,符號通常是變數。在 CSS 中,它們是選擇器。若要查看對話,請按

  • CTRL+SHIFT+O

這將開啟一個對話框,其中包含目前文件中可用符號的清單。

  • CTRL+t

您會看到一個只有#的對話框,您需要鍵入所需的符號,Visual Studio Code 會在空工作區中搜尋該符號(如果您使用的語言支援該符號)。所以你需要自己檢查一下。

向上或向下移動一條線。

有時您需要移出if內的那行程式碼,或只是移動一行,因為它被提前呼叫了。您可以透過按

  • Alt+Down

將目前選定的行向下移動一行

  • Alt+Up

將目前選定的行向上移動一行

複製目前行

您想用一些變數填充該陣列,但您懶得寫一個循環。那麼要如何填滿array[0] array[1]array[2]呢?透過複製第一行兩次並僅更改您需要的內容。對於那個新聞界

  • ALT+SHIFT+Up

這將複製當前選定的行並將其貼上到上面的一行中

  • ALT+SHIFT+Down

這將複製目前選定的行並將其貼上到下面的一行中

(這個快捷方式在這裡會很方便)

顯示建議

Visual Studio Code 有內建建議。大多數時候它會自動為您彈出,但有時不會,而您確實需要它。簡單,按

  • CTRL+Spacebar

這將打開建議對話框

註解掉目前選擇

有時您需要隔離程式碼並註解掉它周圍的所有內容。按

  • CTRL+/

如果您選擇了多行,則會將其註解掉。如果您沒有選擇任何內容,它只會註解掉這一行。

選擇多行程式碼

要註解掉該程式碼區塊,您需要選擇多行。這是透過按完成的

  • CTRL+Shift+Up

從目前行開始選擇並向上移動遊標。

  • CTRL+Shift+down

從目前行開始選擇並向下移動遊標。

折疊和展開您的程式碼

你有這麼大的功能,但你真的看不到它了,因為它太大了,需要重構,但你沒有時間,所以你想忘記它嗎?您可以折疊和展開程式碼,以便在 100 行中可以產生 1 行。若要執行此操作,請按

  • CTRL+SHIFT+[

折疊(隱藏)程式碼

  • CTRL+SHIFT+]

展開(顯示)程式碼

切一條孔線

對於此,您不能選擇任何程式碼。按

  • CTRL+x

當沒有選擇任何內容時,這會剪切整行。

縮排/減少線

人們通常知道如何縮排程式碼。您可以選擇要縮排的程式碼並按

  • Tab

按下您想要的次數按 Tab 鍵,這樣效果就適合您了。

您知道可以取消縮排嗎?將程式碼從右移到左?您可以透過按

  • SHIFT+tab

結論

還有更多的捷徑。這些快捷鍵是我最常使用的快捷鍵。我希望這可以幫助您更多地了解 Visual Studio Code 中的快捷方式,並且您現在可以建立自己的快捷方式。

我是否忽略了每個人都需要知道的有用命令?

你錯過了什麼嗎?有什麼不清楚嗎?

請寫評論。我盡我所能回答你所有的問題!

👋問好! Instagram |推特|領英|中等|抽搐| Youtube


原文出處:https://dev.to/lampewebdev/the-guide-to-visual-studio-code-shortcuts-higher-productivity-and-30-of-my-favourite-shortcuts-you-need-to-learn-mb3


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈