Il est temps de mettre les points sur les i. Les pendules à l'heure. Le petit Jésus dans la crèche. L'église au milieu du village.

Vous aussi ça vous ennuie quand vous regardez un tuto ou un Tweet de quelqu'un qui développe et son éditeur ressemble à ça (NB: j'ai créé cette situation moi-même):

Je parle pas du thème hideux, des waifus ou de VS Code Pets mais de cette situation standard où la partie de l'éditeur ouskon-écrit-vraiment-le-code est toute petite.

Les gens ils ont genre deux écrans minimum parce que quand t'es INGENIEUR DE PROGRAMME t'aimes ça les écrans. Oh oui.

Tout ça pour avoir 150 pixels-carrés de boite-à-texte où tu "travailles" vraiment.

Bah oui, on sait tous que quand c'est pas Copilot ou Stackoverflow qui écrit ton truc, tu fais secrètement semblant de prendre des plombes pour de commit un bon vieux +2lignes nommé "UPDATE README". Du coup je comprends que la taille de la zone de texte est moins importante que le nombre d'écrans et le thème de couleurs.

Ben il est temps que ça cesse!

Même sur le site officiel ils montrent un vieux plan avec une énorme barre latérale affichant des trucs inutiles, un bon gros terminal en bas avec juste "ayé j'ai compilé un truc hihi" et une mini zone d'éditeur de texte:

Les gens ils rigolent bien avec la blague de VS Code sur ta montre mais moi c'est comme ça que je les imagine programmer.

Tout ça contribue à rendre VS Code encore plus ridicule auprès des arrogants (à raison) maîtres de la saisie de texte qui sont sur vim, neovim voire emacs pour les plus chelous et barbu.es d'entre-eux.

Alors que c'est pas obligé, vim c'est pas magique non plus. Certes tout est plus efficace en règle général parce qu'entièrement réalisé au clavier avec un paradigme qui va bien et une intégration facile avec la ligne de commande et donc tous les outils de ligne de commande (y compris les interprêteurs de langages de programmation) et l'empreinte mémoire est immensément plus faible que celle de VS Code au point qu'on puisse coder tranquilou sur un Steam Deck.

OK. On peut concéder tout ça en ramenant tout de même cette élite à la réalité: c'est plus simple de bricoler son VS Code que d'installer 10000 plugins vim et passer 45h à les configurer, tout ça pour avoir une autocomplétion moins bonne.

Sans compter que VS Code il te prend par la main pour pas mal de choses, ne demande pas de connaître la ligne de commande pour rechercher dans le texte ou carrément chercher/remplacer dans tout un projet et intègre facilement les gens qui ont l'habitude de la souris qui seraient partis pour 18h d'entraînement intensif avant de pouvoir vaguement copier coller dans vim parce que finalement ils ont aussi dû apprendre tmux et copient en fait avec tmux ce qui veut dire que la prochaine étape est de passer 72h à configurer tmux.

En pratique il faut apprendre à utiliser un terminal avant d'utiliser vim puisqu'il tourne dans un terminal où, je le rappelle, des raccourcis de base comme Ctrl+C et Ctrl+V n'ont pas du tout le comportement attendu pour des raisons historiques (bon, mis à part le Windows Terminal mais c'est un ovni).

Je vois beaucoup d'étapes qui s'empilent avant de s'y mettre. C'est un peu comme la méthode d'apprendre la trompette sans trompette, ou tu dois d'abord maitriser un buzz dans tes mains (lol) puis dans une embouchure seule avant d'avoir droit à l'instrument. Je comprends d'où ça vient mais ce type de pédagogie ça ne marche pas sur 98,7% de la population.

De plus, je sais que certains sentiront une vague de désaccord monter le long de leur gros intestin, mais VS Code est plus joli qu'un terminal même après avoir passé un bail à choisir un chouette jeu de couleur, une chouette police de caractères et un arrière plan transparent avec une waifu.

Et quoi qu'il en soit, on est pas obligé d'utiliser VS Code de la manière la plus inefficace possible.

Comme je suis hyper sympa, je vous livre, ici-même, mon kit de débutant avec un minimum de choses à retenir et configurer pour épater tous vos copains.

Comment passer Padawan de VS Code

Virer l'explorateur et le terminal

Déjà, l'explorateur du projet on va le mettre à droite. Parce qu'à gauche ça va déplacer le code de place quand on l'affiche puis qu'on le cache.

En anglais, dans les préférences, vous pouvez rechercher "Side bar" ou "sidebar", et ça ressemble à ça:

Si vous préférez en JSON, c'est cette clé/valeur:

"workbench.sideBar.location": "right",

Maintenant qu'on a bourré la barre à droite, on la vire, avec Ctrl+B.

Pas de panique, il suffit de refaire un Ctrl+B et il est de retour.

Pour le terminal, c'est le même principe mais avec Ctrl+J.

Je sais qu'on vous a dit de lancer votre npm start ou que sais-je depuis le terminal VS Code, okay, si vous voulez, mais masquez au moins le terminal par après si le texte qui apparaît dedans vous est totalement inutile (ce qui est fort probable). Ce qui tourne dedans continuera de tourner et vous pouvez le ramener avec un autre Ctrl+J.

Pour aller plus loin, je conseillerais même d'utiliser un terminal séparé (le Windows Terminal du Windows Store sous Windows) et Alt+Tab. Ce sera une porte ouverte pour une initiation en douceur à la ligne de commande.

