聊聊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-smart-clicks。

刪除文字

移動遊標的快捷鍵加上⌫鍵就是向左刪除遊標移動區域的快捷鍵，加上 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 內建的文書處理命令，還可以藉助第三方外掛，這裡推薦：Text Power Tools。推薦理由：維護積極，功能豐富。

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

有能力的讀者也可以自己編寫 VSCode 擴充套件去實現更多的插入，轉換，甚至刪除等文書處理命令。需要注意的是實現的時候要處理所有選中，例如筆者的 VSCode 擴充套件 VSCode FE Helper 實現的將選中單詞變複數的擴充套件是下面這樣實現的。程式碼很簡單。可以注意到裡面遍歷了所有選區，所以在多遊標編輯時呼叫這個命令時能夠處理所有選中：

import { TextEditor } from 'vscode';

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

多遊標實戰範例

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

替換 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 index element={<Home />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/collection" element={<Collection />} />
        <Route path="/notFound" element={<NotFound />} />
      </Routes>
    </HashRouter>
  );
}

將原本字串形式的路由重構為列舉型別：

export function App() {
  return (
    <HashRouter>
      <Routes>
        <Route index element={<Home />} />
        <Route path={RoutePath.Settings} element={<Settings />} />
        <Route path={RoutePath.Collection} element={<Collection />} />
        <Route path={RoutePath.NotFound} element={<NotFound />} />
      </Routes>
    </HashRouter>
  );
}

enum RoutePath {
  Settings = '/settings',
  Collection = '/collection',
  NotFound = '/notFound',
}

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

實現 LetterMapper 型別

在我 TypeScript 型別體操範例解析 這篇文章中有實現過一個將字串字面量型別中所有字元轉換成大寫的型別：

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 extends string> = S extends `${infer First}${infer Rest}`
  ? First extends keyof LetterMapper
    ? `${LetterMapper[First]}${Rest}`
    : 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 格式化程式碼風格，JS/TS Import/Export Sorter 格式化 imports

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

總結

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

本文完。

更多關於VSCode的相關知識，請存取：！！

以上就是聊聊VSCode中怎麼新增並使用多遊標的詳細內容，更多請關注TW511.COM其它相關文章！