聊聊VSCode中怎么添加并使用多光標

本篇文章帶大家聊聊vscode又酷又實用的多光標編輯，介紹一下添加并使用多光標的方法，希望對大家有所幫助！

如果要說 vscode 哪個特性極大的提高了編碼效率，多光標編輯絕對是其中之一。多光標編輯讓我們避免重復進行相同的文本操作，VSCode 內建的和第三方擴展提供的文本處理命令更是能極大的增強多光標編輯的靈活性。希望通過閱讀這篇文章，能夠教會讀者如何在日常編輯中靈活運用多光標編輯。【推薦學習：《vscode》】

內容大綱：

• 如何添加多光標
• 移動光標
• 選中文本
• 刪除文本
• 文本處理命令
• 多光標實戰示例
• 多光標編輯外更好的選擇

如何添加多光標

通用的方法

按住?鍵不放，再將光標移動到任何你想添加光標的地方直接點擊就會增加一個光標。

添加光標的快捷鍵

VSCode 中和光標相關的快捷鍵中都有 ? 鍵

我們可以通過?+K,?+S快捷鍵組合打開 VSCode 快捷鍵表，搜索 cursor 會列出所有和光標有關的快捷鍵，搜索 add cursor 就可以查看和 添加光標 相關的快捷鍵：

同一列添加光標：

• ?+?+↓: 在下一行同一列添加光標
• ?+?+↑: 在上一行同一列添加光標

添加選區

VSCode 編輯器中可以同時存在多個光標，也可以同時存在多個選區。在 VSCode 中大多數添加選區的命令，添加選區的同時也會添加一個光標。因此我們可以利用添加選區的快捷鍵來添加多光標。

常用的有：

• ?+D：添加選區到下一個查找到的匹配，如果匹配到多個，每觸發一次就多添加一個
• ?+?+L: 添加選區到所有查找到的匹配

上面兩個快捷鍵雖然是說查到到的匹配，實際上使用的時候并不會展開搜索框。

VSCode 提供的命令很多時候是滿足對稱性的，例如?+D是添加選區到下一個查找到匹配，那么大概率就會有一個命令用于添加選區到前一個查到到的匹配。

如過要查找的文本比較復雜，我們可以直接先打開搜索，利用搜索框提供的 大小寫忽略，匹配整個單詞，正則 功能來查找復雜的文本，再使用?+?+L來選中所有。

如果已經有一個選區，我們可以使用快捷鍵?+?+I來在選區的所有行尾添加光標。如果這個時候你想將光標移動到行首，直接輸入 Home 鍵即可。

下面的例子就是先選中多行，再將光標添加到所有行的行尾，將 TypeScript 的 interface 改成使用逗號來分隔屬性：

光標移動

多光標編輯的時候顯然是不能使用鼠標定位的，這就要求我們使用按鍵去移動。最基本的上下左右四個箭頭，Home, End 鍵就不用多說了。除此之外，常用的還有每次移動一個單詞，或者單詞的一部分。

通過搜索 cursor right，cursor end 之類的可以查看和移動光標相關的快捷鍵：

單詞級別的移動是非常常用的：

• ?+→：向右移動光標到下一個詞尾
• ^+?+→：向右移動光標到單詞的下一部分，駝峰，詞首和詞尾都是停留點

之前說過 VSCode 命令的對稱式設計，?+→是向右移動到下一個詞尾，那么?+←就是向左移動上一個詞首。

而且這里也驗證了之前我們說的，和光標相關的快捷鍵都有?。所以我們自定義快捷鍵時，和光標相關的快捷鍵最好也帶上?。例如可以定義?+J為移動到上一個 git change 處，再對稱式設計?+K移動到下一個 git change 處。方便記憶，也方便搜索。

有些 Mac 用戶可能會覺得光標移動太慢，這個可以在 設置 -> 鍵盤中調節，讓光標移動的更絲滑：

• 拖移 重復前延遲 滑塊以設置字符開始重復前的等待時間。
• 拖移 按鍵重復 滑塊以設置字符重復的速率。

建議把 按鍵重復 速度調快，這樣光標移動就會更快更絲滑。

選中文本

在多光標編輯時，最常見操作便是移動，選中，刪除，插入等。

移動光標的快捷鍵加上?就是選中移動區域的快捷鍵

稍微列舉幾個例子驗證這個規律：

