Les raccourcis à connaître avec VS Code

J'ai mis du temps à migrer de Sublime Text à VS Code pour deux raisons.

La première c'est que j'admire la rapidité et l'optimisation de Sublime Text. Tout est immédiat, snappy comme disent les anglophones. VS Code me semblait bien plus lourdingue en comparaison.

La seconde c'est que je m'étais petit à petit habitué à ses nombreux raccourcis, me permettant de me passer presque intégralement de la souris.

Changer d'éditeur de code, c'est pratiquement repartir de zéro. Faire fi des habitudes acquises au fil des années et accepter d'être plus lent les premiers temps. Un peu comme si, expérimenté en ski, vous vous décidiez de passer au snowboard. La sensation de glisse sera similaire, mais beaucoup de vos reflexes devront être réappris.

Mais comme en sport de glisse, avec un peu de persévérance on finit toujours par retrouver son niveau, voir à le dépasser.

Je vous propose donc de lister ici quelques-uns des raccourcis que j'utilise tous les jours et qui me permettent d'effectuer certaines actions récurrentes bien plus rapidement qu'à la souris.

Naviguer dans VS Code

Les raccourcis de cette catégorie visent à être plus agile dans la navigation au sein d'un projet. Changer de fichier rapidement, gérer les panneaux à gauche ou en bas, diviser l'éditeur de code, etc.

La palette de commandes

• CTRL+SHIFT+P

S'il n'y en a qu'un à retenir, c'est probablement celui-ci. Il permet de faire apparaître la palette de commandes qui, elle-même donne accès à la totalité des commandes de VS Code.

Il suffit de décrire le réglage que vous voulez modifier ou l'action que vous souhaitez effectuer, et il y a de bonnes chance que vous arriviez à vos fins.

Si j'insiste à ce point, c'est qu'avec ce seul raccourci clavier, vous pouvez pratiquement tout faire sans toucher à la souris. C'est très souvent plus rapide d'effectuer une action par ce biais plutôt que d'aller cliquer dans les nombreux menus.

L'autre raison c'est que les résultats s'affichent avec leur raccourci clavier correspondant. C'est donc un excellent moyen d'apprendre les raccourcis des actions que vous utilisez le plus.

Ouvrir un fichier en tapant son nom

• CTRL+P

Probablement l'action la plus fréquente : ouvrir un fichier appartenant au projet courant.

J'ai mis beaucoup de temps à changer ce réflexe d'aller farfouiller dans le menu des fichiers à la souris par celui de simplement écrire le nom du fichier que je cherche. Mentalement c'est différent parce que dans le cas de la recherche à la souris, on mémorise souvent l'emplacement du fichier dans l'arborescence, plus que son nom. C'est donc une recherche visuelle. Alors que dans le cas de la recherche par nom de fichier, il faut donc être capable de conserver en tête le nom approximatif de chaque fichier et ce qu'il contient.

Ça prend un peu de temps mais une fois habitué, ça permet de virevolter dans un projet avec une réelle aisance, quelle que soit sa taille.

Ouvrir un projet récent

• CTRL+R

Si vous travaillez sur de nombreux projets en parallèle, être capable de passer de l'un à l'autre instantanément est un vrai plus.

Il m'arrive par exemple très souvent d'avoir besoin de faire quelque chose que j'ai déjà fait dans un autre projet. Un coup de CTRL+SHIFT+N pour ouvrir une nouvelle fenêtre puis CTRL+R pour ouvrir le projet en question. Super efficace.

Ouvrir un nouveau répertoire

• CTRL+K, CTRL+O

L'équivalent du raccourci ci-dessus dans le cas où vous voulez ouvrir un projet pour la première fois, et qui n'apparaîtra donc pas dans le menu CTRL+R.

Déplacer le fichier dans un panneau adjacent

• CTRL+ALT+⬅️ ou ➡️

Ce raccourci déplace l'éditeur courant dans le panneau de gauche ou de droite, en le créant au préalable si nécessaire.

Très pratique lorsqu'il faut ponctuellement avoir 2 fichiers sous les yeux.

Naviguer dans les onglets

• CTRL+TAB et CTRL+SHIFT+TAB

