『力薦匯總』這些 VS Code 快捷鍵太好用,忍不住錄了這34張gif動圖

之前寫過三篇文章,收穫了極其不錯的閱讀量與轉發量:

一方面,我確實將 VS Code 作為自己的主力編輯器:遠程操作時用、寫筆記時用、寫程式碼(C++/Python/JavaScript)時也用,我已經具有了些許心得與經驗;另一方面,自己也很喜歡積累或閱讀相關資料(比如韓駿老師的《Visual Studio Code 權威指南》),並且在實踐與學習中做成筆記(比如錄製gif)。

本文將匯總我錄製的 34 張 gif 動圖,為讀者朋友推薦並整理『遠離滑鼠,提升效率』的 VS Code 快捷操作。

本文大綱:

  • 6 個 Ctrl+Shift+Alt 組合
  • 8 個你可能不知道的重要操作
  • 3 個有趣又通用的小眾插件
  • 5+ 的 vim + vscode 操作

6 個 Ctrl+Shift+Alt 組合

Ctrl

Ctrl 控制螢幕的移動與游標的移動。

Ctrl + 左右

Ctrl 加上左右鍵,以單詞為單位跳轉。

Ctrl + 上下

Ctrl 加上上下鍵,小幅度滾動螢幕(滾動一行)。

Shift

Shift 相當於「拖動滑鼠」,與方向鍵結合選中文本。

Shift + 上下左右

有了 Shift ,不再用滑鼠拖動。

Alt

Alt 較為特殊。

Alt + 上下

Alt 與上下鍵結合,英文叫做「copy line」,相當於拖著這一行上下移動。

Alt + 左右

Alt 與左右鍵結合,實現「跳轉」。比如我們去看某個函數的定義,我們跳轉過去,當我們看完了,想要跳轉回來時,不需要再動腦回找,直接使用 Alt + ← 即可(Alt + backspace同)。

Ctrl + Shift

Ctrl + Shift + 上下左右

Ctrl + Shift + 上下左右 較好理解,相當於 Ctrl 與 Shift 相結合, Shift 起選中的作用, Ctrl 則讓方向鍵的步長更長(以單詞為單位)。

Ctrl + Alt

Ctrl + Alt + 上下

Ctrl + Alt + 上下多游標 。注意使用 Escape 退出多游標模式。

Shift + Alt

Shift + Alt + 上下

Shift + Alt + 上下,複製這一行。

8 個你可能不知道的重要操作

F12 跳轉引用

使用 F12 實現跳轉

如上圖:

  • F12 跳轉到變數、函數、類的定義處
  • Shift + F12 跳轉到其引用處;多個引用時,可以選擇具體哪個 reference

使用 F12 也可以跳轉到環境庫的源碼中,如下圖,我跳轉到了庫 gym (使用 conda 安裝到 lib)的 core.py

F12 跳轉到 gym 庫的定義中

查找與替換

Ctrl + F 恐怕在任何軟體中都很常用

使用 Ctrl + F 可以進行查找;使用 Ctrl + H 則彈出替換窗口。如上,我將 foo 替換為 foobar ,使用 Alt + R 支援正則語法。

Ctrl + Shift + P

Ctrl + Shift + P 恐怕是各個編輯器、調試器中最常用的操作了:彈出命令窗口,然後我們輸入相關命令的名稱,回車則執行該命令。

Ctrl + Shift + P

如上圖,我使用 Ctrl + Shift + P ,執行 View: Split Editor Right 命令,接著,使用 Ctrl + P 調用出窗口切換器(文件切換器)。

切換窗口

處於一堆、相互重疊的文件, VS code 稱其為一個「group」。我們通常要用到「group的組內切換」和「group間切換」。

group 切換

如上圖,Ctrl + <你要去的 group 編號> 來把游標(的注意力 focus)集中到你要去的 group 上。上面 Ctrl + 1 切換到左邊的 group ;Ctrl + 2 切換到右邊的 group 。

Alt + <數字> 則是在 group 內切換標籤頁。

此外,注意到 Ctrl + Shift + E 打開或關閉文件管理器 Explorer ,就是左側的那個樹狀圖。而 Ctrl + B 是開關 Side Bar ,即側邊欄。

新建、關閉與調試台

使用 Ctrl + ~ 開關終端,而 Ctrl + J 則是開關 Panel ,即含有終端、調試器的底部容器。

新建、關閉與調試台

此外,Ctrl + N 是新建文件,Ctrl + W 是關閉當前文件(這在所有 windows 應用上幾乎都適用)。

禪模式

有時候,節目顯得過於複雜臃腫,分散了我們的注意力,視野不清爽,也會降低舒適度。使用禪模式 Zen Mode 則會屏蔽這些干擾。

開關禪模式

可以使用 Ctrl + Shift + P 輸入 Zen 來調用相關命令。此外,我將其快捷鍵改為了(在左下角的小齒輪的 Keymaps 中更改) Ctrl + Alt + Z ,如上圖,甚是舒爽。

group size

一塊小小的顯示器,還要被兩個或以上的 group 平分區域,我們的程式碼閱讀螢幕實在是太『窄』了。

group size

如上圖,我們可以用 Toggle Editor Group Sizes 來切換閱讀模式,讓其更寬一些。我設置了其快捷鍵為 Ctrl + Alt + G

Ctrl + i / Ctrl + /

如下圖,使用 Ctrl + i 可以調用程式碼提示,而 Ctrl + / 可以將選中的文本注釋掉,或者取消注釋。

Ctrl + i 程式碼提示