• →是向右移動一個字符，?+→可以向右選中下一個字符
• ↑是向上移動一行，?+↑就是向上選中一行
• ?+→是向右移動到詞尾,?+?+→就是選中光標當前位置到下一個詞尾
• ^+?+→是向右移動到單詞的下一部分,?+^+?+→就是向右選中單詞的一部分

有個需要單獨介紹的選中命令是 smart select。我們知道快捷鍵 cmd + D 可以選中一個單詞，但如果想選中一個字符串它就不行了，這個時候可以就可以用智能選中來實現。

• ^+?+→：擴大選中范圍
• ^+?+←：減小選中范圍

最近 antfu 有寫一個用雙擊來智能選中文本的擴展，雖然和多光標編輯沒啥關系，不過感興趣的讀者可以體驗一下：vscode。

刪除文本

移動光標的快捷鍵加上?鍵就是向左刪除光標移動區域的快捷鍵，加上 fn +?就是向右刪除光標移動區域的快捷鍵

Mac 上?+→表示 End 鍵，?+←表示 Home 鍵，fn +?表示 Delete 鍵這個規則應該是所有應用都通用的。

• ?+?: 向左刪除到詞首
• ^+?+?: 向左刪除詞的一部分

因為 backspace 本身就帶有方向性，因此快捷鍵里面不需要搭配方向鍵。

文本處理命令

在多光標編輯時我們可以借助 VSCode 自帶的或者第三方擴展提供的命令來快捷插入特定文本或者將選中文本轉換成特定文本。

VSCode 內置的有下面幾個，以單詞 letterCase 舉例，轉換結果分別為：

• Transform to Uppercase：LETTERCASE
• Transform to Lowercase：lettercase
• Transform to Title Case：LetterCase
• Transform to Snake Case：letter_case

搜索 transform to 就可以找到所有文本轉換命令了

舉個實際的使用例子，例如我們要把一堆原本是小駝峰的常量改成全大寫：

除了 VSCode 內置的文本處理命令，還可以借助第三方插件，這里推薦：vscode。推薦理由：維護積極，功能豐富。

功能非常多，讀者可以查看擴展主頁自行了解。我覺得如果你沒有探索精神和折騰的能力估計也看不到文章這里了。我這里只演示一下插入數字的功能：

有能力的讀者也可以自己編寫 VSCode 擴展去實現更多的插入，轉換，甚至刪除等文本處理命令。需要注意的是實現的時候要處理所有選中，例如筆者的 VSCode 擴展 vscode 實現的將選中單詞變復數的擴展是下面這樣實現的。代碼很簡單。可以注意到里面遍歷了所有選區，所以在多光標編輯時調用這個命令時能夠處理所有選中：

import?{?TextEditor?}?from?'vscode';  export?default?async?function?plur(editor:?TextEditor):?Promise<void>?{ ??const?{?default:?pluralize?}?=?await?import('pluralize'); ??editor.edit((editorBuilder)?=&gt;?{ ????const?{?document,?selections?}?=?editor; ????for?(const?selection?of?selections)?{ ??????const?word?=?document.getText(selection); ??????const?pluralizedWord?=?pluralize(word); ??????editorBuilder.replace(selection,?pluralizedWord); ????} ??}); }</void>

多光標實戰示例

接下來我會演示幾個我平時用到多光標的幾個例子。對于不熟悉多光標編輯的朋友可能看著會有點復雜，不過自己實操一遍多練練應該就沒問題。我平時開發的時候經常會用到多光標編輯，但沒有文中演示的那么絲滑，可能步驟也不是最少的，但還是比重復編輯效率高多了。也會經常輸錯，但是沒關系反正可以撤回嘛。

替換 var

眾所周知，當你學會了 ctrl + c, ctrl + v，你已經是個初級程序員了。當你不但能夠抄代碼還能夠改別人的代碼，那么你已經是個成熟的程序員了。學會了多光標編輯，可以大大提高那我們修改代碼的效率。

當我們從 stackoverflow 抄了一段 JS 代碼下來，可能里面有很多 var，我們可以利用多光標編輯來將所有 var 替換成 let。

Steps:

• 將光標定到 var 上

• ?+?+L，來選中所有 var

• 輸入 let

安裝多個 node package

有時新開了一個項目，我會需要安裝很多 eslint 插件。最開始我的做法是是到之前項目的 package.json 中把包名一個一個抄過來，那太麻煩了。有人說，你咋不直接把包名和版本號一塊復制到新項目的 package.json 就好了，不那樣做主要是之前項目的包版本號不一定是最新的，新項目需要安裝最新的版本。

