聊聊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-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(&#39;pluralize&#39;);
  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 = &#39;/settings&#39;,
  Collection = &#39;/collection&#39;,
  NotFound = &#39;/notFound&#39;,
}

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

#

实现 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教程！！

以上是聊聊VSCode中怎麼加入並使用多遊標的詳細內容。更多資訊請關注PHP中文網其他相關文章！