21個極大提高開發效率的VS Code快捷鍵
摘要: 高效使用VS Code!
- 作者:前端小智
- 原文:21 個VSCode 快捷鍵,讓程式碼更快,更有趣
Fundebug經授權轉載,版權歸原作者所有。
注意:自己嘗試的時候,Mac(17, pro) 與原文提供的快捷鍵盤不太一樣,mac 對應的 Ctrl 要換成 command
做為前端開發者來說,大都數都用過 VSCode,並且也有很多是經常用的。但 VSCode 的一些快捷鍵可能我們不知道,也比較少用,畢竟這很好,因此本文就列出一些快捷鍵方便大家學習與記憶。
在這篇文章中,我將列出我最喜歡的快捷鍵,這些快捷鍵讓我更快的編寫程式碼,也讓編碼變得更有趣,以下是21 個 VSCode 快捷鍵,分享給你。
1. 一次搜尋所有檔案的文字
Windows: Ctrl + Shift + F Mac: Command + Shift + F
VSCode中我最喜歡的特性之一是能夠在專案目錄中的所有檔案中搜索任何匹配的文字。
要使用此特性,可以按Ctrl + Shift + f
開啟檢視,它將顯示編輯器左側的側邊欄:
輸入查詢的內容並回車,VS code 將提供與輸入內容匹配的結果列表,如下所示:
你還可以同時規制每個搜尋果檔案中的所有匹配內容。如果你單擊左邊的這個小箭頭,它將在下面彈出第二個輸入框,可以在這裡輸入要替換的文字,同時單擊右邊出現的小框:
2.為 tabs 設定強調色(Material Theme)
你是否厭倦了每天看到相同的 tabs 底部顏色?可以使用 Material Theme 來擴充套件 VsCode 的主題,這樣就可以為 tabs 設定不同的顏色。
紅色:
紫色
黃色
有16種不同的顏色可供選擇。
因此,如果胸有安裝此擴充套件,開啟的命令面板(Ctrl + Shift + P
),選擇 Material Theme: Set accent color
並從列表中選擇一個顏色,它將更改選項卡的下劃線顏色,如下所示
3.程序資源管理器
你是否發現你的VsCode 編輯器有時有點慢?這時候你希望哪個程序在吃我們的記憶體?
好吧,如果你還不知道,VsCode 有一個程序資源管理器功能,如下所示:
是不是看起來很熟悉?
在windows工作管理員中看到過這一點,在VsCode 中按Ctrl + Alt + Delete
可以開啟該工作管理員。
4.Expand Bracket Selection
開啟鍵盤快捷鍵(Ctrl + Shift + P
或 command + Shift + p
),搜尋 Expand Bracket Selection
。
這是我需要花費一些時間才能發現的,因為我無法猜出該功能的名稱。使用此功能可以自動選擇整個塊,從開始的大括號到結束。
我發現這個功能在想要找到 if/else
對應的結束塊很有用。
5. 重新開啟 關閉的編輯頁面
Windows: Ctrl + Shift + T Mac: command + Shift + T
當你處理一個檔案很多的大型專案時,如果不小心關閉了一個頁面,並且不得不在側選單中再次搜尋它,這可能會有點令人沮喪。
現在,可以按 Ctrl + Shift + T
重新開啟一個關閉的頁面。
6. 通過匹配文字開啟檔案
Windows: Ctrl + T Mac: command + T
說到搜尋檔案,你可以動態地搜尋和開啟檔案。這是我最喜歡的特性之一,因為不需要手動單擊目錄來重新開啟一個不再開啟的檔案。
7. 整合終端
Windows: Ctrl +
Mac: control +
通過 **Ctrl + `**可以開啟或關閉終端
8. 檢視正在執行外掛
你可以通過開啟命令面板(Ctrl + Shift + P
)並輸入Show running extensions
來檢視所有你安裝的正在執行的外掛。
9. 重新載入
我個人認為這是 VsCode 最酷的特性之一。它允許你在重新載入編輯器時將視窗放在前面,同時具有與關閉和重新開啟視窗相同的效果。
Windows: Ctrl + Alt + R Mac: Control + Option + R
10. 將選項卡交換到不同的組
在我開發的過程中,我習慣在錯誤的選項卡組中使用選項卡。 我也希望避免儘可能多地使用我的滑鼠來解決問題,因為這會讓我把手從鍵盤上擡起來,我很懶,手一起想放鍵盤上。
幸運的是,VsCode 有一種方法可以通過按Ctrl + Alt +右箭頭
(Mac:Control + Option +右箭頭)
將標籤移動到右側的組,或者按Ctrl + Alt + 左箭頭
將標籤轉移到單獨的標籤組 (Mac:Control + Option +左箭頭)
)將標籤移動到左側的組:
程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
11.選擇左側/右側的所有內容
有時你想要刪除游標右側或左側的所有內容。 你可以選擇游標右側或左側的所有內容。例如,要選擇右側或左側的所有內容:
Windows: Ctrl + Shift + Home/End Mac: command + Shift + Home/End
蘋果筆記本沒home鍵,可以用組合鍵實現
- fn鍵+左方向鍵是HOME
- fn鍵+右方向鍵是END
- fn+上方向鍵是page up
- fn+下方向鍵是page down
12.刪除上一個單詞
要刪除前一個單詞,可以按Ctrl + Backspace
(Mac: option + delete
)。這在你打錯字的時候非常有用。
你可以在 VsCode 之外的任何地方使用它。
13. 啟動效能
有時候,缺乏關於效能問題的詳細資訊是一件非常痛苦的事情,同時還要找出哪些有效能問題。
有時候,如果你足夠幸運,你會找到一個工具,它能給你所有的答案。在VsCode 中,啟動效能是很重要的。這就是為什麼你能彈出一個有用的視窗,奇蹟般地提供所有你需要的資訊:
開啟命令面板(Ctrl + Shift + P
),搜尋Startup Performance
。
14.逐個選擇文字
可以通過快捷鍵Ctrl + Shift +右箭頭
(Mac: option + Shift +右箭頭
)和Ctrl + Shift +左箭頭
(Mac: option + Shift +左箭頭)逐個選擇文字。
15. 重複的行
一個非常強大和已知的功能是複製行。只需按 Shift + Alt + 向下箭頭
(Mac: command + Shift + 向下箭頭
)
16.移至檔案的開頭/結尾
要使游標移到檔案的第一行或最後一行,最快的方法是按Ctrl + Home
(Mac: command + Home
)鍵開頭,然後按Ctrl + End
(Mac: command + End
)鍵結尾。
17. 批量替換當前檔案中所有匹配的文字
可以選擇任何一組文字,如果該選中文字出現多個,可以通過按Ctrl + F2
(Mac: command + F2
)一次改所有出現的文字。
18. 向上/向下移動一行
按Alt + 向上箭頭
(Mac: command+ 向上箭頭
)當前行向上移動,按Alt + 向下箭頭
(Mac: command+ 向下箭頭
))當前行向下移動。
19. 刪除一行
有兩種方法可以立即刪除一行。
使用Ctrl + X
剪下命令(Mac:command + X
)來刪除一行。
或者使用 Ctrl + Shift + K
(Mac: command + Shift + K
)命令。
20.將編輯器向左或向右移動
如果你像我一樣,你可能會有一種無法控制的慾望,想要在一個組中重新排列選項卡,其中選項卡相互關聯,左邊的選項卡是比較重要檔案,而右邊的選項卡是相對不重要的檔案。 通過 Ctrl+Shift+PgUp/PgDown(command + +Shift+PgUp/PgDown)向左/向右移動編輯器。
21. 複製游標向上或者向上批量新增內容
在 VsCode 中複製遊標可以證明是最節省時間的特性。
按Ctrl + Alt +向上箭頭
(Mac: Control + Option +向上箭頭
)將游標新增到上面,按Ctrl + Alt +向下箭頭
(Mac: Control + Option + 向下箭頭
)將游標新增到下面。
程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fun