Cela vaut la peine de comprendre certaines opérations du curseur vscode pour rendre le développement aussi fluide que de la soie !

Cet article vous amènera à parler des opérations de curseur dans vscode Cet article ne couvrira que les opérations de curseur qui nous sont les plus étroitement liées, alors commençons !

Nous n'avons qu'un seul objectif, crions notre slogan : Rendre le développement aussi fluide que la soie ! La plupart des exemples de l'article sont basés sur la version mac, car je suis un mac, mais il n'y a pas lieu de s'inquiéter de la version win. Si vous souhaitez rompre la formation, gardez cela à l'esprit : la commande est la touche ctrl. .

Conseils vscode - Fonctionnement du curseur

Nous utilisons les touches fléchées tous les jours pour faire fonctionner le curseur. En fait, nous utilisons également inconsciemment bon nombre de ses techniques dans notre mémoire musculaire quotidienne, comme maintenir la touche cmd enfoncée pour accéder à. la première ligne de la ligne. La fin, mais c'est difficile à résumer, la sensation d'être recouvert par une feuille. Laissez-moi vous donner un point décisif : la granularité. Dans notre utilisation quotidienne, les touches fléchées gauche et droite n'ont qu'un seul caractère, c'est-à-dire que la granularité est un caractère. Si nous pensons à la fin d'un mot ou d'une phrase, cette phrase marquera en fait notre objectif : la granularité. ; alors, comment opérer ? Qu'en est-il de la granularité du curseur ? [Apprentissage recommandé : "Tutoriel vscode"]

Direction horizontale

Combiné avec les touches fléchées

Graininess	mac	win
Mots	option	ctrl
line	cmd	utilisez simplement home/end
code block	cmd + shift +	Ctrl + shift +

Dans le sens vertical

Granularité	mac	win
Début/Fin de l'article	Cmd + touches fléchées haut et bas	Ctrl + touche Début/Fin
Déplacer la ligne de code actuelle vers le haut/bas	Option + touches fléchées haut et bas

Remarque : [Déplacer vers le haut/bas la ligne actuelle] n'est pas une opération de curseur mais une opération de bloc de code (car l'opération de curseur peut être effectuée directement avec la flèche touches), mais il est très approprié pour être placé ici, comme ceci Il peut correspondre à la direction horizontale ; horizontalement : line-cmd word-option ; verticalement document-cmd line-option

Autres opérations du curseur

;

sens	mac	win
Annuler le traitement du curseur	Cmd + U	Ctrl + U

Extension : L'opération [Sélectionner] n'a besoin que d'ajouter [shift] ; la granularité de l'opération [Supprimer] est la même que l'opération du curseur, dans la direction opposée, ajoutez simplement fn (comme la suppression du curseur sur la ligne Tout le contenu avant le curseur est [cmd+delete] et le contenu après le curseur est [cmd+fn +delete])fn即可（如删除所在行光标前所有内容为【cmd+delete】而光标后内容则为【cmd+fn+delete】）

光标操作实例

针对单词的光标移动

想把光标直接移动到整个单词，也就是 function 的前面或后面，你只需按下 Option（Windows 上是 Ctrl 键）和左方向键。

光标移动到行首或者行末

按住 Cmd + 左方向键（Windows 上是 Home 键），就可以把光标移动到了这行的第一列

移动到文档的第一行或者最后一行

按下 Cmd 和上下方向键即可（Windows 上是 Ctrl + Home/End 键）

代码块的移动

Cmd + Shift + （Windows 上是 Ctrl + Shift + ），就可以在这对花括号之间跳转。

当前行上/下移

其他光标操作

撤销光标处理

多光标操作

        至此，我们已经了解了单光标的移动，选中（其实就是移动加上shift键），删除（选中加delete

Exemples d'opérations du curseur

Mouvement du curseur pour les mots

Si vous souhaitez déplacer le curseur directement sur le mot entier, c'est , avant ou après la fonction, il vous suffit d'appuyer sur Option (touche Ctrl sous Windows) et sur la touche fléchée gauche.

Déplacez le curseur au début ou à la fin de la ligneAppuyez et maintenez Cmd + flèche gauche (touche Accueil sous Windows), vous pouvez déplacer le curseur vers la première colonne de la ligne

Passer au premier ou au dernier ligne du document Appuyez sur Cmd et sur les touches fléchées haut et bas (touches Ctrl + Accueil/Fin sous Windows)Mouvement du bloc de codeCmd + Shift + (Ctrl + Shift + sous Windows), vous pouvez Sautez entre cette paire d’accolades. Déplacer la ligne actuelle vers le haut/basAutres opérations du curseurAnnuler le traitement du curseur

Opération multi-curseur

Jusqu'à présent, nous avons compris le mouvement d'un seul curseur, sélectionnez (en fait, déplacez plus Shift), supprimer (sélectionner et ajouter delete) et d'autres opérations. Alors, que se passe-t-il si nous devons exploiter plusieurs endroits en même temps ? À l’heure actuelle, nous devons parvenir à une utilisation avancée des opérations avec curseur, des opérations multi-curseurs. A propos de ce sujet, le point clé est en fait de savoir comment créer plusieurs curseurs à l'emplacement souhaité, car après création, l'opération est cohérente avec le curseur unique.