Steps:

• 打開 package.json，把光標定到第一個包名

• ?+Alt+↓添加多個光標到多個包名

• ^+?+→，利用 smart select 選中包名并?+C復制

• ?+N，新建一個臨時文件，?+V粘貼過去

• 把光標定到第二行的行首，?+Alt+↓往下面同一列添加多光標

• 先?，再敲一個空格就可以把整個文本復制到 terminal 了

重構 react router path 為枚舉

原代碼：

function?App()?{ ??return?( ????<hashrouter> ??????<routes> ????????<route></route>}?/&gt; ????????<route></route>}?/&gt; ????????<route></route>}?/&gt; ????????<route></route>}?/&gt; ??????</routes> ????</hashrouter> ??); }

將原本字符串形式的路由重構為枚舉類型：

export?function?App()?{ ??return?( ????<hashrouter> ??????<routes> ????????<route></route>}?/&gt; ????????<route></route>}?/&gt; ????????<route></route>}?/&gt; ????????<route></route>}?/&gt; ??????</routes> ????</hashrouter> ??); }  enum?RoutePath?{ ??Settings?=?'/settings', ??Collection?=?'/collection', ??NotFound?=?'/notFound', }

挑選這個例子主要是因為操作過程中用到了文本處理命令來處理大小寫問題，由于步驟太多，大家就直接看動圖演示吧：

實現 LetterMapper 類型

在我 vscode 這篇文章中有實現過一個將字符串字面量類型中所有字符轉換成大寫的類型：

type?LetterMapper?=?{ ??a:?'A'; ??b:?'B'; ??c:?'C'; ??d:?'D'; ??e:?'E'; ??f:?'F'; ??g:?'G'; ??h:?'H'; ??i:?'I'; ??j:?'J'; ??k:?'K'; ??l:?'L'; ??m:?'M'; ??n:?'N'; ??o:?'O'; ??p:?'P'; ??q:?'Q'; ??r:?'R'; ??s:?'S'; ??t:?'T'; ??u:?'U'; ??v:?'V'; ??w:?'W'; ??x:?'X'; ??y:?'Y'; ??z:?'Z'; };  type?CapitalFirstLetter<s>?=?S?extends?`${infer?First}${infer?Rest}` ????First?extends?keyof?LetterMapper ??????`${LetterMapper[First]}${Rest}` ????:?S ??:?S;</s>

這個 LetterMapper 類型手敲會覺得很浪費光陰，讓我們用多光標編輯酷炫的實現它：

多光標編輯之外的選擇

VSCode 作為編輯器界的新生代王者，集百家之眾長，除了多光標編輯還有很多可以提高編碼和重構效率的特性。例如：

• F2 重命名符號，批量替換變量名可以的話就不要用多光標編輯
• Snippets，曾經在 twitter 看到有人發帖說寫了一下午的 react 組件，結果人家一個 snippet 就整完了
• Code Actions On Save，在保存文件的時候自動添加缺失的 imports，格式化， lint 的 auto fix 等
• Auto fix 和 fix all，如果你用了自動保存就不能用 Code Actions On Save 了，不過你可以手動調用自動修復和修復所有
• 各種格式化擴展，例如使用 prettier 格式化代碼風格，vscode 格式化 imports

等等。作為一個 VSCode 老玩家，我都覺得 VSCode 還有很多使用的功能特性地方我沒探索到。眾所周知，折騰編輯器，折騰 shell，折騰系統，是程序員的三大樂趣。充滿未知才會有趣，才能讓我們熱此不疲，讓我們每一次發現新大陸的時候感嘆自己以前的無知。

總結

多光標編輯是 VSCode 一個非常實用的特性，熟練掌握光標的移動，選中，刪除和一些常用的文本處理命令可以讓我們使用多光標編輯時更加得心應手。VSCode 的快捷鍵設計有它的一套自己的設計哲學，理解它不但有助于我們記憶快捷鍵，也便于在快捷鍵表中搜索。在我們自定義快捷鍵或者編寫擴展的提供默認快捷鍵的時候也應該要參考這套哲學。當你覺得對下前編碼重構的效率不滿意時，不妨折騰下編輯器，也許能夠帶給你意外的驚喜。

本文完。

更多關于VSCode的相關知識，請訪問：vscode！！