Cet article parlera de VSCodeédition multi-curseurs sympa et pratique, et présentera comment ajouter et utiliser des multi-curseurs. J'espère que cela sera utile à tout le monde !
Si vous voulez dire quelle fonctionnalité de VSCode a considérablement amélioré l'efficacité du codage, l'édition multi-curseur en fait certainement partie. L'édition multi-curseur nous permet d'éviter de répéter les mêmes opérations de texte. Les commandes de traitement de texte intégrées à VSCode et fournies par des extensions tierces peuvent considérablement améliorer la flexibilité de l'édition multi-curseur. J'espère qu'en lisant cet article, je pourrai apprendre aux lecteurs comment utiliser de manière flexible l'édition multi-curseur dans l'édition quotidienne. [Apprentissage recommandé : "Tutoriel d'introduction au vscode"]
Aperçu du contenu :
- Comment ajouter plusieurs curseurs
- Déplacer le curseur
- Sélectionner du texte
- Supprimer du texte
- Commandes de traitement de texte
- Exemples pratiques de plusieurs curseurs
- Plus Un meilleur choix en plus de l'édition du curseur
Comment ajouter plusieurs curseurs
Méthode générale
Maintenez la touche ⌥ enfoncée, puis déplacez le curseur là où vous souhaitez ajouter un curseur et cliquez directement pour ajouter un curseur.
Ajouter des touches de raccourci pour le curseur
VSCode a la touche ⌥ dans les touches de raccourci liées au curseur
Nous pouvons utiliser ⌘+K,⌘+S combinaisons de touches de raccourci Ouvrir le tableau des touches de raccourci VSCode et recherchez cursor pour répertorier toutes les touches de raccourci liées au curseur. Recherchez ajouter un curseur pour afficher celles liées à ajouter un curseurcode> Touches de raccourci : <code>cursor 会列出所有和光标有关的快捷键，搜索 add cursor 就可以查看和 添加光标 相关的快捷键：
同一列添加光标：
-
⌘+⌥+↓: 在下一行同一列添加光标
-
⌘+⌥+↑: 在上一行同一列添加光标
添加选区
VSCode 编辑器中可以同时存在多个光标，也可以同时存在多个选区。在 VSCode 中大多数添加选区的命令，添加选区的同时也会添加一个光标。因此我们可以利用添加选区的快捷键来添加多光标。
常用的有：
-
⌘+D：添加选区到下一个查找到的匹配，如果匹配到多个，每触发一次就多添加一个
-
⌘+⇧+L: 添加选区到所有查找到的匹配
上面两个快捷键虽然是说查到到的匹配，实际上使用的时候并不会展开搜索框。
VSCode 提供的命令很多时候是满足对称性的，例如⌘+D是添加选区到下一个查找到匹配，那么大概率就会有一个命令用于添加选区到前一个查到到的匹配。
如过要查找的文本比较复杂，我们可以直接先打开搜索，利用搜索框提供的 大小写忽略，匹配整个单词，正则 功能来查找复杂的文本，再使用⌘+⇧+L来选中所有。
如果已经有一个选区，我们可以使用快捷键⌥+⇧+I来在选区的所有行尾添加光标。如果这个时候你想将光标移动到行首，直接输入 Home 键即可。
下面的例子就是先选中多行，再将光标添加到所有行的行尾，将 TypeScript 的 interface 改成使用逗号来分隔属性：
光标移动
多光标编辑的时候显然是不能使用鼠标定位的，这就要求我们使用按键去移动。最基本的上下左右四个箭头，Home, End 键就不用多说了。除此之外，常用的还有每次移动一个单词，或者单词的一部分。
通过搜索 cursor right，cursor end
Ajouter un curseur dans la même colonne :
🎜🎜🎜⌘🎜+🎜⌥🎜+🎜↓🎜 : Ajouter un curseur dans la même colonne dans la ligne suivante 🎜🎜🎜⌘🎜+🎜⌥🎜+🎜↑🎜 : Ajoutez de la lumière dans la même colonne de la ligne précédente 🎜🎜🎜
🎜Ajouter une sélection 🎜🎜 Plusieurs curseurs peuvent exister dans l'éditeur VSCode en même temps, et plusieurs sélections peuvent également exister en même temps. La plupart des commandes permettant d'ajouter une sélection dans VSCode ajouteront également un curseur lors de l'ajout d'une sélection. Par conséquent, nous pouvons utiliser les touches de raccourci pour ajouter une sélection afin d'ajouter plusieurs curseurs. 🎜🎜Les plus couramment utilisés sont : 🎜🎜🎜🎜⌘🎜+🎜D🎜 : Ajoutez la sélection à la prochaine correspondance trouvée, une de plus sera ajoutée à chaque fois qu'elle est déclenchée🎜🎜🎜⌘🎜+🎜. ⇧🎜+ 🎜L🎜 : Ajouter une sélection à toutes les correspondances trouvées 🎜🎜🎜
🎜🎜Bien que les deux touches de raccourci ci-dessus fassent référence aux correspondances trouvées, elles n'étendent pas en réalité le champ de recherche lorsqu'elles sont utilisées. Les commandes fournies par 🎜🎜VSCode répondent souvent à la symétrie. Par exemple, 🎜⌘🎜+🎜D🎜 consiste à ajouter une sélection à la prochaine correspondance trouvée, il y a donc une forte probabilité qu'il y ait une commande pour ajouter une sélection à la prochaine correspondance trouvée. correspondance trouvée précédente. 🎜🎜
🎜🎜J'aime Si le texte que nous voulons trouver est plus complexe, nous pouvons d'abord ouvrir directement la recherche et utiliser
ignorer la casse,
faire correspondre le mot entier et
régulier code> fourni dans la fonction de champ de recherche pour trouver du texte complexe, puis utilisez 🎜⌘🎜+🎜⇧🎜+🎜L🎜 pour les sélectionner tous. 🎜🎜<img src="https://img.php.cn/upload/image/422/995/675/164847059825376Parlons%20de%20la%20fa%C3%A7on%20dajouter%20et%20dutiliser%20plusieurs%20curseurs%20dans%20VSCode" title="164847059825376Parlons de la façon dajouter et dutiliser plusieurs curseurs dans VSCode" alt="Parlons de la façon dajouter et dutiliser plusieurs curseurs dans VSCode">🎜🎜S'il y a déjà une sélection, nous pouvons utiliser les touches de raccourci 🎜⌥🎜+🎜⇧🎜+🎜I🎜 pour ajouter le curseur à la fin de toutes les lignes de la sélection. Si vous souhaitez déplacer le curseur au début de la ligne à ce moment-là, entrez simplement la touche <code>Accueil. 🎜🎜L'exemple suivant consiste à sélectionner d'abord plusieurs lignes, puis à ajouter le curseur à la fin de toutes les lignes et à modifier l'interface TypeScript pour utiliser des virgules pour séparer les attributs : 🎜🎜
🎜
Mouvement du curseur🎜🎜Multiple curseurs Évidemment, vous ne pouvez pas utiliser la souris pour vous positionner lors de l'édition, ce qui nous oblige à utiliser des touches pour nous déplacer. Les quatre flèches les plus élémentaires sont les flèches haut, bas, gauche et droite, et il va sans dire que les touches Début et Fin. De plus, il est couramment utilisé pour déplacer un mot ou une partie de mot à la fois. 🎜🎜Vous pouvez afficher les touches de raccourci liées au déplacement du curseur en recherchant curseur droit, fin du curseur et autres : 🎜🎜🎜🎜
Le mouvement au niveau du mot est très couramment utilisé :
-
⌥+→ : Déplacez le curseur vers la droite jusqu'à la fin du mot suivant
-
^+⌥+→ : Déplacez le curseur vers la droite pour la fin du mot La partie suivante, la bosse, le début et la fin du mot sont tous deux des points d'arrêt
J'ai mentionné avant la conception symétrique de la commande VSCode, ⌥+→ est de déplacer vers la droite jusqu'à la fin suivante du mot, puis ⌥+ ← consiste à déplacer le début du mot précédent vers la gauche.
Et cela vérifie également ce que nous avons dit précédemment, les touches de raccourci liées au curseur sont toutes ⌥. Par conséquent, lorsque nous personnalisons les touches de raccourci, il est préférable d'inclure les touches de raccourci liées au curseur avec ⌥. Par exemple, vous pouvez définir ⌥+J pour passer au changement git précédent, puis concevoir symétriquement ⌥+K pour passer au changement git suivant. Facile à mémoriser et à rechercher.
Certains utilisateurs de Mac peuvent avoir l'impression que le curseur se déplace trop lentement. Cela peut être ajusté dans Paramètres -> Clavier pour rendre le déplacement du curseur plus fluide : 设置 -> 键盘中调节，让光标移动的更丝滑：
- 拖移
重复前延迟 滑块以设置字符开始重复前的等待时间。
- 拖移
按键重复 滑块以设置字符重复的速率。
建议把 按键重复 速度调快，这样光标移动就会更快更丝滑。
选中文本
在多光标编辑时，最常见操作便是移动，选中，删除，插入等。
移动光标的快捷键加上⇧就是选中移动区域的快捷键
稍微列举几个例子验证这个规律：
-
→是向右移动一个字符，⇧+→可以向右选中下一个字符
-
↑是向上移动一行，⇧+↑就是向上选中一行
-
⌥+→是向右移动到词尾,⇧+⌥+→就是选中光标当前位置到下一个词尾
-
^+⌥+→是向右移动到单词的下一部分,⇧+^+⌥+→就是向右选中单词的一部分
有个需要单独介绍的选中命令是 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
![Parlons de la façon dajouter et dutiliser plusieurs curseurs dans VSCode]( "164847061660850Parlons de la façon dajouter et dutiliser plusieurs curseurs dans VSCode")
🎜🎜🎜Faites glisser
Délai avant de répéter Curseur pour définir le temps d'attente d'un caractère avant de commencer à se répéter. 🎜🎜Faites glisser le curseur
Key Repeat pour définir la fréquence à laquelle les caractères sont répétés. 🎜🎜🎜Il est recommandé de
répéter les touches plus rapidement afin que le mouvement du curseur soit plus rapide et plus fluide. 🎜
Sélectionner du texte
🎜Lors de l'édition multi-curseur, les opérations les plus courantes sont le déplacement, la sélection, la suppression, l'insertion, etc. 🎜
🎜La touche de raccourci pour déplacer le curseur plus 🎜⇧🎜 est la touche de raccourci pour sélectionner Déplacer la zone🎜
🎜 Listons quelques exemples pour vérifier cette règle : 🎜🎜🎜 🎜→🎜 Il s'agit de déplacer un caractère vers la droite, 🎜⇧🎜+🎜→🎜 peut sélectionner le caractère suivant vers la droite 🎜🎜🎜↑🎜 est de déplacer une ligne vers le haut, 🎜⇧🎜+🎜↑🎜 est de sélectionner une ligne 🎜🎜🎜⌥🎜+🎜→ 🎜 signifie se déplacer jusqu'à la fin du mot, 🎜⇧🎜+🎜⌥🎜+🎜→🎜 signifie sélectionner la position actuelle du curseur jusqu'à la fin du mot suivant 🎜🎜 🎜^🎜+🎜⌥🎜+🎜→🎜 signifie passer directement à la partie suivante du mot,🎜⇧🎜+🎜^🎜+🎜⌥🎜+🎜→🎜 consiste à sélectionner une partie du mot à droite🎜🎜🎜
🎜🎜Il y a un La commande de sélection qui doit être introduite séparément est
smart select. Nous savons que la touche de raccourci
cmd + D peut sélectionner un mot, mais si vous souhaitez sélectionner une chaîne, cela ne fonctionnera pas. Pour le moment, vous pouvez utiliser la sélection intelligente pour y parvenir. 🎜🎜🎜🎜^🎜+🎜⇧🎜+🎜→🎜 : Élargissez la plage de sélection 🎜🎜🎜^🎜+🎜⇧🎜+🎜←🎜 : Réduisez la plage de sélection 🎜🎜🎜
🎜🎜Récemment, Antfu a écrit une extension qui utilise le double-clic pour sélectionnez intelligemment le texte. Bien que cela n'ait rien à voir avec l'édition multi-curseur, les lecteurs intéressés peuvent en faire l'expérience :
vscode -clics intelligents . 🎜
Supprimer le texte
🎜La touche de raccourci pour déplacer le curseur plus la touche 🎜⌫🎜 est le raccourci pour gauche supprimer le touche de zone de déplacement du curseur, plus fn +🎜⌫🎜 est la touche de raccourci pour droite supprimer la zone de déplacement du curseur 🎜
🎜Sur Mac 🎜⌘🎜+🎜→🎜 signifie
Fin, 🎜⌘🎜+🎜←🎜 représente la touche <code>Accueil, fn +🎜⌫🎜 représente la touche
Supprimer Cette règle doit être commune à toutes les applications. 🎜🎜🎜🎜⌥🎜+🎜⌫🎜 : Supprimer à gauche jusqu'au début du mot 🎜🎜🎜^🎜+🎜⌥🎜+🎜⌫🎜 : Supprimer une partie du mot à gauche 🎜🎜🎜Parce que le retour arrière lui-même est directionnel, donc là il n'est pas nécessaire de faire correspondre les touches de direction avec les touches de raccourci. 🎜
Commandes de traitement de texte
🎜Lors de l'édition multi-curseurs, nous pouvons utiliser les commandes fournies par VSCode ou des extensions tierces pour insérer rapidement du texte spécifique ou convertir le texte sélectionné. dans un texte spécifique. 🎜🎜VSCode a les éléments intégrés suivants, en prenant le mot
letterCase comme exemple, les résultats de la conversion sont : 🎜🎜🎜Transformer en majuscule :
LETTERCASE🎜🎜Transformer en Minuscule :
lettercase🎜🎜Transformer en casse titre :
LetterCase🎜🎜Transformer en casse serpent :
letter_case🎜🎜🎜Rechercher
transformer en Toutes les commandes de conversion de texte peuvent être trouvées🎜
Pour donner un exemple pratique, par exemple, nous devons changer un tas de constantes qui étaient à l'origine en petite casse chameau en majuscules :
En plus des commandes de traitement de texte intégrées de VSCode, vous pouvez utilisez également des plug-ins tiers, recommandés ici : Text Power Tools. Raisons de la recommandation : Maintenance active et fonctions riches.
Il existe de nombreuses fonctions, les lecteurs peuvent consulter la page d'accueil de l'extension pour en savoir plus. Je pense que si vous n’avez pas l’esprit d’exploration et la capacité de lancer, vous ne pourrez probablement pas lire cet article. Je démontrerai ici uniquement la fonction d'insertion de nombres :
Les lecteurs capables peuvent également écrire leurs propres extensions VSCode pour implémenter davantage de commandes de traitement de texte telles que l'insertion, la conversion et même la suppression. Il convient de noter que toutes les sélections doivent être traitées lors de l'implémentation. Par exemple, l'extension VSCode de l'auteur VSCode FE Helper implémente une extension qui convertit les mots sélectionnés en pluriels comme suit. Le code est très simple. Vous pouvez remarquer que toutes les sélections sont parcourues, donc lorsque vous appelez cette commande lors d'une édition multi-curseur, toutes les sélections peuvent être traitées :
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);
}
});
}Copier après la connexion
Exemples pratiques multi-curseurs
Ensuite, je vais démontrer quelques-uns des multi-curseurs curseurs que j’utilise habituellement. Quelques exemples. Pour ceux qui ne sont pas familiers avec l'édition multi-curseurs, cela peut sembler un peu compliqué, mais si vous le pratiquez vous-même et le pratiquez, tout devrait bien se passer. J'utilise souvent l'édition multi-curseur lors du développement, mais ce n'est pas aussi fluide que démontré dans l'article, et les étapes ne sont peut-être pas minimales, mais cela reste beaucoup plus efficace que l'édition répétée. Je fais souvent des erreurs en tapant, mais ce n’est pas grave car je peux quand même le retirer.
Remplacez var
Comme nous le savons tous, lorsque vous apprenez ctrl + c, ctrl + v, vous êtes déjà un programmeur junior. Lorsque vous pouvez non seulement copier du code mais également modifier le code d’autres personnes, alors vous êtes déjà un programmeur mature. L'apprentissage de l'édition multi-curseurs peut considérablement améliorer l'efficacité de la modification du code.
Lorsque nous copions un morceau de code JS à partir de stackoverflow, il peut contenir de nombreuses variables. Nous pouvons utiliser l'édition multi-curseur pour remplacer toutes les variables par let.
Étapes :
Installer le package à plusieurs nœuds
Parfois, lorsque j'ouvre un nouveau projet, je dois installer de nombreux plug-ins eslint. Mon approche initiale consistait à copier les noms des packages un par un à partir du package.json du projet précédent, ce qui était trop compliqué. Certaines personnes disent : pourquoi ne copiez-vous pas simplement le nom du package et le numéro de version dans le fichier package.json du nouveau projet ? La principale raison pour laquelle vous ne le faites pas est que le numéro de version du package du projet précédent n'est pas nécessairement le plus récent. et le nouveau projet doit installer la dernière version.
Étapes :
Ouvrez package.json et définissez le curseur sur le nom du premier package
⌘+Alt+↓Ajoutez plusieurs curseurs à plusieurs noms de package
^ +⇧+→, utilisez smart select pour sélectionner le nom du package et ⌘+C copiez
⌘+N, créez un nouveau fichier temporaire, ⌘+ V Collez-le
et placez le curseur au début de la deuxième ligne, ⌘+Alt+↓Ajoutez plusieurs curseurs à la même colonne ci-dessous
Premier⌫, puis tapez un espace Copiez l'intégralité du texte sur le terminal
Refactorisez le chemin du routeur de réaction en une énumération
Code original :
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>
);
}Copier après la connexion
Refactorisez la route de chaîne d'origine en un type d'énumération :
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',
}Copier après la connexion
Choisissez cet exemple Principalement parce que le traitement de texte les commandes sont utilisées pour gérer les problèmes de majuscules lors de l'opération. Comme il y a trop d'étapes, regardons simplement la démonstration animée :
.
实现 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;Copier après la connexion
这个 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教程！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
