Top 15 extensions Vscode utiles pour les devs

Salut la team des codeurs ! Vous en avez ras-le-bol de VSCode tout nu ? Vous voulez pimper votre éditeur comme une voiture de Fast and Furious ? Attachez vos ceintures, on démarre la NOS des extensions !

1. Prettier - Code formatter

Parce que ton code doit être aussi propre que la chambre que tu montres à tes parents quand ils débarquent à l'improviste. Prettier va formater ton code automatiquement, alignant les lignes, ajustant les espaces et les sauts de ligne comme par magie. Plus besoin de te prendre la tête avec l'indentation ou les virgules en fin de ligne. Laisse Prettier faire le sale boulot pendant que tu te concentres sur l'essentiel : coder comme un dieu.

2. ESLint

Le Jiminy Cricket de ton JavaScript. Il va te faire la morale à chaque ligne de code, mais au moins, tu éviteras les bugs idiots. ESLint scrute ton code à la recherche d'erreurs potentielles, de mauvaises pratiques ou de style incohérent. C'est comme avoir un mentor grognon qui regarde par-dessus ton épaule, mais qui au final te rend meilleur. Il t'apprendra à respecter les standards, à éviter les pièges courants et à coder de manière plus propre et efficace.

3. GitLens

Pour jouer les Sherlock Holmes du code. Tu sauras enfin qui a commis ce crime contre la lisibilité il y a 6 mois. GitLens te permet de voir l'historique de chaque ligne de code directement dans l'éditeur. Tu peux voir qui a modifié quoi, quand et pourquoi. C'est parfait pour comprendre l'évolution du code, trouver l'origine d'un bug ou simplement pour blâmer tes collègues (ou toi-même) pour ce bout de code mystérieux qui fait planter l'app en prod.

4. Live Share

Pour coder en groupe comme si vous étiez tous dans la même pièce, mais sans l'odeur de pizza froide et de café renversé. Live Share transforme ton VSCode en une salle de conférence virtuelle où tu peux coder en temps réel avec tes collègues. Parfait pour le pair programming, le debugging à plusieurs ou pour montrer à ton stagiaire comment on fait du vrai code. Plus besoin d'envoyer des snippets par Slack ou de faire des calls interminables, tout se passe en direct dans ton éditeur.

5. Bracket Pair Colorizer

Parce que les accolades, c'est comme les chaussettes : ça va toujours par paire et c'est mieux quand c'est de la même couleur. Cette extension colorie les paires de parenthèses, crochets et accolades pour que tu t'y retrouves dans ton labyrinthe de code. Fini les heures passées à compter les ouvertures et fermetures pour trouver celle qui manque. Maintenant, tu peux voir d'un coup d'œil si ta syntaxe est correcte ou si tu as oublié de fermer cette fonction qui s'étend sur 200 lignes (on ne juge pas, promis).

6. Quokka.js

Un bac à sable JavaScript directement dans ton éditeur. C'est comme jouer au code sans risquer de casser la prod. Quokka.js te permet de tester rapidement des bouts de code JavaScript ou TypeScript en temps réel. Tu vois les résultats directement dans l'éditeur, sans avoir à switcher entre ton navigateur et VSCode. C'est l'outil parfait pour expérimenter, débugger ou simplement comprendre comment fonctionne ce bout de code bizarre que tu as trouvé sur Stack Overflow à 3h du matin.

7. Code Spell Checker

Parce que "function" avec deux "n", ça fait vraiment amateur. Ton code va enfin avoir l'air d'avoir été écrit par un adulte responsable. Cette extension vérifie l'orthographe dans ton code, tes commentaires et tes chaînes de caractères. Elle supporte plusieurs langages et peut même apprendre ton jargon technique. Plus d'excuse pour les variables mal orthographiées ou les commentaires qui ressemblent à du SMS d'ado. Bonus : ça t'évitera de passer pour un idiot lors de la prochaine revue de code.

8. Todo Tree

Pour ne plus jamais oublier ce que tu devais faire. C'est comme un Rappel sur ton téléphone, mais pour ton code. Todo Tree scanne ton projet à la recherche de commentaires comme TODO, FIXME, ou n'importe quel mot-clé que tu définis. Il les affiche ensuite dans une jolie arborescence, te permettant de voir d'un coup d'œil toutes les tâches en attente dans ton projet. Plus d'excuse pour oublier de finir cette fonction cruciale ou de nettoyer ce bout de code temporaire qui traîne depuis 6 mois.

9. Live Server

