VSCode中如何添加并使用多光標(biāo)

這篇文章主要介紹“VSCode中如何添加并使用多光標(biāo)”，在日常操作中，相信很多人在VSCode中如何添加并使用多光標(biāo)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”VSCode中如何添加并使用多光標(biāo)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

如何添加多光標(biāo)

通用的方法

按住?鍵不放，再將光標(biāo)移動(dòng)到任何你想添加光標(biāo)的地方直接點(diǎn)擊就會(huì)增加一個(gè)光標(biāo)。

添加光標(biāo)的快捷鍵

VSCode 中和光標(biāo)相關(guān)的快捷鍵中都有 ? 鍵

我們可以通過(guò)?+K,?+S快捷鍵組合打開(kāi) VSCode 快捷鍵表，搜索 cursor 會(huì)列出所有和光標(biāo)有關(guān)的快捷鍵，搜索 add cursor 就可以查看和 添加光標(biāo) 相關(guān)的快捷鍵：

同一列添加光標(biāo)：

• ?+?+↓: 在下一行同一列添加光標(biāo)

• ?+?+↑: 在上一行同一列添加光標(biāo)

添加選區(qū)

VSCode 編輯器中可以同時(shí)存在多個(gè)光標(biāo)，也可以同時(shí)存在多個(gè)選區(qū)。在 VSCode 中大多數(shù)添加選區(qū)的命令，添加選區(qū)的同時(shí)也會(huì)添加一個(gè)光標(biāo)。因此我們可以利用添加選區(qū)的快捷鍵來(lái)添加多光標(biāo)。

常用的有：

• ?+D：添加選區(qū)到下一個(gè)查找到的匹配，如果匹配到多個(gè)，每觸發(fā)一次就多添加一個(gè)

• ?+?+L: 添加選區(qū)到所有查找到的匹配

上面兩個(gè)快捷鍵雖然是說(shuō)查到到的匹配，實(shí)際上使用的時(shí)候并不會(huì)展開(kāi)搜索框。

VSCode 提供的命令很多時(shí)候是滿(mǎn)足對(duì)稱(chēng)性的，例如?+D是添加選區(qū)到下一個(gè)查找到匹配，那么大概率就會(huì)有一個(gè)命令用于添加選區(qū)到前一個(gè)查到到的匹配。

如過(guò)要查找的文本比較復(fù)雜，我們可以直接先打開(kāi)搜索，利用搜索框提供的 大小寫(xiě)忽略，匹配整個(gè)單詞，正則 功能來(lái)查找復(fù)雜的文本，再使用?+?+L來(lái)選中所有。

如果已經(jīng)有一個(gè)選區(qū)，我們可以使用快捷鍵?+?+I來(lái)在選區(qū)的所有行尾添加光標(biāo)。如果這個(gè)時(shí)候你想將光標(biāo)移動(dòng)到行首，直接輸入 Home 鍵即可。

下面的例子就是先選中多行，再將光標(biāo)添加到所有行的行尾，將 TypeScript 的 interface 改成使用逗號(hào)來(lái)分隔屬性：

光標(biāo)移動(dòng)

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

通過(guò)搜索 cursor right，cursor end 之類(lèi)的可以查看和移動(dòng)光標(biāo)相關(guān)的快捷鍵：

單詞級(jí)別的移動(dòng)是非常常用的：

• ?+→：向右移動(dòng)光標(biāo)到下一個(gè)詞尾

• ^+?+→：向右移動(dòng)光標(biāo)到單詞的下一部分，駝峰，詞首和詞尾都是停留點(diǎn)

之前說(shuō)過(guò) VSCode 命令的對(duì)稱(chēng)式設(shè)計(jì)，?+→是向右移動(dòng)到下一個(gè)詞尾，那么?+←就是向左移動(dòng)上一個(gè)詞首。

而且這里也驗(yàn)證了之前我們說(shuō)的，和光標(biāo)相關(guān)的快捷鍵都有?。所以我們自定義快捷鍵時(shí)，和光標(biāo)相關(guān)的快捷鍵最好也帶上?。例如可以定義?+J為移動(dòng)到上一個(gè) git change 處，再對(duì)稱(chēng)式設(shè)計(jì)?+K移動(dòng)到下一個(gè) git change 處。方便記憶，也方便搜索。

