高效使用VS Code!
- 作者:前端小智
- 原文:21 個VSCode 快捷鍵,讓代碼更快,更有趣
注意 :自己嘗試的時候,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
),搜尋S
tartup 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 + 向下箭頭
)将光标添加到下面。
關于Fundebug
Fundebug專注于JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了10億+錯誤事件,付費客戶有陽光保險、核桃程式設計、荔枝FM、掌門1對1、微脈、青團社等衆多品牌企業。歡迎大家免費試用!