Gagne du temps avec Visual Studio Code

En dehors du titre, le générique masculin est utilisé sans aucune discrimination et uniquement dans le but d'alléger le texte.

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.



visual studio code


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.



speed


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.



visual studio code


  • 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.



speed


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é !



visual studio code


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.



visual studio code


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.



supertoto


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.



GitLens
https://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.

gitlens


Quokka
https://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.

visual studio code

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 Server
https://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.

live server


Code spell checker
https://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.

code spell checker


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 !

Qui me parle ?

jesuisundev
Je suis un dev. En ce moment je suis Backend Développeur / DevOps à Montréal. Le dev est l'une de mes passions et j'écris comme je parle. Je continue à te parler quotidiennement sur mon Twitter. Tu peux m'insulter à cet e-mail ou le faire directement dans les commentaires juste en dessous. Y'a même une newsletter !

15 commentaires sur “Gagne du temps avec Visual Studio Code”

  1. Mouais, tout ce que sait un éditeur / IDE correctement configuré comme vim ou emacs sans bouffer 8go de RAM , faire chauffer la machine et déclencher les ventilos.

    Sauver la planète arrêter d utiliser cette horreur !

    1. C’est dommage de penser ça, non seulement je n’ai pas de problème de surconsommation de ressources avec VSCode, mais surtout l’interface est plus simple et on perd moins de temps à configurer notre outil…

    2. vim ou emacs… Pourquoi pas retourner sur un minitel aussi et faire ses réunions avec MSN? (c’est ce que je dirais pour continuer le troll) 🙂
      En plus VS Code ne consomme rien comparer à Atom, Eclipse, Visual Studio… là oui j’aurais été d’accord pour dire que ça consomme.
      Mais c’est pas parce que tu as appris à coder sur un truc particulier que tu dois cracher sur tout le reste en vantant les mérites de ta solution, chacun ses goûts et ses habitudes ^^

  2. Les devcontainers c’est la vie, je les ai découverts avec VSCode. Mais même étant passé à Vim je ne pouvais plus m’en passer, du coup j’ai bidouillé un truc pour faire des devcontainer et utiliser Vim avec.

  3. La seule chose qui m’embêtait avec VSCode c’est la boite noire de chez MS. Du coup VSCodium fonctionne très bien aussi et reste très propre. Avec Manjaro ça tourne très bien.
    Merci pour ces astuces !!

  4. C’est vrai qu’avec les bon shortcuts et plugins on peut facilement multiplier sa productivité par 2. Pensez bien à mettre toutes ces infos dans la doc d’intall pour les nouveaux 😉

    Pour ma part j’ai délaisser VSCode pour IntelliJ de JetBrains. Les fonctionnalités de refactor sont juste ouf ! Plus possible de revenir en arrière maintenant que je m’y suis habitué. A ce jour je n’ai pas trouvé d’équivalent sur VSCode.

  5. Vraiment les raccourcis je réussirai jamais à les retenir. ça change selon chaque logiciel, ils ont des noms qui ne veulent rien dire (“Manipulation de sélection” par exemple) et de toute façon, mon job c’est pas un concours de “qui va pisser le plus de code”

  6. Waiiiiiit wait wait wait !!
    tu parles de Gitlens SANS parler de Git Graph ?! c’est la sainteté des plugins pour arriver à comprendre aisément git ! faire un cherry-pick n’a jamais été aussi simple !
    Après je comprend que tous language ont leurs plugins dédiés, mais VueVSCode Snippets est l’un des rares plugin à avoir aisément triplé ma vitesse de production de code.. (j’ai pas trouvé un plugin aussi génial sur React..)
    Par contre en vrai, je connaissais pas le Code spell check, c’est trop top ! Merci ! 😀

  7. Pour ma part, j’aime bien les extensions vim (que j’apprends à utiliser pour être plus efficace dans ma manipulation de code), indent-rainbow (qui donne une couleur à chaque niveau d’indentation) et Settings Sync (pour synchroniser mon environnement entre toutes mes machines), bien que ce dernier soit implémenté nativement dans la dernière version Insider, cool !

  8. Comme dit au dessus setting sync à avoir aboslument pour récupérer en un clic toutes ses extensions sur n’importe quelle machine! VS Code regorge de superbes extensions selon les besoins, bracket pair colorizer, indent-rainbow, bookmarks, intellisense, en php les extensions pour setter et getter et auto import des classes… Combiné aux raccourcis claviers on peut gagner un temps énorme.

  9. Moi qui ne suis qu’un codeur du dimanche, j’utilise aussi VS code. Je le trouve génial. Tous les raccourcis clavier que tu indiques je les utilise. J’irai jeter un oeil au lien que tu nous laisses pour les mémoriser. 😉
    Je ne suis pas sur de gros projets vu que je code en amateur et dans mon cas VSCODE ne fait pas mouliner mon pc.
    Merci pour l’article. 🙂

T'en penses quoi ?

Your email address will not be published. Required fields are marked *