有些 Mac 用戶(hù)可能會(huì)覺(jué)得光標(biāo)移動(dòng)太慢，這個(gè)可以在 設(shè)置 -> 鍵盤(pán)中調(diào)節(jié)，讓光標(biāo)移動(dòng)的更絲滑：

• 拖移 重復(fù)前延遲 滑塊以設(shè)置字符開(kāi)始重復(fù)前的等待時(shí)間。

• 拖移 按鍵重復(fù) 滑塊以設(shè)置字符重復(fù)的速率。

建議把 按鍵重復(fù) 速度調(diào)快，這樣光標(biāo)移動(dòng)就會(huì)更快更絲滑。

選中文本

在多光標(biāo)編輯時(shí)，最常見(jiàn)操作便是移動(dòng)，選中，刪除，插入等。

移動(dòng)光標(biāo)的快捷鍵加上?就是選中移動(dòng)區(qū)域的快捷鍵

稍微列舉幾個(gè)例子驗(yàn)證這個(gè)規(guī)律：

• →是向右移動(dòng)一個(gè)字符，?+→可以向右選中下一個(gè)字符

• ↑是向上移動(dòng)一行，?+↑就是向上選中一行

• ?+→是向右移動(dòng)到詞尾,?+?+→就是選中光標(biāo)當(dāng)前位置到下一個(gè)詞尾

• ^+?+→是向右移動(dòng)到單詞的下一部分,?+^+?+→就是向右選中單詞的一部分

有個(gè)需要單獨(dú)介紹的選中命令是 smart select。我們知道快捷鍵 cmd + D 可以選中一個(gè)單詞，但如果想選中一個(gè)字符串它就不行了，這個(gè)時(shí)候可以就可以用智能選中來(lái)實(shí)現(xiàn)。

• ^+?+→：擴(kuò)大選中范圍

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

最近 antfu 有寫(xiě)一個(gè)用雙擊來(lái)智能選中文本的擴(kuò)展，雖然和多光標(biāo)編輯沒(méi)啥關(guān)系，不過(guò)感興趣的讀者可以體驗(yàn)一下：vscode-smart-clicks。

刪除文本

移動(dòng)光標(biāo)的快捷鍵加上?鍵就是向左刪除光標(biāo)移動(dòng)區(qū)域的快捷鍵，加上 fn +?就是向右刪除光標(biāo)移動(dòng)區(qū)域的快捷鍵

Mac 上?+→表示 End 鍵，?+←表示 Home 鍵，fn +?表示 Delete 鍵這個(gè)規(guī)則應(yīng)該是所有應(yīng)用都通用的。

• ?+?: 向左刪除到詞首

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

因?yàn)?backspace 本身就帶有方向性，因此快捷鍵里面不需要搭配方向鍵。

文本處理命令

在多光標(biāo)編輯時(shí)我們可以借助 VSCode 自帶的或者第三方擴(kuò)展提供的命令來(lái)快捷插入特定文本或者將選中文本轉(zhuǎn)換成特定文本。

VSCode 內(nèi)置的有下面幾個(gè)，以單詞 letterCase 舉例，轉(zhuǎn)換結(jié)果分別為：

• Transform to Uppercase：LETTERCASE

• Transform to Lowercase：lettercase

• Transform to Title Case：LetterCase

• Transform to Snake Case：letter_case

搜索 transform to 就可以找到所有文本轉(zhuǎn)換命令了

除了 VSCode 內(nèi)置的文本處理命令，還可以借助第三方插件，這里推薦：Text Power Tools。推薦理由：維護(hù)積極，功能豐富。

有能力的讀者也可以自己編寫(xiě) VSCode 擴(kuò)展去實(shí)現(xiàn)更多的插入，轉(zhuǎn)換，甚至刪除等文本處理命令。需要注意的是實(shí)現(xiàn)的時(shí)候要處理所有選中，例如筆者的 VSCode 擴(kuò)展 VSCode FE Helper 實(shí)現(xiàn)的將選中單詞變復(fù)數(shù)的擴(kuò)展是下面這樣實(shí)現(xiàn)的。代碼很簡(jiǎn)單。可以注意到里面遍歷了所有選區(qū)，所以在多光標(biāo)編輯時(shí)調(diào)用這個(gè)命令時(shí)能夠處理所有選中：

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);
    }
  });
}

多光標(biāo)實(shí)戰(zhàn)示例