Bon c'est vrai qu'il va falloir se rendre dans le répertoire du projet avec la ligne de commande. Sous Windows vous pouvez utiliser cette astuce si la commande "cd" vous fait peur pour l'instant (elle peut rien faire de mal pourtant):

Ici on ouvre un vieux Powershell mais il suffit de taper "wt" au lieu de "poweshell" pour ouvrir le Windows Terminal.

Pour revenir à notre zone de texte, ne la mettez pas non plus en plein écran sur votre écran 22:10 ultra large incurvé.

Les yeux fatiguent davantage et comprennent moins ce qu'il se passe s'ils doivent scanner 1 mètre de texte horizontal avant de devoir revenir au début du dit mètre pour commencer à lire la ligne suivante.

Essayez de garder votre code sur un max de moins de 100 caractères, c'est une bonne habitude et vos yeux et votre concentration en bénéficieront.

Personnellement je pose souvent mon terminal à côté de l'éditeur, ce qui me permet de tripoter tout le reste du système et alt-tab vers VS Code. Puis idéalement j'ai encore un navigateur sur un autre bureau, en plein écran, sur lequel je peux me rendre avec un autre raccourci (alt+tab fonctionne aussi d'ailleurs).

Ce qui veut dire que j'ai besoin que d'un seul écran. Et ouais. Exemple:

Mais attend, j'avais besoin de l'explorateur

BEN NON, justement! T'en a pas besoin!

Pour créer un nouveau fichier, Ctrl+N ouvre un fichier vide dans un nouvel onglet. Vous pouvez directement taper Ctrl+S pour enregistrer ce fichier à l'emplacement voulu, et voilà.

Pour ouvrir un fichier, c'est le raccourci le plus important de VS Code qui entre en jeu: Ctrl+P.

Bon dans tous les autres programmes ça sert à imprimer mais on peut juste PAS imprimer dans VS Code, du tout. Pour, des raisons. Importantes. Non, Ctrl+P ouvre ici une boite de saisie qui permet de pratiquement tout faire dans l'éditeur. Ce qui est mieux que de pouvoir imprimer. Je pense.

En particulier, commencez à taper un nom de fichier et il vous proposera de l'ouvrir.

Passer d'un fichier à l'autre

C'est simple: Ctrl+Tab pour se déplacer vers la droite dans les onglets et Ctrl+Shift+Tab vers la gauche.

Et ça, c'est chouette parce que c'est le même raccourci dans les navigateurs et je suis sûr que vous l'utilisez déjà. Pas vrai? Hein? Oui? Non. Bon.

D'ailleurs, toujours comme les navigateurs, c'est Ctrl+W pour fermer l'onglet en cours.

Ctrl+P pour tout faire

J'avais dit que je faisais court et c'est censé être une brève. Bon. On se refait pas.

Je laisse les raccourcis d'édition (dupliquer ligne courante, passer tout de suite à la ligne etc.) pour une autre fois.

Tant qu'on y est, Ctrl+P nous donne accès à d'autres trucs cool (il y a un truc vaguement similaire avec Ctrl+K dans Discord et Slack):

• Taper ":" suivi d'un numéro de ligne, puis Enter, se rend à ce numéro de ligne ;
• Taper Ctrl+P à nouveau avec l'invite ouverte sélectionne et ouvre le fichier qui était ouvert précédemment — Permet de facilement basculer entre les deux mêmes fichiers ;
• Commencer à taper ">" permet de lancer toutes sortes de commandes (montre aussi les raccourcis de ces commandes), y compris ouvrir les préférences, séparer la vue en deux, ouvrir le panneau de recherche dans les fichiers du projet, ...

Vous pouvez d'ailleurs fermer la "minimap" (le bidule à droite du code qui permet de naviguer dedans à la souris) et gagner encore plus de place d'éditeur en commençant à taper "> minimap":

Se rendre au début ou à la fin du fichier

Action assez courante. C'est Ctrl+Home et Ctrl+End pour se rendre respectivement au début ou à la fin du fichier.

Pour le début, Ctrl+P et entrer ":1" (on demande de se rendre à la ligne "1") a le même résultat et ressemble à ce que je fais personnellement sur vim (Esc, ":", "1", Enter).

Se rendre à une fonction, symbole, classe, ...

La base, c'est simple, c'est Ctrl+F comme dans la plupart des programmes. Encore un avantage pour VS Code parce que, spoiler, c'est pas du tout Ctrl+F pour rechercher dans vim (et c'est pas sa 100% faute c'est encore une histoire de compatibilité terminal).

Sinon, ce bon vieux Ctrl+P suivi d'un "@" puis d'un début de nom de symbole devrait proposer de sauter immédiatement à ce symbole pourvu que VS Code comprenne ce langage ce qui demande généralement d'installer une extension ajoutant le support du dit langage.

La plupart des langages du web fonctionnent de base.

Pour classer les symboles par type (ex. fonctions, classes, variables, ...) vous pouvez utiliser "@:" au lieu de juste "@".

Dans le même genre en plus avancé et sauvage, il y a "#" au lieu de "@" pour chercher dans tous les fichiers du projet.

Avec tout ça, vous avez les bases et êtes parés pour le carnaval.

Et vous c'est quoi vos astuces simples mais néanmoins importantes pour être efficaces dans VS Code?