Saviez-vous que 73 % des développeurs dans le monde s'appuient sur le même éditeur de code ? Oui, les résultats de l'enquête auprès des développeurs Stack Overflow 2023 sont disponibles, et encore une fois, Visual Studio Code est de loin l'environnement de développement le plus utilisé.
Nous savons tous pourquoi : c'est génial.
Mais exploitons-nous pleinement son potentiel ? Dans cet article, nous révélons quelques fonctionnalités convaincantes de VS Code, notamment un contrôle de source local amélioré, une saisie animée et une suppression de ligne rapide, entre autres. Commençons à les utiliser pour atteindre notre objectif de coder plus rapidement que jamais.
1. Vue chronologique : contrôle de source local
La vue chronologique nous donne un contrôle de source local.
Beaucoup d'entre nous connaissent l'utilité de Git et d'autres outils de contrôle de code source, qui nous aident à suivre facilement les modifications apportées aux fichiers et à revenir à un point précédent si nécessaire.
Ainsi, la vue chronologique dans VS Code fournit une chronologie automatiquement mise à jour affichant les événements importants liés au fichier, tels que les validations Git, les sauvegardes de fichiers et les exécutions de tests.
Développez cette vue pour voir une liste d'instantanés d'événements liés au fichier actuel. Cela inclut l'enregistrement des fichiers ainsi que les validations Git où les fichiers sont stockés.
Passez la souris sur un élément d’instantané pour voir la date et l’heure que Visual Studio Code a créé l’instantané.
Sélectionnez un élément d'instantané pour afficher une vue différentielle montrant les modifications entre le fichier au moment de l'instantané et le fichier actuel.
2. Sauvegarde automatique : plus besoin d'appuyer sur Ctrl + S
Pouvez-vous compter le nombre de fois que vous avez utilisé ce raccourci ? Vous l’utilisez probablement inconsciemment maintenant. La fonction de sauvegarde automatique enregistre automatiquement les fichiers au fur et à mesure que nous les modifions, éliminant ainsi le besoin de les enregistrer manuellement. Grâce à la fonction de sauvegarde automatique, nous pouvons éviter la fatigue de Ctrl + S, gagner du temps et garantir que les dernières modifications apportées au fichier sont toujours disponibles. Même si tout n’est pas parfait, la décision de peser le pour et le contre vous appartient.
Cette fonctionnalité est facilement activée en utilisant Fichier > Enregistrement automatique.
3. Faites ce que vous voulez avec la palette de commandes
Presque tout ce que vous faites dans VS Code autre que la saisie est une "commande".
Les commandes nous permettent de faire avancer les choses dans l'éditeur, elles incluent des commandes liées aux fichiers, des commandes de navigation, des commandes d'édition et des commandes de terminal, chacune conçue de manière optimale pour améliorer un aspect différent de votre expérience d'édition.
Ainsi, avec la palette de commandes, nous recherchons simplement la commande et choisissons d’effectuer l’action appropriée. Pour ouvrir la palette de commandes, utilisez les raccourcis clavier suivants :
Windows/Linux : Ctrl + Maj + P
Mac : Maj + Commande + P
Les raccourcis clavier sur la droite sont, comme vous l'aurez deviné, le moyen le plus rapide d'exécuter des commandes à l'aide du clavier.
Le principal avantage de la palette de commandes par rapport aux raccourcis est lorsqu'il existe des commandes qui n'ont pas de raccourcis ou que vous recherchez une commande dont vous n'êtes pas sûr de l'existence.
4. Accédez rapidement au fichier
Cette souris est trop lente.
Oui, vous pouvez cliquer sur les fichiers dans le volet de l'explorateur, mais pour une sélection plus rapide, utilisez Ctrl + P pour rechercher et ouvrir un fichier spécifique dans votre projet.
Maintenez la touche Ctrl enfoncée et appuyez sur Tab pour parcourir la liste des fichiers actuellement ouverts dans l'instance de l'éditeur.
Vous pouvez même utiliser Alt + Gauche et Alt + Droite pour parcourir rapidement ces fichiers ouverts.
Toutes ces méthodes permettent un accès aux fichiers plus rapide que l'utilisation du curseur.
5. Accédez rapidement à la ligne spécifiée
Sautez, ne roulez pas.
Naviguer rapidement vers une ligne est inestimable lors du débogage, en particulier lorsque vous devez rencontrer une erreur sur un numéro de ligne spécifique. En accédant à ces lignes, vous pouvez inspecter le code dans un contexte spécifique, évaluer des variables et résoudre des problèmes.
Utilisez le raccourci clavier Ctrl + G pour ce faire.
6. Supprimez rapidement la ligne
Vous avez maintenant atteint cette ligne, que faire si vous souhaitez la supprimer ?
Faites-vous glisser et sélectionner du texte et appuyer sur la touche Suppr ? Souhaitez-vous appuyer sans relâche sur la touche Retour arrière jusqu'à ce que chaque caractère disparaisse ?
Ou utiliseriez-vous le raccourci Ctrl + Shift + K pour supprimer rapidement ces lignes et des dizaines d’autres en quelques secondes ?
7. Profitez de la saisie avec un curseur fluide
VS Code possède une fonction de curseur fluide qui anime le curseur lorsqu'il se déplace, tout comme dans MS Word. Cela rend la frappe plus fluide et plus raffinée, tout en nous donnant une sensation plus fluide et plus naturelle lors de la navigation dans les lignes de code et du placement du curseur dans différentes positions.
Pour l'activer, ouvrez l'interface utilisateur des paramètres dans la palette de commandes et recherchez « smoot caret ».
Nous recherchons le paramètre Editeur : Curseur Smooth Caret Animation, qui propose 3 options possibles :
off : pas d'animation fluide du curseur
explicite : ce n'est que lorsque nous plaçons explicitement le curseur quelque part dans le code qu'il sera animé.
on : L'animation fluide du curseur est toujours activée, y compris lors de la saisie.
Activez-le pour une expérience visuelle complète.
8. Code de formatage rapide
Le formatage consiste à améliorer la lisibilité du code en l'organisant de manière structurée et cohérente.
Si vous l'avez fait manuellement, vous devez savoir qu'il existe une meilleure méthode.
Oui, vous devez démarrer automatiquement le formatage de votre code à l'aide de la commande Formater le document, facilement accessible dans la palette de commandes. En fonction de la langue du fichier actuel, un formateur "par défaut" spécifique sera utilisé pour formater le code en utilisant diverses règles d'indentation, de longueur de ligne, d'accolades, etc.
Bien qu'il existe un très bon outil de formatage JS/TS intégré, pour une solution plus robuste, je recommande fortement l'extension Prettier.
Une fois installé, vous le définirez comme formateur par défaut.
Lorsque vous utilisez la sauvegarde manuelle au lieu de la sauvegarde automatique, vous devez activer une fonctionnalité pour faciliter le formatage :
Editeur : Format à l'enregistrement : "Formatez le fichier lors de l'enregistrement. Un outil de formatage doit être disponible, le fichier ne peut pas être enregistré après un délai et l'éditeur doit être fermé. Désactivé par défaut."
Ainsi, lorsque vous enregistrez le fichier, VS Code formatera automatiquement votre code en utilisant le formateur par défaut actuel, comme vous pouvez le voir dans la démo ci-dessus.
Lorsque vous effectuez une sauvegarde automatique, il devient fastidieux de devoir ouvrir la palette de commandes de temps en temps pour effectuer le formatage. C'est ici qu'interviennent les raccourcis clavier :
Windows : Maj + Alt + F
Mac : Maj + Option + F
Linux : Ctrl + Maj + I
Je suis sous Windows et personnellement, je n'aime pas ce raccourci clavier par défaut ; la sauvegarde automatique me oblige à reformater de temps en temps, et Shift + Alt + F devient pénible avec le temps.
Je l'ai donc changé en Ctrl + D, Ctrl + D - une combinaison de raccourcis clavier plus facile à appuyer et à mémoriser, et qui n'a pas de combinaisons de touches conflictuelles. Je vous conseille de faire de même.
9. Gagnez du temps avec l'édition multi-curseur
À mes débuts avec VS Code, l'édition multi-curseurs était un moment incroyable, vous permettant de placer plusieurs curseurs dans différentes positions et de supprimer ou d'insérer le même texte plusieurs fois. Cela accélère considérablement l'édition et augmente considérablement la productivité, car nous pouvons effectuer efficacement des tâches répétitives en créant rapidement du code.
Bien entendu, lors de l’édition, il y a toujours au moins un curseur. Utilisez Alt + Clic pour en ajouter davantage.
Vous pouvez également facilement ajouter un curseur directement au-dessus ou en dessous de la ligne actuelle, en utilisant Ctrl + Alt + Down ou Ctrl + Alt + Up .
Ces raccourcis appellent respectivement les commandes Ajouter un curseur en dessous et Ajouter un curseur au-dessus.
10. Créez rapidement de nouveaux dossiers/fichiers
Il n'existe pas un seul projet qui ne nécessite pas la création de nouveaux dossiers et fichiers, et s'il existait un moyen d'accélérer la création de fichiers/dossiers, les gains de temps s'additionneraient et nous fourniraient un gain de productivité significatif.
Si vous avez utilisé les boutons Nouveau fichier et Nouveau dossier de VS Code pour créer de nouveaux fichiers et dossiers, il existe un moyen.
Vous n’avez pas besoin de continuer à déplacer votre souris pour localiser ces petits boutons, vous savez ? Vous pouvez créer un nouveau fichier en double-cliquant simplement sur le panneau de l'explorateur.
Voulez-vous créer un nouveau dossier ? Eh bien, un dossier sans fichiers n'est rien. Lorsque vous créez un nouveau fichier, vous pouvez facilement utiliser le caractère / pour indiquer une hiérarchie et créer de nouveaux dossiers et sous-dossiers pour contenir le fichier.
En tant qu'ancien fan d'Atom, je me suis rapidement habitué à utiliser les raccourcis A et Shift + A pour créer respectivement de nouveaux fichiers et dossiers ; je savais ce que j'allais faire.
Étant donné que A et Shift+A sont évidemment des clés pour l'encodage, j'ai inclus la valeur when ici pour m'assurer qu'ils ne créent de nouveaux fichiers/dossiers que lorsque le volet de l'explorateur a le focus et qu'il n'y a pas de curseur actif dans l'éditeur actuel.
Ainsi, pour utiliser ces raccourcis lors de la saisie, vous devez d'abord vous concentrer sur le volet Explorateur ; cliquez dessus ou utilisez Ctrl/Command + Shift + E .
Résumer
Dans le volet Explorateur, le contrôle de source local pour la vue chronologique est activé par défaut.
Enregistrez automatiquement les fichiers avec Fichier > Enregistrement automatique.
Utilisez Ctrl + Shift + P ou Shift + Command + P pour exécuter des commandes dans la palette de commandes.
Ouvrez un fichier avec Ctrl + P, utilisez Alt + Gauche/Droite ou Ctrl + Tab pour basculer entre les fichiers ouverts.
Accédez à une ligne avec Ctrl + G .
Supprimer une ligne avec Ctrl + Shift + K
Expérience de frappe fluide avec Editor : paramètre d'animation Cursor Smooth Caret.
Utilisez la commande "Formater le document" pour formater le code, utilisez Prettier, changez les touches de raccourci en Ctrl + D, Ctrl + D
Utilisez Alt + Clic, Ctrl + Alt + Haut/Bas pour ajouter plusieurs curseurs en même temps, un au-dessus et un en dessous
Sous Windows/Mac, utilisez Alt/Option + Haut/Bas pour déplacer une ligne vers le haut ou vers le bas
Créez un nouveau fichier en double-cliquant sur le volet de l'explorateur ou définissez un raccourci clavier personnalisé.
Finition
En raison de l'espace limité de l'article, le contenu d'aujourd'hui sera partagé ici. A la fin de l'article, je tiens à vous rappeler que la création de l'article n'est pas facile. Si vous aimez mon partage, n'oubliez pas pour l'aimer et le transmettre, afin que davantage de personnes dans le besoin voient. En même temps, si vous souhaitez acquérir plus de connaissances sur la technologie front-end, n'hésitez pas à me suivre, votre soutien sera la plus grande motivation à partager pour moi. Je continuerai à produire plus de contenu, alors restez à l'écoute.