接下來(lái)我會(huì)演示幾個(gè)我平時(shí)用到多光標(biāo)的幾個(gè)例子。對(duì)于不熟悉多光標(biāo)編輯的朋友可能看著會(huì)有點(diǎn)復(fù)雜，不過(guò)自己實(shí)操一遍多練練應(yīng)該就沒(méi)問(wèn)題。我平時(shí)開(kāi)發(fā)的時(shí)候經(jīng)常會(huì)用到多光標(biāo)編輯，但沒(méi)有文中演示的那么絲滑，可能步驟也不是最少的，但還是比重復(fù)編輯效率高多了。也會(huì)經(jīng)常輸錯(cuò)，但是沒(méi)關(guān)系反正可以撤回嘛。

替換 var

眾所周知，當(dāng)你學(xué)會(huì)了 ctrl + c, ctrl + v，你已經(jīng)是個(gè)初級(jí)程序員了。當(dāng)你不但能夠抄代碼還能夠改別人的代碼，那么你已經(jīng)是個(gè)成熟的程序員了。學(xué)會(huì)了多光標(biāo)編輯，可以大大提高那我們修改代碼的效率。

當(dāng)我們從 stackoverflow 抄了一段 JS 代碼下來(lái)，可能里面有很多 var，我們可以利用多光標(biāo)編輯來(lái)將所有 var 替換成 let。

Steps:

• 將光標(biāo)定到 var 上

• ?+?+L，來(lái)選中所有 var

• 輸入 let

安裝多個(gè) node package

有時(shí)新開(kāi)了一個(gè)項(xiàng)目，我會(huì)需要安裝很多 eslint 插件。最開(kāi)始我的做法是是到之前項(xiàng)目的 package.json 中把包名一個(gè)一個(gè)抄過(guò)來(lái)，那太麻煩了。有人說(shuō)，你咋不直接把包名和版本號(hào)一塊復(fù)制到新項(xiàng)目的 package.json 就好了，不那樣做主要是之前項(xiàng)目的包版本號(hào)不一定是最新的，新項(xiàng)目需要安裝最新的版本。

Steps:

• 打開(kāi) package.json，把光標(biāo)定到第一個(gè)包名

• ?+Alt+↓添加多個(gè)光標(biāo)到多個(gè)包名

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

• ?+N，新建一個(gè)臨時(shí)文件，?+V粘貼過(guò)去

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

• 先?，再敲一個(gè)空格就可以把整個(gè)文本復(fù)制到 terminal 了

重構(gòu) 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>
  );
}

將原本字符串形式的路由重構(gòu)為枚舉類(lèi)型：

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',
}

實(shí)現(xiàn) LetterMapper 類(lèi)型

在我 TypeScript 類(lèi)型體操實(shí)例解析 這篇文章中有實(shí)現(xiàn)過(guò)一個(gè)將字符串字面量類(lèi)型中所有字符轉(zhuǎn)換成大寫(xiě)的類(lèi)型：

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;

多光標(biāo)編輯之外的選擇

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

• F2 重命名符號(hào)，批量替換變量名可以的話(huà)就不要用多光標(biāo)編輯

• Snippets，曾經(jīng)在 twitter 看到有人發(fā)帖說(shuō)寫(xiě)了一下午的 react 組件，結(jié)果人家一個(gè) snippet 就整完了

• Code Actions On Save，在保存文件的時(shí)候自動(dòng)添加缺失的 imports，格式化， lint 的 auto fix 等

• Auto fix 和 fix all，如果你用了自動(dòng)保存就不能用 Code Actions On Save 了，不過(guò)你可以手動(dòng)調(diào)用自動(dòng)修復(fù)和修復(fù)所有

• 各種格式化擴(kuò)展，例如使用 prettier 格式化代碼風(fēng)格，JS/TS Import/Export Sorter 格式化 imports

等等。作為一個(gè) VSCode 老玩家，我都覺(jué)得 VSCode 還有很多使用的功能特性地方我沒(méi)探索到。眾所周知，折騰編輯器，折騰 shell，折騰系統(tǒng)，是程序員的三大樂(lè)趣。充滿(mǎn)未知才會(huì)有趣，才能讓我們熱此不疲，讓我們每一次發(fā)現(xiàn)新大陸的時(shí)候感嘆自己以前的無(wú)知。

到此，關(guān)于“VSCode中如何添加并使用多光標(biāo)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！