VSCode에서 여러 개의 커서를 추가하고 사용하는 방법에 대해 이야기해 보겠습니다.

이 글에서는 VSCode멋지고 실용적인 멀티 커서 편집에 대해 이야기하고, 멀티 커서 추가 및 사용 방법을 소개하겠습니다. 모두에게 도움이 되길 바랍니다!

VSCode의 어떤 기능이 코딩 효율성을 크게 향상시켰다고 한다면 멀티 커서 편집은 단연 그 중 하나입니다. 다중 커서 편집을 사용하면 동일한 텍스트 작업의 반복을 피할 수 있으며 VSCode에 내장되어 있고 타사 확장 프로그램에서 제공하는 텍스트 처리 명령을 사용하면 다중 커서 편집의 유연성을 크게 향상시킬 수 있습니다. 이 글을 읽으면서 독자들에게 일상 편집에서 멀티 커서 편집을 유연하게 활용하는 방법을 가르칠 수 있기를 바랍니다. [추천 학습: "vscode 입문 튜토리얼"]

내용 개요:

• 여러 커서 추가 방법
• 커서 이동
• 텍스트 선택
• 텍스트 삭제
• 텍스트 처리 명령
• 여러 커서 실제 예제
• 더 보기 커서 편집 외에 더 나은 선택

여러 커서를 추가하는 방법

일반적인 방법

⌥ 키를 누른 채 커서를 추가하려는 위치로 커서를 이동한 후 직접 클릭하여 커서를 추가하세요.

커서 단축키 추가

VSCode에는 커서와 관련된 단축키에 ⌥ 키가 있습니다

⌘+K,⌘+S 단축키 조합을 사용할 수 있습니다. VSCode 단축키 테이블에서 cursor를 검색하면 커서와 관련된 모든 단축키가 나열됩니다. 코드> 단축키: cursor 会列出所有和光标有关的快捷键，搜索 add cursor 就可以查看和 添加光标 相关的快捷键：

同一列添加光标：

• ⌘+⌥+↓: 在下一行同一列添加光标
• ⌘+⌥+↑: 在上一行同一列添加光标

添加选区

VSCode 编辑器中可以同时存在多个光标，也可以同时存在多个选区。在 VSCode 中大多数添加选区的命令，添加选区的同时也会添加一个光标。因此我们可以利用添加选区的快捷键来添加多光标。

常用的有：

• ⌘+D：添加选区到下一个查找到的匹配，如果匹配到多个，每触发一次就多添加一个
• ⌘+⇧+L: 添加选区到所有查找到的匹配

上面两个快捷键虽然是说查到到的匹配，实际上使用的时候并不会展开搜索框。

VSCode 提供的命令很多时候是满足对称性的，例如⌘+D是添加选区到下一个查找到匹配，那么大概率就会有一个命令用于添加选区到前一个查到到的匹配。

如过要查找的文本比较复杂，我们可以直接先打开搜索，利用搜索框提供的 大小写忽略，匹配整个单词，正则 功能来查找复杂的文本，再使用⌘+⇧+L来选中所有。

如果已经有一个选区，我们可以使用快捷键⌥+⇧+I来在选区的所有行尾添加光标。如果这个时候你想将光标移动到行首，直接输入 Home 键即可。

下面的例子就是先选中多行，再将光标添加到所有行的行尾，将 TypeScript 的 interface 改成使用逗号来分隔属性：

光标移动

多光标编辑的时候显然是不能使用鼠标定位的，这就要求我们使用按键去移动。最基本的上下左右四个箭头，Home, End 键就不用多说了。除此之外，常用的还有每次移动一个单词，或者单词的一部分。

通过搜索 cursor right，cursor end

같은 열에 커서 추가:

🎜🎜🎜⌘🎜+🎜⌥🎜+🎜↓🎜: 다음 행의 같은 열에 커서 추가 🎜🎜🎜⌘🎜+🎜⌥🎜+🎜↑🎜: 이전 행 표시의 동일한 열에 조명 추가 🎜🎜🎜🎜선택 항목 추가 🎜🎜 VSCode 편집기에는 여러 커서가 동시에 존재할 수 있으며 동시에 여러 선택 항목이 존재할 수도 있습니다. VSCode에서 선택 항목을 추가하는 대부분의 명령은 선택 항목을 추가할 때 커서도 추가합니다. 따라서 선택 항목 추가 단축키를 사용하여 여러 커서를 추가할 수 있습니다. 🎜🎜일반적으로 사용되는 항목은 다음과 같습니다. 🎜🎜🎜🎜⌘🎜+🎜D🎜: 다음으로 찾은 일치 항목에 선택 항목을 추가합니다. 일치하는 항목이 여러 개인 경우 트리거될 때마다 하나가 더 추가됩니다.🎜🎜🎜⌘🎜+🎜 ⇧🎜+ 🎜L🎜: 찾은 모든 일치 항목에 선택 항목 추가 🎜🎜🎜🎜🎜위의 두 단축키는 찾은 일치 항목을 참조하지만 실제로 사용할 때 검색 상자를 확장하지는 않습니다. 🎜🎜VSCode에서 제공하는 명령은 대칭을 이루는 경우가 많습니다. 예를 들어 🎜⌘🎜+🎜D🎜는 다음에 찾은 일치 항목에 선택 항목을 추가하는 것이므로 해당 항목에 선택 항목을 추가하는 명령이 있을 확률이 높습니다. 이전에 찾은 일치 항목입니다. 🎜🎜🎜🎜좋아요 찾으려는 텍스트가 더 복잡한 경우 먼저 검색을 직접 열고 대소문자 무시, 전체 단어 일치 및 일반을 사용할 수 있습니다. code> 기능을 사용하여 복잡한 텍스트를 찾은 다음 🎜⌘🎜+🎜⇧🎜+🎜L🎜을 사용하여 모두 선택하세요. 🎜🎜🎜🎜이미 선택 항목이 있는 경우 단축키 🎜⌥🎜+🎜⇧🎜+🎜I🎜를 사용하여 선택 항목의 모든 줄 끝에 커서를 추가할 수 있습니다. 이때 커서를 줄의 시작 부분으로 이동하려면 Home 키를 입력하면 됩니다. 🎜🎜다음 예는 먼저 여러 줄을 선택한 다음 모든 줄의 끝에 커서를 추가하고 쉼표를 사용하여 속성을 구분하도록 TypeScript 인터페이스를 변경하는 것입니다. 🎜🎜🎜

커서 이동🎜🎜다중 커서 분명히 편집할 때는 위치를 지정하기 위해 마우스를 사용할 수 없습니다. 이동하려면 키를 사용해야 합니다. 가장 기본적인 4개의 화살표는 상하좌우 화살표인데 Home, End 키는 말할 필요도 없습니다. 또한, 한 번에 한 단어 또는 단어의 일부를 이동할 때 흔히 사용됩니다. 🎜🎜 커서 오른쪽, 커서 끝으로 검색하시면 커서 이동 관련 단축키를 보실 수 있습니다: 🎜🎜🎜🎜

단어 수준 이동은 매우 일반적으로 사용됩니다.

• ⌥+→: 커서를 다음 단어의 끝으로 오른쪽으로 이동합니다.
• ^+⌥+→: 커서를 오른쪽으로 이동합니다. 단어의 끝 다음 부분, 혹, 단어의 시작과 끝은 모두 중지 지점입니다

앞에서 VSCode 명령의 대칭 디자인에 대해 언급한 ⌥+→은 오른쪽으로 단어의 다음 끝으로 이동한 다음 ⌥+ ←는 이전 단어의 시작 부분을 왼쪽으로 이동하는 것입니다.

이것 역시 앞서 말한 내용을 확인시켜줍니다. 커서와 관련된 단축키는 모두 ⌥입니다. 따라서 단축키를 사용자 정의할 때 커서와 관련된 단축키를 ⌥로 포함하는 것이 가장 좋습니다. 예를 들어 ⌥+J를 정의하여 이전 Git 변경으로 이동한 다음 대칭적으로 ⌥+K을 디자인하여 다음 Git 변경으로 이동할 수 있습니다. 기억하고 검색하기 쉽습니다.

일부 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

🎜🎜🎜드래그지연 반복 전 문자가 반복을 시작하기 전에 기다리는 시간을 설정하는 슬라이더입니다. 🎜🎜키 반복 슬라이더를 드래그하여 문자 반복 속도를 설정하세요. 🎜🎜🎜커서 이동이 더 빠르고 부드러워지도록 키 반복 속도를 더 빠르게 권장합니다. 🎜

