Gagne Du Temps Avec Visual Studio Code

Visual studio code est de loin l’IDE le plus utilisé par les développeurs. C’est pas moi qui le dis, c’est les chiffres. Y’a de fortes chances que ça soit ton outil de travail quotidien. Mais est-ce que tu sais à quel point tu peux gagner du temps avec ?

Emmet

Commençons par des choses très basiques qui sont pourtant pas tant utilisées que ça. Commençons par ton nouveau meilleur ami : Emmet. Il est intégré de base avec Visual Studio Code et tout le monde l’ignore.

Emmet est un petit outil avec lequel tu peux écrire plus de code plus rapidement. Il te permet d’abréger des pavés code en seulement quelques lettres. Ne pas utiliser Emmet quand tu fais de l’HTML ou du CSS c’est passible de prison ferme. C’est vraiment un incontournable.

Ce qui est intéressant avec Emmet c’est qu’il va vraiment essayer de deviner ce que t’essayes de faire. Par exemple si tu tapes « p10 » dans une propriété CSS, il va tout de suite comprendre que tu veux un padding de 10px. Check ce gif pompé sur la doc officielle.

Quand je vois des gens ne pas utiliser Emmet sur Visual Studio Code et tout écrire, j’ai envie de taper très fort et de façon répétée sur leur clavier. Mais je me soigne.

En attendant je t’invite fortement à aller voir tout ce que Emmet te propose avec cette formidable cheatsheet. Y’en a pour tout le monde et c’est sur ça te fera gagner du temps. Ce qui te fera gagner encore plus de temps c’est les raccourcis.

Les raccourcis cool

Je connais pas tous les raccourcis de Visual Studio Code. Je veux dire regarde la cheatsheet des raccourcis, y’en as trois milliards. Si je te fais tous les raccourcis, tu vas t’endormir.

Je vais te parler de ceux que j’utilise tout le temps et qui me font gagner du temps. Ce que je te conseille c’est d’apprendre les raccourcis qui te permettent de manipuler des lignes de codes rapidement et/ou de changer plusieurs lignes de code en même temps. L’objectif c’est de toucher le moins possible à ta souris. Les deux mains sur le volant et on accélère.

Si tu as la flemme d’apprendre des raccourcis, je comprends, c’est un peu relou. Mais fais au moins l’effort pour les quatre suivants. Je plaisante pas, ça va vraiment te faire gagner un temps fou. Un rapide exemple de comment ça va te faire gagner du temps de façon permanente avec un GIF fait par moi-même.

• Manipulation de sélection

Ça te permet simplement de prendre des bouts de codes et de les bouger rapidement en gardant ton indentation : après sélection => Alt + Up ou Alt + Down

• Duplication de sélection

Même chose que précédemment, mais cette fois la section va carrément être dupliquée : après sélection => Shift + Alt + Up ou Shift + Alt + Down

• Suppression de ligne

On se retrouve fréquemment à devoir supprimer des lignes, la façon la plus rapide le faire est via ce shortcut : sans sélection => Ctrl + X

• Modification par occurrence

Tu dois souvent changer les mêmes occurrences de blocs, tu peux faire un gros recherché/remplacé ou simplement utiliser ce raccourci : après sélection d’une occurrence : Ctrl +D

C’est vraiment les raccourcis magiques que j’utilise tout le temps et qui m’ont fait économiser à peu près 10 ans de temps de dev. Encore une fois, y’en a beaucoup d’autres. Fais ton propre marché et fais l’effort d’apprendre ceux qui te plaisent. Crois moi le temps investi dans cette corvée va énormément payer dans le futur.

Tu peux même les apprendre de façon interactive ! Avec ce site tu as un système hyper simple d’essai/erreur pour apprendre tous les shortcuts rapidement. Ça prend peu de temps et ça rentre vite !

Utiliser les outils intégrés

Sans configuration et aucun plugin, Visual Studio Code vient avec trois grands outils. Ils sont tous les trois complètement incontournables.

D’abord on a l’intelissense. Alors celui là, franchement, tout le monde l’utilise un minima. Mais ça vaut le coup de le rappeler pour les trois au fond qui ont toujours pas compris le temps qu’ils vont gagner avec. Tu devrais jamais courir de fichier en fichier pour savoir ce que tu peux faire avec objet ou une méthode.

Concrètement l’intelissense va te permettre la complétion de code de façon intelligente. Il va te trouver toutes les méthodes disponibles pour ton objet courant et même te donner des infos sur la méthode en cours. Pareil, prison ferme si tu l’utilises pas. Allez hop encore un GIF pompé !