3 個有趣又通用的小眾插件

插件:vscode-input-sequence

一個 vscode-input-sequence 解決了我們輸入序列數據的煩惱。

vscode-input-sequence

如上圖,配合多游標,我們可以輸入一個序列的數據,並且可以決定序列的遞進規則、遞進步長、佔位、進位等。

插件:Relative Path

Relative Path

我很喜歡 Relative Path ,如下圖,輸入 Ctrl + Shift + H 便自動補全文件的相對路徑。

Relative Path 補全了圖片的相對路徑

插件:Auto Markdown TOC

Auto Markdown TOC from Hunter Tran

有很多關於 markdown 自動生成目錄的插件,我覺得對中文最友善的,應該是 Hunter Tran 的 Auto Markdown TOC 了。

使用 Auto Markdown TOC 自動生成目錄

如上,使用 Auto Markdown TOC 自動生成目錄(同樣地,在Ctrl + Shift + P 中調用相關命令)。

5+ 的 vim + vscode 操作

Vim 插件安裝

下載 Vim 插件

如上圖,下載 Vim 插件。這裡需要注意,強烈推薦 不使用Vim自帶的組合快捷鍵 Ctrl ,因為其會覆蓋掉 VS Code 本身的快捷鍵以及其他插件的快捷鍵

取消勾選 useCtrlKeys 設置

如上圖,可以在 Settings 中搜索 useCtrlKeys 配置,並取消勾選。

vim scroll

值得注意的是,我們依然可以使用 Ctrl + uCtrl + d 實現上下滾動頁面,滾動行數默認為半頁大小。

Vim 基礎

這裡要介紹的是 Vim 基礎中的基礎,但還是沒有 Vim 基礎的初學者也可以去 B 站搜索 Vim 相關的教程再鞏固一下(我之後也可能錄影片)。

vim 基礎

如上圖:

  • Vim 中默認是 normal 模式,此時敲擊字母是在敲擊命令,而非編輯文本;輸入 i 進入 insert 模式,此時敲擊字母才是輸入字母
  • insert 模式下,退出鍵 Escape 回到 normal 模式
  • normal 模式下,hjkl分別是左下上右

vim 中 a i o 操作

如上:

  • normal 模式下,Shift + a(以後記作A)移到行末,並轉為 insert 模式;I是行前
  • normal 模式下,o是下插一行,並跳轉

vim 中 w b 操作

如上:

  • normal 模式下,w是向前移動一個單詞,b則是向後移動一個單詞

vim 中的複製粘貼

如上:

  • normal 模式下,d是開啟剪切模式,因此,dw則是剪切一個單詞;dd是剪切一行
  • normal 模式下,y則是複製,而p是粘貼

vim 中 s x

如上:

  • normal 模式下,s是刪除當前游標所指並轉為 insert 模式,x是刪除並且不轉換

vim 中 g

如上:

  • normal 模式下,15gg是跳轉到15

vim 中的 visual

如上:

  • normal 模式下,是開啟選中 visual 模式

VS Code 中常用 Vim 組合邏輯

Vim 愛好者常說:Vim是一種邏輯,而非死記硬背快捷鍵(我還算不上 Vim 愛好者,這句話不是我說的,是 Linux 社區的一些朋友們說的)。

我對於 Vim 『邏輯』的理解,大概如下:

  • 大小寫是一種相反的邏輯
  • VS Code 中一些 Ctrl 與滾動
  • i(意味著在括弧里

展開的解釋如下文。

大小寫是一種相反的邏輯

int foo_xyz = 1;
       ^

我們知道,當游標在_處時,想要刪除 _xyz ,那麼就要首先 找到最近的z的位置,然後刪除這個區間內的東西。 在 vim 中,則是輸入 dfz 來表達, fz 則是 找到 z 的意思

vim 中 f 與 F

那麼,向前查找是什麼呢?答案是大寫的 F ,具體例子如上圖。

vim 中 o 與 O

如上,用 o 可以很輕鬆地向下插入一行,而用 O 則是向上插入一行。

VS Code 中一些 Ctrl 與滾動

vim 中的 []

如上,使用 Shift + [] 是以「程式碼塊」為單位跳行。

vim 中 Ctrl + []

如上,Ctrl + [] 實現縮進的調整。這裡結合了 visual 模式。

vim 中滾動

如上,[[ 跳到文件首行,而 ]] 則是行末。

vim 中 H L M z

如上,H 是到螢幕的頂部,L 是螢幕的底部,M 是螢幕的中央;而 zz 是『將游標放到螢幕中央,且不移動游標的位置(滾動螢幕)』,zt 是將游標放到頂部,zb 是底部。

i( 意味著在括弧里

print("delete me")

如上,當我們想清空 print() 函數括弧內的東西,我們「有邏輯地」告訴 vim 即可。把游標移到括弧內,輸入 ci(ci),其中 i( 是『在括弧內』。

一種邏輯

如上,不僅是 c 操作,也不僅僅是 () ,對於 ""[] 等都適用。

此外,還有很多邏輯可以組合,比如:j是向下跳轉一行,那麼 10j 就是向下10行。 此外,/ 查找功能在 vs code 中同樣適用。但是,我更喜歡 vs code 自帶的 ctrl + f 查找。


你好,我是小拍,985大學管理科學與工程專業在讀研究生、技術愛好者與自學者,同時也是 『持續改善 · よい品よい考」』 思想的支援者和踐行者。轉載&合作&學習事宜,歡迎加我微信 PiperLHJ 交流。