텍스트 선택

🎜멀티 커서 편집 중 가장 일반적인 작업은 이동, 선택, 삭제, 삽입 등입니다. 🎜

🎜커서를 이동하는 단축키 + 🎜⇧🎜는 영역 이동🎜

🎜을 선택하는 단축키입니다. 이 규칙을 확인하기 위한 몇 가지 예를 나열하겠습니다. 🎜🎜🎜 🎜→🎜 한 문자를 오른쪽으로 이동하는 것, 🎜⇧🎜+🎜→🎜 오른쪽으로 다음 문자를 선택하는 것, 🎜🎜🎜↑🎜 한 줄 위로 이동하는 것, 🎜⇧🎜+🎜↑🎜을 선택하는 것 한 줄 위로 🎜🎜🎜⌥🎜+🎜→ 🎜는 단어의 끝으로 오른쪽으로 이동하는 것을 의미하고, 🎜⇧🎜+🎜⌥🎜+🎜→🎜는 커서의 현재 위치를 다음 단어의 끝으로 선택하는 것을 의미합니다. 🎜🎜 🎜^🎜+🎜⌥🎜+🎜→🎜는 단어의 다음 부분으로 바로 이동하는 것을 의미하고,🎜⇧🎜+🎜^🎜+🎜⌥🎜+🎜→🎜는 단어의 오른쪽 부분을 선택하는 것을 의미합니다🎜🎜🎜 🎜🎜이 있습니다 별도로 도입해야 할 선택 명령은 스마트 선택입니다. 단축키 cmd + D가 단어를 선택할 수 있다는 것을 알고 있지만 문자열을 선택하려는 경우 현재 스마트 선택을 사용하면 작동하지 않습니다. 🎜🎜🎜🎜^🎜+🎜⇧🎜+🎜→🎜: 선택 범위 확장 🎜🎜🎜^🎜+🎜⇧🎜+🎜←🎜: 선택 범위 축소 🎜🎜🎜🎜🎜최근 antfu는 두 번 클릭을 사용하는 확장 프로그램을 작성했습니다. 지능적으로 텍스트를 선택합니다. 다중 커서 편집과는 아무런 관련이 없지만 관심 있는 독자는 vscode -스마트 클릭 . 🎜

텍스트 삭제

🎜커서를 이동하는 단축키와 🎜⌫🎜 키는 텍스트를 왼쪽 삭제하는 단축키입니다. 커서 이동 영역 키에 fn +🎜⌫🎜는 커서 이동 영역을 삭제하는 오른쪽 단축키입니다. 🎜

🎜Mac에서는 🎜⌘🎜+🎜→🎜는 End 키, 🎜⌘🎜+🎜←🎜는 <code>Home 키를 나타내고, fn +🎜⌫🎜는 Delete 키를 나타냅니다. 이 규칙은 모든 애플리케이션에 공통되어야 합니다. 🎜🎜🎜🎜⌥🎜+🎜⌫🎜: 단어 시작 부분의 왼쪽 삭제 🎜🎜🎜^🎜+🎜⌥🎜+🎜⌫🎜: 왼쪽 단어의 일부 삭제 🎜🎜🎜백스페이스 자체가 방향성이 있으므로 거기에 방향키와 단축키를 일치시킬 필요가 없습니다. 🎜

텍스트 처리 명령

🎜다중 커서 편집 중에 VSCode 또는 타사 확장 프로그램에서 제공하는 명령을 사용하여 특정 텍스트를 빠르게 삽입하거나 선택한 텍스트를 변환할 수 있습니다. 특정 텍스트로. 🎜🎜VSCode에는 letterCase라는 단어를 예로 들면 다음과 같은 기본 제공 항목이 있으며 변환 결과는 다음과 같습니다. 🎜🎜🎜대문자로 변환: LETTERCASE🎜🎜Transform to 소문자: lettercase🎜🎜제목 케이스로 변환: LetterCase🎜🎜스네이크 케이스로 변환: letter_case🎜🎜🎜transform to 검색 모든 텍스트 변환 명령을 찾을 수 있습니다🎜

예를 들어 실제적인 예를 들기 위해서는 원래 작은 낙타 대문자로 되어 있던 여러 상수를 모두 대문자로 변경해야 합니다.

