21 個VSCode 快捷鍵,讓代碼更快,更有趣

阿里雲最近在作活動,低至2折,有興趣能夠看看:
https://promotion.aliyun.com/...

爲了保證的可讀性,本文采用意譯而非直譯。html

注意:本身嘗試的時候,Mac(17, pro) 與原文提供的快捷鍵盤不太同樣,mac 對應的 Ctrl 要換成 command

作爲前端開發者來講,大都數都用過 VSCode,而且也有不少是常常用的。但 VSCode 的一些快捷鍵可能咱們不知道,也比較少用,畢竟這很好,所以本文就列出一些快捷鍵方便你們學習與記憶。前端

在這篇文章中,我將列出我最喜歡的快捷鍵,這些快捷鍵讓我更快的編寫代碼,也讓編碼變得更有趣,如下是21 個 VSCode 快捷鍵,分享給你。git

1. 一次搜索全部文件的文本

Windows: Ctrl + Shift + F
Mac: Command + Shift + F

VSCode中我最喜歡的特性之一是可以在項目目錄中的全部文件中搜索任何匹配的文本。github

要使用此特性,能夠按Ctrl + Shift + f打開視圖,它將顯示編輯器左側的側邊欄:windows

clipboard.png

輸入查找的內容並回車,VS code 將提供與輸入內容匹配的結果列表,以下所示:編輯器

clipboard.png

你還能夠同時規制每一個搜索果文件中的全部匹配內容。若是你單擊左邊的這個小箭頭,它將在下面彈出第二個輸入框,能夠在這裏輸入要替換的文本,同時單擊右邊出現的小框:工具

clipboard.png

2.爲 tabs 設置強調色(Material Theme)

你是否厭倦了天天看到相同的 tabs 底部顏色?可使用 Material Theme 來擴展 VsCode 的主題,這樣就能夠爲 tabs 設置不一樣的顏色。post

紅色:性能

clipboard.png

紫色學習

clipboard.png

黃色

clipboard.png

有16種不一樣的顏色可供選擇。

所以,若是胸有安裝此擴展,打開的命令面板(Ctrl + Shift + P),選擇 Material Theme: Set accent color並從列表中選擇一個顏色,它將更改選項卡的下劃線顏色,以下所示

圖片描述

3.進程資源管理器

你是否發現你的VsCode 編輯器有時有點慢?這時候你但願哪一個進程在吃咱們的內存?

好吧,若是你還不知道,VsCode 有一個進程資源管理器功能,以下所示:

clipboard.png

是否是看起來很熟悉?

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來查看全部你安裝的正在運行的插件。

clipboard.png

9. 從新加載

我我的認爲這是 VsCode 最酷的特性之一。它容許你在從新加載編輯器時將窗口放在前面,同時具備與關閉和從新打開窗口相同的效果。

Windows: Ctrl + Alt + R
Mac: Control + Option + R

10. 將選項卡交換到不一樣的組

在我開發的過程當中,我習慣在錯誤的選項卡組中使用選項卡。 我也但願避免儘量多地使用個人鼠標來解決問題,由於這會讓我把手從鍵盤上擡起來,我很懶,手一塊兒想放鍵盤上。

幸運的是,VsCode 有一種方法能夠經過按Ctrl + Alt +右箭頭(Mac:Control + Option +右箭頭)將標籤移動到右側的組,或者按Ctrl + Alt + 左箭頭將標籤轉移到單獨的標籤組 (Mac:Control + Option +左箭頭))將標籤移動到左側的組:

圖片描述

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 中,啓動性能是很重要的。這就是爲何你能彈出一個有用的窗口,奇蹟般地提供全部你須要的信息:

clipboard.png

打開命令面板(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監控工具 Fundebug

交流

乾貨系列文章彙總以下,以爲不錯點個Star,歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智,公衆號「大遷世界」做者,對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨,在進階的路上,共勉!

關注公衆號,後臺回覆福利,便可看到福利,你懂的。

clipboard.png

相關文章
相關標籤/搜索