Opération de base - Créez plusieurs curseurs avec la sourisMaintenez enfoncée "Option" sur le clavier (Alt sous Windows), puis cliquez à l'endroit où vous souhaitez créer un nouveau curseur. Mais évidemment, cette méthode est généralement applicable mais peu pratique. Chaque fois que nous créons un curseur, nous devons trouver l'emplacement et cliquer dessus. Selon le principe 82, nous pouvons utiliser des touches de raccourci pour atteindre les 20 % de. opérations courantes, comme suit Présentez principalement trois scénarios courants.

	Opération d'efficacité

🎜Scènes de traitement🎜🎜Touches de raccourci🎜🎜Explication détaillée🎜🎜🎜🎜🎜🎜Même élément🎜🎜Cmd + D🎜 🎜Sélectionnez l'élément et appuyez sur la touche de raccourci, vscode sélectionnera l'élément identique suivant et créez un curseur ; appuyez à nouveau pour créer, et ainsi de suite. 🎜🎜🎜🎜Traitement haut et bas🎜🎜Cmd + Option + Flèche vers le bas🎜🎜Créez un curseur sous le curseur actuel. 🎜🎜🎜🎜Sélectionnez le traitement multi-lignes🎜🎜Option + Maj + i🎜🎜Sélectionnez plusieurs lignes de contenu, puis appuyez sur la touche de raccourci, vscode crée un curseur à la fin de chaque ligne🎜🎜🎜🎜🎜🎜Extensions sur les opérations du curseur 🎜🎜 🎜🎜🎜Autres opérations du curseur🎜🎜🎜🎜🎜🎜🎜 signification🎜🎜mac🎜🎜win🎜🎜🎜🎜🎜🎜Annuler le traitement du curseur🎜🎜Cmd + U🎜🎜Ct rl + U🎜 🎜🎜🎜想 Sélectionnez la suppression de Lenovo [Sélectionner] L'opération n'a besoin que d'ajouter [Maj] ; La taille des particules de l'opération est la même que celle du curseur et la direction opposée est utilisée avec Fn ( Pour Par exemple, tout le contenu avant le curseur dans la ligne supprimée est [cmd+delete] et le contenu après le curseur est [cmd+fn code>+delete])

À ce stade, nous comprenons le concept de conception de base de vscode lui-même pour les opérations de curseur. Touches de raccourci personnalisées

fn即可（如删除所在行光标前所有内容为【cmd+delete】而光标后内容则为【cmd+fn+delete】）

        到此，我们就了解了 vscode 本身对光标操作的基本设计理念啦。

自定义快捷键

        但如果我们用不惯呢？vscode 自然也不会这么死板，它是支持为行为、也就是我们所说的命令自定义快捷键的，这里说之前困惑过我的一点，就是我们说的创建光标、移动等等对应 vscode 而言其实就是一条内嵌的命令，理解了这个，才好进行自定义，我当初没理解所以一直在想的问题是：我该怎么去翻译我要做的事情。

三步走：找到定义keyboard Shorycut的地方，找到对应的操作，为操作绑定快捷键。

Eg：为【选择括号内所有内容】的操作绑定Cmd + Shift + ]快捷键为例

找到定义keyboard Shorycut的地方

找到对应的操作

为操作绑定快捷键

双击-》按下需要绑定的快捷键-》回车确定（按错的话别回车就可以了）

这里多说一句，快捷键其本质就是行为和特定按键【在特定场景下】的绑定，在 vscode 中通过 JSON 进行描述，我们可以通过执行>Open Keyboard Shortcuts(JSON)进行查看，如果我们需要实现一个高级的快捷键，就会需要这些知识了。

属性	含义	备注
Command	命令值
When	在什么情况下这个快捷键绑定能够生效
Key	快捷键

其中的when的定义注意点比较多，所有取值可以查看文档

而对于高级写法，VS Code 还支持几个基础的操作符。这样我们就能够书写相对复杂的条件语句了。

• ! 取反。比如我们希望当光标不在编辑器里时，绑定一个快捷键，那么我们可以使用 !editorFocus，使用 ！进行取反。
• == 等于。when 条件值除了是 boolean 以外，也可以是字符串。比如 resourceExtname 对应的是打开的文件的后缀名，如果我们想给 js 文件绑定一个快捷键，我们可以用 resourceExtname == .js。
• && And 操作符。我们可以将多个条件值组合使用，比如我希望当光标在编辑器里且编辑器里正在编辑的是 js 文件，那么我可以用 editorFocus && resourceExtname == .js。
• =~ 正则表达式。还是使用上面的例子，如果我要检测文件后缀是不是 js，我也可以写成 resourceExtname =~ /js/ Mais que se passe-t-il si nous n'y sommes pas habitués ? Naturellement, vscode n'est pas si rigide. Il prend en charge la personnalisation des touches de raccourci pour les comportements, ce que nous appelons les commandes. Voici un point qui m'a dérouté auparavant, c'est-à-dire que ce que nous appelons créer un curseur, se déplacer, etc. correspond à vscode. En fait, c'est une commande intégrée. Ce n'est qu'après avoir compris cela que vous pouvez la personnaliser. Je ne l'ai pas compris au début, donc la question à laquelle je pensais était : comment dois-je traduire ce que je veux faire.

