VSCode Tips

Retour

Introduction

Cela fait plusieurs années maintenant que j'utilise VSC au quotidien et malgré qu'il ne soit pas aussi complet qu'un IDE dédié (Phpstorm pour ne citer que lui), il a plusieurs cordes à son arc et possède une belle communauté qui permet de pousser assez loin ses possibilités pour avoir un éditeur de code plaisant à utiliser. Je vais alors ici te montrer quelques-uns de mes trucs et astuces. Let's go 🚀

Pimp my editor

Je vais t'éviter trop de blabla pour pas grand-chose :

  • Le thème que j'utilise c'est One Dark Pro avec sa variante One Dark Pro Mix. En combo avec la font Operator Mono c'est parfait.
  • Le thème d'icône c'est Material Icon Theme
  • Et j'ai aussi un dernier thème pour les icônes de la barre latéral : Carbon Product Icons

Un peu de configuration maintenant :

"window.title": "",

Par défaut window.title affiche le nom du dossier dans lequel tu te trouves. En settant ce paramètre avec une string vide, tu auras juste "Rechercher" à la place.

"window.commandCenter": true,

La palette n'apparait que lorsque tu fais CTRL+P (ou que tu passes par les menus si tu ne le connais pas 😋) et il n'y a rien du tout en haut et au centre de ton éditeur. Là tu l'auras toujours d'afficher.

"window.menuBarVisibility": "compact",

Pour avoir un rendu très minimaliste, j'utilise compact pour ne plus afficher le menu en haut à gauche. D'autant plus que je ne vais que très peu dans ces menus avec la souris, alors raison de plus pour ne plus l'avoir.

"editor.minimap.enabled": false,

Toujours dans l'optique d'avoir une interface épurée, je retire la minimap. Si j'en ai besoin j'utilise un raccourci clavier pour la faire apparaitre ou disparaitre. Attention il n'existe pas par défaut. Pour le retenir facilement j'ai mis ALT+S M avec S pour show et M pour map.

Un petit dernier pour la route :

"editor.rulers": [
        120
 ],

Fait apparaitre une barre verticale. Ça te permet d'éviter de dépasser les 120 (ici) caractères sur une même ligne. Comme c'est un tableau tu peux en ajouter d'autres, comme 80 par exemple. En fonction du thème que tu auras, elle ne sera peut-être pas super visible. Pour changer la couleur, voici comment faire :

  "workbench.colorCustomizations": {
   "editorRuler.foreground": "#61616142",
 },

Les indispensables en PHP

Je code du PHP au quotidien et c'est presque obligatoire de posséder ces extensions :

Les deux suivantes sont facultatives mais peuvent être utile :

Et pour Symfony, il peut-être judicieux d'avoir Twig Language 2 rien que pour la coloration syntaxique mais aussi les snippets disponibles (for, if, block, ...). On en parlera dans un prochain article, tu verras ça va changer ta vie !

Ne pas zaper de configurer les extensions correctement en suivant ce qui est indiqué sur les pages de présentation des dites extensions.

Productivité

Pour naviguer d'un projet à l'autre, j'utilise l'extension Project Manager qui ajoute une icône dans la barre latérale et permet de naviguer dans tous les projets que tu auras préalablement enregistrés.

Je n'ai pas spécialement d'autres extensions, sauf dans des cas particuliers comme Tailwind, WSL, SSH mais je les désactives si le projet ne nécessite pas ces extensions. Trop d'extensions risque de ralentir VS Code, il suffit que tu regardes le gestionnaire de tâches pour te rendre compte que plus tu vas en ajouter, plus tu vas cramer de la RAM.

Un point crucial pour augmenter sa productivité, ou plutôt rendre la navigation plus rapide, c'est de connaître les raccourcis. Bien souvent il s'agit de la mémoire musculaire, demande moi un raccourci. Impossible que je réponde rapidement à moins que je m'imagine en train de le faire. Parfois je me le note sur un papier et naturellement je vais savoir le faire.

  • CTRL + d, lorsque je suis sur un mot, ça sélectionne l'occurrence suivante et encore la suivante si je le fais à nouveau. Pratique pour modifier un nom rapidement.
  • MAJ + ALT + ⬇️, pour dupliquer la ligne en dessous. Ça fonctionne aussi au-dessus avec ⬆️
  • ALT + CLIQUE GAUCHE, si tu veux mettre ton curseur à plusieurs endroits
  • ALT + S M, déjà vu plus tôt, permet de toggle la minimap
  • CTRL + b, affiche ou cache la barre latérale principale (explorateur, recherche, git, extension, debug, WSL et Project Manager)
  • CTRL + ALT + b, affiche ou cache la barre latérale secondaire (éditeurs ouverts, script npm)
  • ALT + D C, permet de passer en mode "concentration". L'éditeur ouvert est centré (et tu peux jouer sur sa largeur avec la souris). Un mode que j'affectionne beaucoup.
  • CTRL + p, tu tapes le nom d'un fichier pour y accéder
  • CTRL + SHIFT + p, ouvre la palette de commande
  • ALT + TAB, pour passer d'un éditeur à un autre sans utiliser la souris
  • CTRL + u, affiche ou cache le terminal
  • ALT + ⬇️ / ALT + ⬆️, permet de remonter ou descendre une ligne en conservant l'indentation
  • CTRL + g, pour aller directement à la ligne de code voulu. Super pratique dans un gros fichier.

Et voilà, c'est tout pour moi ! Mais ne t'inquiètes pas, on en reparle bientôt des petits trucs et astuces ✌️

PS : Si tout ça permet de gagner du temps, attention à ne pas trop en perdre avec la configuration qui peut être très chronophage et fastidieuse car la doc officielle n'est pas super bien foutue. Mais la communauté est très présente sur l'Internet et tu n'auras pas de mal à trouver tes réponses.