In diesem Artikel geht es um die coole und praktische Multi-Cursor-Bearbeitung von VSCode und es wird vorgestellt, wie man Multi-Cursor hinzufügt und verwendet. Ich hoffe, dass er für alle hilfreich ist!
Wenn Sie sagen möchten, welche Funktion von VSCode die Codierungseffizienz erheblich verbessert hat, ist die Bearbeitung mit mehreren Cursorn definitiv eine davon. Durch die Bearbeitung mit mehreren Cursorn können wir die Wiederholung derselben Textvorgänge vermeiden. Die in VSCode integrierten und von Erweiterungen von Drittanbietern bereitgestellten Textverarbeitungsbefehle können die Flexibilität der Bearbeitung mit mehreren Cursorn erheblich verbessern. Ich hoffe, dass ich den Lesern durch die Lektüre dieses Artikels beibringen kann, wie sie die Multi-Cursor-Bearbeitung bei der täglichen Bearbeitung flexibel nutzen können. [Empfohlenes Lernen: „
Vscode-Einführungs-Tutorial“]
Inhaltsübersicht:
So fügen Sie mehrere Cursor hinzu- Bewegen Sie den Cursor
- Text auswählen
- Text löschen
- Textverarbeitungsbefehle
- Praxisbeispiele für mehrere Cursor
-
Mehr Eine bessere Wahl neben der Cursorbearbeitung-
So fügen Sie mehrere Cursor hinzu
Allgemeine Methode
Halten Sie die
⌥-Taste gedrückt und bewegen Sie den Cursor dann an die Stelle, an der Sie einen Cursor hinzufügen möchten, und klicken Sie direkt, um einen Cursor hinzuzufügen.
Cursor-Tastenkombinationen hinzufügen
VSCode hat die Taste ⌥ in den Tastenkombinationen für den Cursor
Wir können die Tastenkombinationen
⌘+K,⌘+S Öffnen verwenden die VSCode-Tastenkombinationstabelle und suchen Sie nach cursor, um alle mit dem Cursor verbundenen Tastenkombinationen aufzulisten. Suchen Sie nach cursor hinzufügen, um diejenigen anzuzeigen, die sich auf cursor hinzufügen beziehen. Code> Tastenkombinationen: cursor 会列出所有和光标有关的快捷键，搜索 add cursor 就可以查看和 添加光标 相关的快捷键：
同一列添加光标：
-
⌘+⌥+↓: 在下一行同一列添加光标
-
⌘+⌥+↑: 在上一行同一列添加光标
添加选区
VSCode 编辑器中可以同时存在多个光标，也可以同时存在多个选区。在 VSCode 中大多数添加选区的命令，添加选区的同时也会添加一个光标。因此我们可以利用添加选区的快捷键来添加多光标。
常用的有：
-
⌘+D：添加选区到下一个查找到的匹配，如果匹配到多个，每触发一次就多添加一个
-
⌘+⇧+L: 添加选区到所有查找到的匹配
上面两个快捷键虽然是说查到到的匹配，实际上使用的时候并不会展开搜索框。
VSCode 提供的命令很多时候是满足对称性的，例如⌘+D是添加选区到下一个查找到匹配，那么大概率就会有一个命令用于添加选区到前一个查到到的匹配。
如过要查找的文本比较复杂，我们可以直接先打开搜索，利用搜索框提供的 大小写忽略，匹配整个单词，正则 功能来查找复杂的文本，再使用⌘+⇧+L来选中所有。
如果已经有一个选区，我们可以使用快捷键⌥+⇧+I来在选区的所有行尾添加光标。如果这个时候你想将光标移动到行首，直接输入 Home 键即可。
下面的例子就是先选中多行，再将光标添加到所有行的行尾，将 TypeScript 的 interface 改成使用逗号来分隔属性：
光标移动
多光标编辑的时候显然是不能使用鼠标定位的，这就要求我们使用按键去移动。最基本的上下左右四个箭头，Home, End 键就不用多说了。除此之外，常用的还有每次移动一个单词，或者单词的一部分。
通过搜索 cursor right，cursor end
Cursor in derselben Spalte hinzufügen: 
🎜🎜⌘🎜+🎜⌥🎜+🎜↓🎜: Cursor in derselben Spalte in der nächsten Zeile hinzufügen 🎜🎜🎜⌘🎜+🎜⌥🎜+🎜 ↑🎜: Fügen Sie Licht in derselben Spalte in der vorherigen Zeilenmarkierung hinzu 🎜🎜🎜
🎜Auswahl hinzufügen 🎜🎜 Im VSCode-Editor können mehrere Cursor gleichzeitig vorhanden sein, und es können auch mehrere Auswahlen gleichzeitig vorhanden sein. Die meisten Befehle zum Hinzufügen einer Auswahl in VSCode fügen beim Hinzufügen einer Auswahl auch einen Cursor hinzu. Daher können wir die Tastenkombinationen zum Hinzufügen einer Auswahl verwenden, um mehrere Cursor hinzuzufügen. 🎜🎜Häufig verwendete sind: 🎜🎜🎜🎜⌘🎜+🎜D🎜: Wenn es mehrere Übereinstimmungen gibt, wird bei jedem Auslösen eine weitere hinzugefügt🎜🎜🎜⌘🎜+🎜 ⇧🎜+ 🎜L🎜: Auswahl zu allen gefundenen Übereinstimmungen hinzufügen 🎜🎜🎜
🎜🎜Obwohl sich die beiden oben genannten Tastenkombinationen auf die gefundenen Übereinstimmungen beziehen, erweitern sie das Suchfeld bei Verwendung tatsächlich nicht. 🎜🎜Die von VSCode bereitgestellten Befehle erfüllen häufig die Symmetrie. Beispielsweise dient 🎜⌘🎜+🎜D🎜 dazu, eine Auswahl zur nächsten gefundenen Übereinstimmung hinzuzufügen, sodass eine hohe Wahrscheinlichkeit besteht, dass es einen Befehl zum Hinzufügen einer Auswahl zu gibt vorherige gefundene Übereinstimmung. 🎜🎜
🎜🎜Gefällt mir Wenn der Text, den wir finden möchten, komplexer ist, können wir zuerst direkt die Suche öffnen und die Optionen
Groß-/Kleinschreibung ignorieren,
das gesamte Wort abgleichen und
regulär verwenden. Geben Sie im Suchfeld die Funktion „Code“ ein, um komplexen Text zu finden, und verwenden Sie dann 🎜⌘🎜+🎜⇧🎜+🎜L🎜, um sie alle auszuwählen. 🎜🎜<img src="https://img.php.cn/upload/image/422/995/675/164847059825376Lassen%20Sie%20uns%20dar%C3%BCber%20sprechen,%20wie%20Sie%20in%20VSCode%20mehrere%20Cursor%20hinzuf%C3%BCgen%20und%20verwenden" title="164847059825376Lassen Sie uns darüber sprechen, wie Sie in VSCode mehrere Cursor hinzufügen und verwenden" alt="Lassen Sie uns darüber sprechen, wie Sie in VSCode mehrere Cursor hinzufügen und verwenden">🎜🎜Wenn bereits eine Auswahl vorhanden ist, können wir mit den Tastenkombinationen 🎜⌥🎜+🎜⇧🎜+🎜I🎜 den Cursor am Ende aller Zeilen in der Auswahl hinzufügen. Wenn Sie den Cursor zu diesem Zeitpunkt an den Anfang der Zeile bewegen möchten, geben Sie einfach die Taste <code>Pos1 ein. 🎜🎜Das folgende Beispiel besteht darin, zuerst mehrere Zeilen auszuwählen, dann den Cursor am Ende aller Zeilen hinzuzufügen und die TypeScript-Schnittstelle so zu ändern, dass Kommas zum Trennen von Attributen verwendet werden: 🎜🎜
🎜
Cursorbewegung🎜🎜Mehrfach Cursor Offensichtlich können Sie beim Bearbeiten nicht die Maus zum Positionieren verwenden, was erfordert, dass wir zum Bewegen Tasten verwenden. Die grundlegendsten vier Pfeile sind die Aufwärts-, Abwärts-, Links- und Rechtspfeile, und die Pos1- und Ende-Tasten sind selbstverständlich. Darüber hinaus wird es häufig verwendet, um jeweils ein Wort oder einen Teil eines Wortes zu verschieben. 🎜🎜Sie können die Tastenkombinationen zum Bewegen des Cursors anzeigen, indem Sie nach Cursor rechts, Cursorende suchen: 🎜🎜🎜🎜
Verschieben auf Wortebene wird sehr häufig verwendet:
-
⌥+→: Bewegen Sie den Cursor nach rechts zum Ende des nächsten Wortes
-
^+⌥+→: Bewegen Sie den Cursor nach rechts das Ende des Wortes Der nächste Teil, der Buckel, der Anfang und das Ende des Wortes sind beide Stopppunkte
Ich habe zuvor das symmetrische Design des VSCode-Befehls erwähnt, ⌥+→ ist to nach rechts zum nächsten Ende des Wortes bewegen, dann bedeutet ⌥+ ←, den Anfang des vorherigen Wortes nach links zu verschieben.
Und dies bestätigt auch, was wir zuvor gesagt haben: Die Tastenkombinationen für den Cursor sind alle ⌥. Wenn wir Tastenkombinationen anpassen, ist es daher am besten, die Tastenkombinationen für den Cursor mit ⌥ einzuschließen. Sie können beispielsweise ⌥+J definieren, um zur vorherigen Git-Änderung zu wechseln, und dann ⌥+K symmetrisch entwerfen, um zur nächsten Git-Änderung zu wechseln. Leicht zu merken und zu suchen.
Einige Mac-Benutzer haben möglicherweise das Gefühl, dass sich der Cursor zu langsam bewegt. Dies kann unter Einstellungen angepasst werden, um die Bewegung des Cursors flüssiger zu gestalten: 设置 -> 键盘中调节，让光标移动的更丝滑：
- 拖移
重复前延迟 滑块以设置字符开始重复前的等待时间。
- 拖移
按键重复 滑块以设置字符重复的速率。
建议把 按键重复 速度调快，这样光标移动就会更快更丝滑。
选中文本
在多光标编辑时，最常见操作便是移动，选中，删除，插入等。
移动光标的快捷键加上⇧就是选中移动区域的快捷键
稍微列举几个例子验证这个规律：
-
→是向右移动一个字符，⇧+→可以向右选中下一个字符
-
↑是向上移动一行，⇧+↑就是向上选中一行
-
⌥+→是向右移动到词尾,⇧+⌥+→就是选中光标当前位置到下一个词尾
-
^+⌥+→是向右移动到单词的下一部分,⇧+^+⌥+→就是向右选中单词的一部分
有个需要单独介绍的选中命令是 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
🎜🎜🎜Drag
Verzögerung vor der Wiederholung Schieberegler, um festzulegen, wie lange ein Zeichen wartet, bevor es mit der Wiederholung beginnt. 🎜🎜Ziehen Sie den Schieberegler
Tastenwiederholung, um die Häufigkeit festzulegen, mit der Zeichen wiederholt werden. 🎜🎜🎜Es wird empfohlen, die Geschwindigkeit der
Tastenwiederholung zu erhöhen, damit die Cursorbewegung schneller und flüssiger erfolgt. 🎜
Text auswählen
🎜Während der Bearbeitung mit mehreren Cursorn sind die häufigsten Vorgänge Verschieben, Auswählen, Löschen, Einfügen usw. 🎜
🎜Die Tastenkombination zum Bewegen des Cursors plus 🎜⇧🎜 ist die Tastenkombination zum Auswählen von Bereich verschieben🎜
🎜 Lassen Sie uns einige Beispiele auflisten, um diese Regel zu überprüfen: 🎜🎜🎜 🎜→🎜 Es geht darum, ein Zeichen nach rechts zu verschieben, 🎜⇧🎜+🎜→🎜 kann das nächste Zeichen nach rechts auswählen, 🎜🎜🎜 ↑🎜 bedeutet, eine Zeile nach oben zu verschieben, 🎜⇧🎜+🎜 ↑🎜 bedeutet, auszuwählen eine Zeile nach oben 🎜🎜🎜⌥🎜+🎜→ 🎜 bedeutet, bis zum Ende des Wortes zu gehen, 🎜⇧🎜+🎜⌥🎜+🎜→🎜 bedeutet, die aktuelle Position des Cursors bis zum Ende des nächsten Wortes auszuwählen 🎜🎜 🎜^🎜+🎜⌥🎜+🎜→🎜 bedeutet, direkt zum nächsten Teil des Wortes zu wechseln, 🎜⇧🎜+🎜^🎜+🎜⌥🎜+🎜→🎜 bedeutet, einen Teil des Wortes rechts auszuwählen🎜🎜🎜
🎜🎜Es gibt eine Der Auswahlbefehl, der separat eingeführt werden muss, ist
smart select. Wir wissen, dass die Tastenkombination
cmd + D ein Wort auswählen kann, aber wenn Sie eine Zeichenfolge auswählen möchten, funktioniert dies derzeit nicht, indem Sie die intelligente Auswahl verwenden. 🎜🎜🎜🎜^🎜+🎜⇧🎜+🎜→🎜: Auswahlbereich erweitern 🎜🎜🎜^🎜+🎜⇧🎜+🎜←🎜: Auswahlbereich reduzieren 🎜🎜🎜
🎜🎜Kürzlich hat antfu eine Erweiterung geschrieben, die einen Doppelklick verwendet Obwohl es nichts mit der Bearbeitung mit mehreren Cursorn zu tun hat, können interessierte Leser es erleben:
vscode -smart-clicks . 🎜
Text löschen
🎜Die Tastenkombination zum Bewegen des Cursors plus die Taste 🎜⌫🎜 ist die Tastenkombination zum Links-Löschen Cursorbewegungsbereich-Taste, plus Fn +🎜⌫🎜 ist die Tastenkombination zum rechts Löschen des Cursorbewegungsbereichs 🎜
🎜Auf dem Mac 🎜⌘🎜+🎜→🎜 bedeutet
Ende-Taste, 🎜⌘🎜+🎜←🎜 stellt die <code>Home-Taste dar, fn +🎜⌫🎜 stellt die
Löschen-Taste dar. Diese Regel sollte für alle Anwendungen gelten. 🎜🎜🎜🎜⌥🎜+🎜⌫🎜: Links vom Anfang des Wortes löschen 🎜🎜🎜^🎜+🎜⌥🎜+🎜⌫🎜: Teil des Wortes links löschen 🎜🎜🎜Da die Rücktaste selbst eine Richtung hat, also dort Es ist nicht erforderlich, die Richtungstasten den Tastenkombinationen zuzuordnen. 🎜
Textverarbeitungsbefehle
🎜Während der Bearbeitung mit mehreren Cursorn können wir die von VSCode oder Erweiterungen von Drittanbietern bereitgestellten Befehle verwenden, um schnell bestimmten Text einzufügen oder ausgewählten Text zu konvertieren. in einen bestimmten Text umwandeln. 🎜🎜VSCode verfügt über die folgenden integrierten Funktionen. Am Beispiel des Wortes
letterCase lauten die Konvertierungsergebnisse: 🎜🎜🎜In Großbuchstaben umwandeln:
LETTERCASE🎜🎜Umwandeln in Kleinbuchstaben:
lettercase🎜🎜In Titel umwandeln. Groß- und Kleinschreibung:
LetterCase🎜🎜In Schlangenbuchstaben umwandeln:
letter_case🎜🎜🎜Suchen Sie nach
transform to Alle Textkonvertierungsbefehle finden Sie hier🎜
Um ein praktisches Beispiel zu geben: Wir müssen beispielsweise eine Reihe von Konstanten, die ursprünglich in der Kleinschreibung geschrieben waren, in Großbuchstaben ändern:
Zusätzlich zu den integrierten Textverarbeitungsbefehlen von VSCode können Sie dies tun Verwenden Sie auch Plug-Ins von Drittanbietern, die hier empfohlen werden: Text Power Tools. Gründe für die Empfehlung: Aktive Wartung und umfangreiche Funktionen.
Es gibt viele Funktionen. Leser können die Homepage der Erweiterung besuchen, um mehr darüber zu erfahren. Ich denke, wenn Sie nicht den Forschergeist und die Fähigkeit zum Werfen haben, werden Sie diesen Artikel wahrscheinlich nicht lesen können. Ich werde hier nur die Funktion des Einfügens von Zahlen demonstrieren:
Fähige Leser können auch ihre eigenen VSCode-Erweiterungen schreiben, um weitere Textverarbeitungsbefehle wie Einfügen, Konvertieren und sogar Löschen zu implementieren. Es ist zu beachten, dass alle Auswahlen während der Implementierung verarbeitet werden müssen. Beispielsweise implementiert die VSCode-Erweiterung VSCode FE Helper eine Erweiterung, die ausgewählte Wörter wie folgt in Pluralformen umwandelt. Der Code ist sehr einfach. Sie können feststellen, dass alle Auswahlen durchlaufen werden. Wenn Sie also diesen Befehl während der Multi-Cursor-Bearbeitung aufrufen, können alle Auswahlen verarbeitet werden: Cursor, die ich normalerweise verwende. Für diejenigen, die mit der Bearbeitung mit mehreren Cursorn nicht vertraut sind, mag es etwas kompliziert erscheinen, aber wenn Sie es selbst üben und üben, sollte es Ihnen gut gehen. Ich verwende beim Entwickeln oft die Multi-Cursor-Bearbeitung, aber sie ist nicht so reibungslos wie im Artikel gezeigt, und die Schritte sind möglicherweise nicht das Minimum, aber sie ist immer noch viel effizienter als die wiederholte Bearbeitung. Ich mache oft Fehler beim Tippen, aber das macht nichts, weil ich es trotzdem zurückziehen kann.
Var ersetzen
Wie wir alle wissen, sind Sie bereits ein Junior-Programmierer, wenn Sie Strg + C, Strg + V lernen. Wenn Sie nicht nur Code kopieren, sondern auch den Code anderer Leute ändern können, dann sind Sie bereits ein ausgereifter Programmierer. Das Erlernen der Bearbeitung mit mehreren Cursorn kann die Effizienz beim Ändern von Code erheblich verbessern.
Wenn wir einen Teil des JS-Codes aus Stackoverflow kopieren, sind möglicherweise viele Variablen darin enthalten. Wir können die Bearbeitung mit mehreren Cursorn verwenden, um alle Variablen durch let zu ersetzen.
Schritte:
Platzieren Sie den Cursor auf var
Schritte:
Öffnen Sie package.json und setzen Sie den Cursor auf den ersten Paketnamen.
⌘- +
Alt
+ ↓- Fügen Sie mehrere Cursor zu mehreren Paketnamen hinzu
+⇧+→, verwenden Sie , um den Paketnamen auszuwählen und ⌘
+ C- kopieren
⌘+Nsmart select, erstellen Sie eine neue temporäre Datei, ⌘+ Fügen Sie es ein
- und setzen Sie den Cursor an den Anfang der zweiten Zeile,
⌘+Alt+↓Fügen Sie mehrere Cursor zur gleichen Spalte unten hinzu
Zuerst ⌫- und geben Sie dann ein Leerzeichen ein Kopieren Sie den gesamten Text auf das Terminal.
Refaktorieren Sie den React-Router-Pfad in eine Aufzählung.
Originalcode: 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);
}
});
}Nach dem Login kopieren
实现 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;Nach dem Login kopieren
这个 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教程！！
Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie in VSCode mehrere Cursor hinzufügen und verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