Trois étapes : trouvez l'endroit où le clavier Shorycut est défini, recherchez l'opération correspondante et associez la touche de raccourci à l'opération.

Par exemple

 : Liez la touche de raccourci Cmd + Shift + ] pour l'opération de [Sélectionner tout le contenu entre parenthèses]. Prenez par exemple

Trouver l'endroit où le clavier Shorycut est défini

Trouver l'opération correspondante🎜🎜 🎜🎜🎜🎜 est la touche de raccourci de liaison d'opération🎜🎜🎜Double-cliquez - "Appuyez sur la touche de raccourci qui doit être liée -" Entrez pour confirmer (si vous appuyez sur la mauvaise touche, n'appuyez simplement pas sur Entrée)🎜🎜Encore un chose à dire ici, l'essence des touches de raccourci est le comportement et la spécificité. La liaison des touches [dans des scénarios spécifiques] est décrite via JSON dans vscode. Nous pouvons la voir en exécutant >Ouvrir les raccourcis clavier (JSON) Si nous devons implémenter une touche de raccourci avancée, cette connaissance sera nécessaire. 🎜🎜<img src="https://img.php.cn/upload/image/869/412/791/166695758251960Cela%20vaut%20la%20peine%20de%20comprendre%20certaines%20op%C3%A9rations%20du%20curseur%20vscode%20pour%20rendre%20le%20d%C3%A9veloppement%20aussi%20fluide%20que%20de%20la%20soie%C2%A0!" title="166695758251960Cela vaut la peine de comprendre certaines opérations du curseur vscode pour rendre le développement aussi fluide que de la soie !" alt="Cela vaut la peine de comprendre certaines opérations du curseur vscode pour rendre le développement aussi fluide que de la soie !">🎜<table> <thead><tr class="firstRow"> <th>Attribut</th> <th>Signification</th> <th>Remarques</th> </tr></thead> <tbody> <tr> <td>Commande</td> <td>Valeur de la commande</td> <td>🎜</td> </tr> <tr> <td>Quand</td> <td>Dans quelles circonstances cette touche de raccourci est-elle La liaison peut prendre effet</td> <td>🎜</td> </tr> <tr> <td>Clé</td> <td>Touche de raccourci</td> <td>🎜</td> tr></tr> </tbody> </table>🎜La définition de <code>quand nécessite plus d'attention. Toutes les valeurs peuvent être consultées Documentation🎜🎜🎜Pour l'écriture avancée, VS Code prend également en charge plusieurs opérateurs de base. De cette façon, nous pouvons écrire des instructions conditionnelles relativement complexes. 🎜

• ! Négation. Par exemple, si nous voulons lier une touche de raccourci lorsque le curseur n'est pas dans l'éditeur, alors nous pouvons utiliser !editorFocus, utilisez ! Nier. 🎜
• == est égal à. En plus d'être booléenne, la valeur de la condition when peut également être une chaîne. Par exemple, resourceExtname correspond au suffixe du fichier ouvert. Si nous voulons lier une touche de raccourci au fichier js, nous pouvons utiliser resourceExtname == .js. 🎜
• && Et opérateur. Nous pouvons combiner plusieurs valeurs conditionnelles. Par exemple, si je veux que le curseur soit dans l'éditeur et que l'éditeur édite un fichier js, je peux utiliser editorFocus && resourceExtname == .js. 🎜
• =~ Expression régulière. Toujours en utilisant l'exemple ci-dessus, si je veux détecter si le suffixe du fichier est js, je peux également l'écrire sous la forme resourceExtname =~ /js/ et le juger à l'aide d'expressions régulières. 🎜🎜🎜🎜Résumé🎜🎜🎜 À ce stade, le partage lié aux opérations du curseur est terminé. Concernant la compréhension du vscode, ce n'est pas une solution miracle, il peut être utilisé sans lui, mais j'ai toujours l'impression que la programmation elle-même est ennuyeuse. Ce genre d'exploration est toujours nécessaire. Les gens heureux naissent avec des falaises et un apprentissage sans fin. Permettez-moi de terminer cette partie de notre partage avec les essais que j'ai écrits après avoir étudié à l'époque : Les gens sont paresseux par nature, pas seulement en surface. mais aussi sur leurs pensées. Être paresseux en pensant, c'est juste que j'ai l'habitude de remplir les fosses lorsque je les rencontre. Il est presque inévitable de s'y lancer.总 Au final, je le résumerai à la fin, dans l'espoir d'aider les monarques : déplacement de la taille granulaire, plusieurs touches de raccourci, la personnalisation doit être liée et le fonctionnement de la touche Maj. 🎜🎜Pour plus de connaissances sur VSCode, veuillez visiter : 🎜Tutoriel de base 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!