Les 9 plugins VS Code qui vous feront gagner du temps
Une liste d'extensions utiles, triées par catégories : productivité, accessibilité, frameworks,...
Voici une liste de plusieurs extensions pour Visual Studio Code pour améliorer votre expérience de développement, votre productivité et la qualité de votre code !
À noter : toutes ces extensions sont installées sur mon VS Code et je m'en sers régulièrement !
Productivité
GitHub Copilot (Autocomplétion / Payant)
Sans doute l'extension la plus connue de cette liste, Copilot est une extension de complétion (et plus précisemment de génération) de code, basé sur de l'intelligence artificielle entrainée sur les dépôts de code open-source présents sur GitHub.
En plus de l'extension, il vous faudra un abonnement d'environs 10$ par mois pour l'utiliser (avec un essai gratuit de 30 jours)
Lien : https://marketplace.visualstudio.com/items?itemName=GitHub.copilot
ErrorLens (Affichage des erreurs)
Voir un mot souligné en rouge, passer sa souris dessus, attendre que l'erreur s'affiche, etc... Ça ne parait pas horrible, mais multiplié par des dizaines d'erreurs tous les jours, c'est une perte de productivité énorme.
ErrorLens vous permet d'afficher automatiquement une erreur à la suite du code qui pose problème, pour améliorer votre productivité !
Lien : https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
Code Spell Checker (Correction orthographique)
Les correcteurs orthographiques sont présent dans tous les éditeurs classiques (Word, Google Doc, etc...) mais pas dans l'éditeur dans lequel nous passons le plus de temps...
Et bien maintenant c'est le cas !
Lien : https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
À noter que vous aurez besoin d'une extension supplémentaire pour le Français
Peacock (Multi-fenêtres)
Si vous avez l'habitude d'avoir plusieurs fenêtres VS Code ouvertes en même temps (notamment si vous faites du front et du back), il est parfois facile de se tromper de fenêtre.
Peacock vous permet d'assigner une couleur spécifique à chaque éditeur pour mieux se repérer !
Lien : https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
SVG (Prévisualisation)
Un outil pour prévisualiser les fichiers SVG directement dans VS Code, avec plusieurs options pour la couleur de fond. Très pratique !
Lien : https://marketplace.visualstudio.com/items?itemName=jock.svg
Markdown Preview GitHub Styling (Prévisualisation)
Prévisualiser des fichiers .md c'est bien, mais si en plus on peut avoir le rendu exact d'un fichier README comme il apparaitra sur GitHub, c'est mieux, et c'est ce que fait cette extension.
Lien : https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles
Accessibilité
WebHint (Linter pour le web)
Un linter notamment basé sur les recommandations de Mozilla en ce qui concerne l'accessibilité web. Vous ne raterez plus jamais un attribut alt manquant sur une image !
À noter que ce plugin ne fonctionne pour l'instant pas avec les fichiers VueJS (.vue).
Lien : https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint
TiffColors (Thème pour daltoniens)
Si comme moi, vous êtes daltonien (spécifiquement Deuteranope), et que la coloration syntaxique n'est pas toujours optimale, ce thème VS Code devrait régler le problème !
Lien : https://marketplace.visualstudio.com/items?itemName=tiffnix.tiffcolors
Langages et frameworks
Tailwind CSS IntelliSense (Autocomplétion)
Les plugins Intellisense sont vraiment un must-have pour n'importe quel langage, mais également pour TailwindCSS !
Lien : https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Volar (Autocomplétion/Parsing/VueJS)
Volar est LE plugin recommandé pour travailler avec VueJS (et Nuxt) !
Attention néanmoins, si vous êtes encore sur Vue2, vous aurez besoin d'une configuration spéciale (dispo dans la doc du plugin).
Lien : https://marketplace.visualstudio.com/items?itemName=Vue.volar
À essayer
Quokka.js
Quokka permet d'écrire du JavaScript, et de visualiser le résultat de l'exécution du code directement depuis l'éditeur, sans avoir rien à faire d'autre.
Si vous débutez en JavaScript, cela peut vous aider, mais vous pourrez faire sans si vous avez déjà les bases.
Lien : https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
J'espère que cet article vous aura été utile, et à bientôt sur le blog !
Les articles les plus populaires du blog
Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !
Voir la sélection 🚀Recevez les articles de la semaine par e-mail pour ne rien manquer !
S'abonner à la newsletter 📧
À propos de l'auteur
Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.
Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !
Photo de Techivation sur Unsplash