L'équivalent du fameux ALT TAB pour passer d'une application à l'autre, mais ici elle vous permet de vous balader dans vos onglets ouverts. Très utile lorsque vous travaillez principalement sur 2 fichiers mais que vous ne voulez pas partager l'éditeur en deux.

Ouvrir/fermer le panneau de gauche

• CTRL+B

Pratique pour maximiser temporairement l'espace alloué à l'éditeur de code, ou pour diminuer la distraction.

Ouvrir/fermer le panneau du terminal

• CTRL+J

Similaire au précédent raccourci mais pour le panneau du bas. Très pratique pour faire apparaître le terminal en cas de besoin uniquement. À noter que cacher le panneau du bas ne détruit pas l'instance du terminal, au contraire de l'utilisation de la petite croix en haut à droite de celui-ci.

Aller au numéro de ligne

• CTRL+G

Permet de se déplacer à une ligne précise en tapant son numéro. Ce n'est pas celui que j'utilise le plus, mais lors d'une séance de debugging, les messages d'erreurs indiquent souvent le numéro de la ligne qui a généré l'erreur et ce raccourci permet de s'y rendre facilement.

Au sein d'un fichier

Dans cette section, on s'intéresse aux raccourcis qui fluidifient l'édition de code à proprement parler. Se déplacer rapidement dans un fichier, tirer parti du multi-curseur, modifier l'ordre des lignes, etc.

Créer un curseur supplémentaire

• ALT+ clic gauche

L'édition multi-curseur n'est pas toujours naturelle, mais une fois maîtrisée elle permet d'effectuer certaines actions rébarbatives très simplement.

Multi-sélection d'un bout de code

• Selection + CTRL+D

Sélectionnez un mot clé, par exemple le nom d'une variable, et à chaque utilisation de ce raccourci, un nouveau curseur sélectionnera la prochaine occurrence de ce même mot clé. Parfait comme alternative au plus classique search and replace. Extrêmement utile pour "faire apparaître" plusieurs curseurs à des endroits stratégiques et effectuer des changements en masse.

Déplacer la ligne courante au-dessus ou en-dessous

• ALT+⬆️ ou ⬇️

Très utile pour réorganiser facilement plusieurs blocs de code. Ce raccourci fonctionne également avec une sélection de plusieurs lignes.

Dupliquer la ligne au-dessus ou en-dessous

• SHIFT+ALT+⬆️ ou ⬇️

Pratique pour rapidement générer plusieurs lignes très similaires et ensuite ne modifier qu'une partie du résultat. Par exemple lors de la création d'un tableau HTML :

<!-- Etape 1 -->
<table>
  <thead>
    <tr class="row"></tr>
  </thead>
</table>

<!-- Etape 2 avec SHIFT+ALT+⬇️ -->
<table>
  <thead>
    <tr class="row"></tr>
    <tr class="row"></tr>
    <tr class="row"></tr>
    <tr class="row"></tr>
    <tr class="row"></tr>
  </thead>
</table>

<!-- Etape 3, ajout du contenu -->
<table>
  <thead>
    <tr class="row">ID</tr>
    <tr class="row">Libellé</tr>
    <tr class="row">Montant</tr>
    <tr class="row">Devise</tr>
    <tr class="row">Catégorie</tr>
  </thead>
</table>

Ajouter un nouveau curseur au-dessus ou en-dessous

• CTRL+ALT+⬆️ ou ⬇️

À utiliser lors de la modification d'un fichier avec plusieurs lignes similaires, par exemple un CSV.

Revenir à la sélection précédente

• CTRL+U

Certaines multi-sélections prennent un peu de temps à "construire", et il n'y a rien de plus frustrant que de "perdre" cette sélection parce qu'on a cliqué une fois de trop sans maintenir la touche ALT appuyée. C'est là que ce raccourci est utile. C'est un peu le CTRL+Z de la sélection.

Il peut également servir lorsque vous travaillez sur un gros fichier dans lequel vous devez scroller fréquemment, pour revenir à l'endroit où se trouvait votre curseur juste avant.

Supprimer la ligne

• CTRL+X

En réalité, ce raccourci coupe le contenu de la ligne, prêt à être collé ailleurs. Mais rien ne vous oblige à coller.