Lance un serveur local en un clic. C'est comme avoir son propre serveur web, mais sans le stress de la maintenance et des mises à jour de sécurité. Live Server crée un serveur de développement local avec rechargement automatique de la page. Parfait pour le développement front-end, il te permet de voir tes changements en temps réel sans avoir à rafraîchir manuellement la page. C'est comme avoir un assistant qui actualise la page pour toi à chaque fois que tu sauvegardes. La flemme du dev poussée à son paroxysme !

10. Material Icon Theme

Parce que même tes icônes de fichiers méritent d'être stylées. C'est le petit plus qui fait croire que tu sais ce que tu fais. Cette extension remplace les icônes par défaut de VSCode par des icônes plus jolies et plus explicites. Chaque type de fichier a sa propre icône, rendant la navigation dans ton projet plus intuitive et agréable. C'est comme donner un coup de peinture à ton garage : ça ne te rend pas meilleur mécanicien, mais ça donne l'impression que tu es plus pro.

11. WakaTime

Pour tracker le temps que tu passes à coder. Ou plutôt, le temps que tu passes à chercher pourquoi ton code ne marche pas sur Stack Overflow. WakaTime enregistre automatiquement le temps que tu passes sur chaque projet, chaque langage, et même chaque fichier. Il génère ensuite des rapports détaillés et des graphiques sexy que tu peux utiliser pour impressionner ton boss ou te déprimer en voyant combien de temps tu as vraiment passé à debugger cette boucle for. Bonus : tu peux enfin prouver que tu as vraiment bossé 12h d'affilée sur ce projet urgent.

12. Codeium

L'IA qui code presque aussi bien que toi. Parfait pour les jours où ton cerveau est en mode veille. Codium utilise l'intelligence artificielle pour t'assister dans ton code. Il peut compléter des lignes entières, suggérer des fonctions, et même générer des commentaires. C'est comme avoir un collègue virtuel qui ne se plaint jamais et qui est disponible 24/7. Attention cependant à ne pas trop s'y fier : l'IA peut parfois produire du code qui semble correct mais qui cache des subtilités que seul un humain peut comprendre.

13. Better Comments

Pour que tes commentaires aient enfin l'air aussi importants que ton code. Colorie tes TODOs, tes alertes et tes questions existentielles sur la vie, l'univers et le reste. Cette extension te permet de catégoriser tes commentaires avec différentes couleurs selon leur type : alertes, questions, TODOs, commentaires importants, etc. C'est comme avoir un système de post-it colorés directement dans ton code. Plus d'excuse pour ignorer ce commentaire crucial qui te rappelle de ne pas pousser ce hack temporaire en production.

14. Error Lens

Parce que chercher les erreurs dans la console, c'est tellement 2010. Maintenant, tes erreurs te sautent aux yeux directement dans l'éditeur. Error Lens affiche les erreurs, avertissements et autres informations directement à côté de la ligne de code concernée. Plus besoin de jongler entre ton éditeur et la console pour comprendre pourquoi ton code ne marche pas. C'est comme avoir un correcteur en temps réel qui souligne tes erreurs en rouge, sauf que là, c'est ton code qu'il corrige, pas ta dictée.

15. CodeSnap

Pour partager ton code sur les réseaux sociaux comme un vrai influenceur du dev. Parfait pour impressionner tes followers avec tes one-liners incompréhensibles. CodeSnap te permet de prendre de jolies captures d'écran de ton code, avec la coloration syntaxique et tout le tralala. Tu peux personnaliser l'apparence, ajouter des ombres, changer les couleurs... C'est l'outil idéal pour partager des snippets sur Twitter, illustrer tes articles de blog ou simplement pour montrer à ta grand-mère à quel point ton travail est "joli" (même si elle n'y comprend rien).

Pro-tip du jour

N'installe pas toutes ces extensions d'un coup, sinon ton VSCode va ramer comme un PC qui essaie de faire tourner Crysis. Choisis celles qui te correspondent le mieux et teste-les une par une. Et n'oublie pas : la meilleure extension, c'est encore ton cerveau (et peut-être une bonne dose de caféine) !

Et voilà les amis ! Avec ces 15 extensions, vous êtes parés pour coder comme des rock stars du clavier. N'hésitez pas à fouiner dans le store VSCode pour dénicher d'autres pépites. Et rappelez-vous : un bon dev n'est pas celui qui a le plus d'extensions, mais celui qui sait utiliser les bonnes au bon moment (et qui sait quand il est temps de faire une pause et d'aller toucher de l'herbe).

Allez, filez coder maintenant, ces bugs ne vont pas se corriger tout seuls ! (Quoique, avec l'IA, on ne sait jamais...)

  • A+
  • A-