Ensuite il y a le terminal intégré de Visual Studio Code qui est super pratique. Il te suffit d’utiliser le raccourcie Ctlr + « ` et Visual Studio Code va te faire poper un terminale de commande. Ça spawn le premier système de terminal de commande qu’il trouve dans ton OS. À noter que tu peux le configurer ça aussi.

Personnellement, ça me sert à rapidement tester des scripts ou un bout de code sans avoir à faire des aller-retour avec Terminator. Parfois je spawn un petit serveur web pour itérer rapidement sur des affaires aussi. C’est vraiment très pratique. Check un GIF fait par moi-même avec amour des superhéros.

Enfin on trouve un debugger dans Visual Studio Code. C’est incroyablement pratique et ça me sauve fréquemment la vie en plus de beaucoup de temps.

Alors, gros disclaimer, je suis le premier à voir la grosse flemme en général. Je mets des gros console.log partout comme un gros sale. Et soyons honnête, souvent ça suffit. Mais quand ça suffit pas, au lieu de rager, j’utilise le debugger intégré de Visual Studio Code. C’est hyper simple à mettre en place.

D’abord tu mets des points d’arrêt là où tu veux que le programme fasse une pause. Ensuite tu appuies tout simplement sur F5. Ça va te créer un fichier launch.json en background qui va être ta configuration pour le debug. T’as rien à faire, à partir de là ton programme va runner et s’arrêter aux points d’arrêt mis précédemment.

Enfin t’as plus qu’à passer ta souris sur les variables pour les inspecter et appuyer sur F11 pour aller au point d’arrêt suivant. Aller encore un gif fait par moi-même pour te montrer comment ça marche.

Si tu veux debugger une appli entière avec un serveur web, tu dois un peu toucher au fichier launch.json qui te sert de configuration. Rien d’insurmontable pour un hackerman comme toi c’est sûr. Par contre si tu veux faire du debugging pour la NASA, là ça peut vite devenir extrême. Heureusement, y’a toujours un fou qui l’a fait avant pour toi.

Extensions

Jusqu’ici on a parlé de choses complètement natives à Visual Studio Code. Si on commence à partir sur les plugins, là on fait les fifous.

GitLenshttps://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Si tu bosses avec Git, comme la plupart des développeurs, tu devrais installer cette extension. Cette extension scanne tout ton code en cours et t’affiche toutes les informations liées au versioning. Qui a comité, quand, que nom de commit, quelle branche etc etc. C’est devenu tellement indispensable pour moi que j’avais oublié que c’était un plugin. Check ce magnifique GIF fait par mes soins.

Quokkahttps://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Quokka va constamment runner ton programme et te montrer en temps réel le résultat de ton code. Je l’utilise constamment pour vérifier que mon truc fait du sens pendant que je code. Live exemple avec GIF pompé sur la page officielle.

Quokka a malheureusement un gros point noir, la version gratuite ne permet pas de bosser sur des fichiers enregistrés. Donc tu peux l’utiliser seulement sur un nouveau fichier en cours d’enregistrement.

Live Serverhttps://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Live server permet de lancer un mini serveur qui va faire hot reload à chacun de tes changements sur ta page HTML. Pratique pour prototyper ta page et voir les changements en temps réel. Magnifique GIF de la documentation officielle.

Code spell checkerhttps://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Tes langages de programmation sont tous en anglais. Du coup ton code, tous tes noms de variables, de fonctions et de fichiers le sont aussi. Code spell checker va checker chacun de ces mots et vérifier s’ils sont bien orthographiés. Installe-le, tu seras sûrement choqué par le nombre de fautes d’anglais que tu fais dans ton code ! On finit par un GIF de la documentation également.

Voilà, c’est tout pour les plugins dont je ne peux plus me passer en codant. Évidement je te passe les plugins qui sont dédiés à un langage ou ton formateur de code. Par exemple moi j’utilise Javascript snippets et StandardJS.

Tu auras un plugin dédié à ton langage et ta politique de code. Trouve-les et installe-les, c’est important.

Épilogue

Avec tout ça, tu vas mettre un grand coup d’accélérateur en utilisant Visual Studio Code. J’ai pas parlé de tout c’est sûr. Si tu as d’autres astuces, plugins ou autres, je compte sur toi pour les mettre en commentaires. Ça serait magnifique que la section commentaire de cet article devienne une mine d’or !