VSCode에 내장된 텍스트 처리 명령 외에도 다음을 수행할 수 있습니다. 또한 여기에서 권장되는 타사 플러그인을 사용하세요: Text Power Tools. 추천 이유: 적극적인 유지 관리 및 풍부한 기능.

많은 기능이 있습니다. 독자들은 확장 프로그램 홈페이지에서 자세한 내용을 확인할 수 있습니다. 탐구 정신과 던지는 능력이 없다면 아마 이 글을 읽지 못하실 거라 생각합니다. 여기서는 숫자 삽입 기능만 설명하겠습니다.

능력 있는 독자는 자신만의 VSCode 확장을 작성하여 삽입, 변환, 삭제 등 더 많은 텍스트 처리 명령을 구현할 수도 있습니다. 예를 들어 작성자의 VSCode 확장 VSCode FE Helper는 다음과 같이 선택한 단어를 복수형으로 변환하는 확장을 구현합니다. 코드는 매우 간단합니다. 모든 선택 항목이 순회되는 것을 볼 수 있으므로 다중 커서 편집 중에 이 명령을 호출하면 모든 선택 항목이 처리될 수 있습니다. 내가 일반적으로 사용하는 몇 가지 커서. 멀티커서 편집이 익숙하지 않은 분들에게는 조금 복잡해 보일 수도 있지만, 직접 연습하고 연습해보면 괜찮을 것 같습니다. 개발할 때 멀티 커서 편집을 자주 사용하는데, 글에서 설명한 것만큼 매끄럽지 않고, 단계도 최소가 아닐 수 있지만, 그래도 반복 편집보다는 훨씬 효율적입니다. 타이핑할 때 실수하는 경우가 많지만 어차피 철회할 수 있기 때문에 상관없습니다.

Replace var

우리 모두 알고 있듯이 ctrl + c, ctrl + v를 배우면 이미 주니어 프로그래머입니다. 코드를 복사할 수 있을 뿐만 아니라 다른 사람의 코드를 수정할 수도 있다면 당신은 이미 성숙한 프로그래머입니다. 다중 커서 편집을 배우면 코드 수정 효율성을 크게 향상시킬 수 있습니다.

Stackoverflow에서 JS 코드를 복사할 때 여러 변수가 있을 수 있습니다. 다중 커서 편집을 사용하여 모든 변수를 let으로 바꿀 수 있습니다.

단계:

모든 var

을 선택하려면 var

⌘
• +

  ⇧+L에 커서를 놓습니다. 다중 노드 패키지 설치

새 프로젝트를 열 때 가끔 eslint 플러그인을 많이 설치해야 할 때가 있어요. 처음 접근 방식은 이전 프로젝트의 package.json에서 패키지 이름을 하나씩 복사하는 것이었고 너무 번거로웠습니다. 어떤 사람들은 왜 새 프로젝트의 package.json에 패키지 이름과 버전 번호를 복사하지 않느냐고 말합니다. 그렇게 하지 않는 주된 이유는 이전 프로젝트의 패키지 버전 번호가 반드시 최신이 아니기 때문입니다. 새 프로젝트에는 최신 버전을 설치해야 합니다.

• Steps : epOpen Package.json 및 첫 번째 패키지 이름+

  Alt
+

↓

여러 커서를 여러 패키지 이름

^

로 설정합니다. +

⇧

+

→
• ,

  를 사용하여 패키지 이름을 선택하고

  ⌘
+
• C

  복사 ⌘+

  N
, 새 임시 파일 만들기
• ⌘

  + V 붙여넣고 두 번째 줄의 시작 부분에 커서를 설정하고 smart select⌘+Alt+↓

  아래의 동일한 열에 여러 커서를 추가

• 먼저⌫한 다음 공백을 입력하세요. 전체 텍스트를 터미널에 복사합니다.

반응 라우터 경로를 열거형으로 리팩터링합니다.

• 원본 코드:

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

  원래 문자열 경로를 열거형 유형으로 리팩토링합니다.

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

  이 예제를 선택하세요. 주로 텍스트 처리 때문에 명령은 작업 중 대문자 사용 문제를 처리하는 데 사용됩니다. 단계가 너무 많기 때문에 애니메이션 데모를 살펴보겠습니다.

实现 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!